1命名規(guī)范

 <div class="top"></div>頁眉
 <div class="nav">導(dǎo)航
        <div class="nav-wrap"></div>索引
 </div>
 <div class="container"></div>容器
 <div class="footer"></div>頁腳

2.1背景

背景重復(fù)
background-repeat: no-repeat 顯示1個|repeat-x 顯示橫向平鋪|repeat-y 顯示豎向     
background-position-x:橫坐標(biāo)方向的位置 background-position-y:縱坐標(biāo)方向的位置
      傳參 top，bottom甜攀，left,right,center;
背景簡寫
background-position：x y;

2.2背景簡寫

//background:color image repeat position位置
background: red url("images/icon1.png") no-repeat center center;

2.3背景吸附

style
background-attachment: fixed固定|scroll滾動;

2.4背景大小

背景大小
           background-size:x y;
           x--->width
           y--->height
           cover-->會覆蓋整個div浙值，  只能以大覆小

3.1文本顏色

<style>
        顏色
        red-->純色
        #ff2d51    16進(jìn)制
        rgb(255.255.255)    red green blue
      p{
          color: aqua;顏色的英文意思
      }
    </style>

3.2文本對齊

 <style>
        文本對齊
        text-align: center|left|right|
        p{
            text-align: center;
        }
        文本修飾
        text-decoration: none無修飾|underline下劃線|overline上劃線|line-through貫穿線
        a{
            text-decoration: none;
        }
        文本縮進(jìn)
        text-indent:
        文本轉(zhuǎn)換
        text-transform: uppercase大寫 | lowercase 小寫|capitalize 首字母大寫
        h4{
            text-indent: 30px;
            text-transform: uppercase;
        }
    </style>

3.3字體

<style>
        body{
            font-size: 14px;
            font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
        }     
        最小的字體-->不要小于12px
        font-size字體大小
        字體樣式font-style:normal 正常| italic 斜體
        字體權(quán)重font-weight:normal | bolder 粗體| lighter 輕體
        p{
            font-size: 12px;
            font-style: italic;
            font-weight: bolder;
        }
    </style>

4鏈接

<style>
        a:link{
            color: red;
        }
        a:visited{
            color: yellow;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: blue;
        }
        同時使用這些狀態(tài)時窥淆，順序不能打亂粟害；
        a:link - 正常搞动，未訪問過的鏈接
        a:visited - 用戶已訪問過的鏈接
        a:hover -當(dāng)用戶鼠標(biāo)放在鏈接上時
        a:active -鏈接被點擊的那一刻
    </style>

5列表

<style>
        列表樣式
            list-style:none;
            list-style-type:disc實心圓點|circle空心圓點|square正方形點
        列表樣式圖片
            list-style-image:
        ul{
            list-style-type: square;
            /*list-style-image: url("images/icon1.png")*/
        }
    </style>

6表格

<style>
table,th,td{
width: 500px;
border: 2px solid #333;/表格邊框?qū)傩?/em>/
}

• 關(guān)鍵樣式
  table{
  border-collapse: collapse;/邊框折疊合并/
  line-height: 50px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  }
  </style>

<table>
        <thead>
            <!--tr table row-->
            <tr><th>商城</th><th>手機</th></tr>
        </thead>
        <tbody>
            <!--table data-->
            <tr><td>JD</td><td>蘋果</td></tr>
            <tr><td>Tmall</td><td>小米</td></tr>
            <tr><td>蘇寧</td><td>華為</td></tr>
        </tbody>
    </table><br>
    <!--
            可以在td,th設(shè)置這個兩個屬性
            colspan:value    //跨越的列
            rowspan:value   //跨越的行
    -->
    <table>
        <thead>
            <!--tr table row-->
            <tr><th colspan="2">商城</th></tr><!--列合并-->
        </thead>
        <tbody>
            <!--table data-->
            <tr><td>JD</td><td>蘋果</td></tr>
            <tr><td>Tmall</td><td>小米</td></tr>
            <tr><td>蘇寧</td><td>華為</td></tr>
        </tbody>
    </table> <br>
    
    <table>
        <thead>
            <!--tr table row-->
            <!--table data-->
            <tr><th rowspan="3">商城</th><td>JD</td><td>蘋果</td></tr>
            <tr><td>Tmall</td><td>小米</td></tr><!--行合并-->
            <tr><td>蘇寧</td><td>華為</td></tr>
        </tbody>
    </table> 

7輪廓

01.png

8透明度

02.png