css的居中效果、li鼠標懸浮背景顏色從上往下變化、選擇器的分類與使用

zhigoo 發布于2019-08-30 14:15 / 2285人閱讀

摘要：一居中效果行內垂直居中行內水平居中內塊級元素水平居中內塊級元素垂直居中二鼠標懸浮背景顏色從上往下變化三選擇器的分類與使用核心選擇器標簽類并且或者層次后代子代下一個兄弟之后所有兄弟屬性選擇器過濾器配合基本選擇器進行篩選選擇具有

一 css居中效果
（1）div行內垂直居中

   div li{
        height:30px;
        line-height:30px; 
       }

(2)div行內水平居中

   div li{
       text-align:center;
       }

(3) div內塊級元素水平居中

   div p{
        margin：0 auto；
        width:50%;
        }

（4）div內塊級元素垂直居中

   div p{
   height:300px;
   line-height:300px;
   }

二、li鼠標懸浮背景顏色從上往下變化

ul li a{
    text-decoration: none;
    color:#ffffdffffd;
    display: block;
    background:linear-gradient(white 50%, #373735 50%);
    background-size: 100% 200%;
    background-position: 0 100%;
    
}
 ul li a:hover{
   background-position: 0 0%;
    color:#000;
    transition: background .3s ease;
    
}

三、選擇器的分類與使用
（1）核心選擇器

    標簽
    類
    id
    并且     p.one#first
    或者        p,.one,#first

(2) 層次

    后代    parent sons
    子代    parent>sons
    下一個兄弟        .one+*
    之后所有兄弟     .one~*

(3) 屬性選擇器(過濾器)

    配合基本選擇器進行篩選
    
    selector[name]
    input[name=username] 選擇具有name屬性的、并且name的值為val元素
    input[name*=use]選擇具有name屬性的、并且name的值包含user的元素    
    input[name^=u]選擇具有name屬性的、并且name的值以val開頭的元素
    innput[name$=e]選擇具有name屬性的、并且name的值以e結尾的元su
    input[name~=username]選擇具有name屬性的、并且name的值之一為username的元素

(4) 偽類選擇器

    配合基本選擇器進行篩選
    1) 子元素
        :first-child
        :last-child
        :nth-child()
        :first-of-type
        :last-of-type
        :nth-of-type()
    2) 狀態
        :hover
        :active
        :focus
(5) 偽元素選擇器
    ::after
        常用于清除浮動，讓浮動的子元素將父撐起來。

云服務器 GPU云服務器使用js修改背景顏色服務器管理器的使用 html表的背景顏色鼠標懸浮

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115888.html

文檔流&文字&CSS常用命令

摘要：文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內聯元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯結，請使用屬性想打斷的內聯元文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排 sho...

zebrayoung 2019-08-30 14:13 評論0 收藏0
文檔流&文字&CSS常用命令

摘要：文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內聯元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯結，請使用屬性想打斷的內聯元文檔流文檔流就是文檔內元素流動方向流動方向內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排 sho...

pingink 2019-08-01 18:43 評論0 收藏0
前端知識點總結——CSS

摘要：父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為，并設置其背景顏色設置的上外邊距為觀察其結果。前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表） 2.作用設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML：負責內容的展示 CSS：負責內容（元素）...

nicercode 2019-08-30 14:01 評論0 收藏0
前端硬核面試專題之 CSS 55 問

摘要：前言本文講解道前端面試的的內容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數據結構與算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 55 道前端面試的 CSS 的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章...

崔曉明 2019-08-30 15:44 評論0 收藏0