day04

1命名规范

 <div class="top"></div>页眉
 <div class="nav">导航
        <div class="nav-wrap"></div>索引
 </div>
 <div class="container"></div>容器
 <div class="footer"></div>页脚

2.1背景

背景重复
background-repeat: no-repeat 显示1个|repeat-x 显示横向平铺|repeat-y 显示竖向     
background-position-x:横坐标方向的位置 background-position-y:纵坐标方向的位置
      传参 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进制
        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;
        }
        文本缩进
        text-indent:
        文本转换
        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 斜体
        字体权重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;
        }
        同时使用这些状态时，顺序不能打乱；
        a:link - 正常，未访问过的链接
        a:visited - 用户已访问过的链接
        a:hover -当用户鼠标放在链接上时
        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;/表格边框属性/
}

• 关键样式
  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设置这个两个属性
            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