WEB布局

布局

宽高-背景-浮动-内外填充-垂直居中
top-adv top header banner content footer···

行块元素

block，inline和inline-block概念和区别

1. 行内元素占内容宽（转换成块级元素宽高有效果）
   a( 锚点) ,b(粗体(不推荐)) ,span(常用内联容器，定义文本内区块) img(图片) input(输入框) select(项目选择) strong(粗体强调) label(表格标签) cite (引用)code(计算机代码)
   行内元素不占上下外边距，行内元素左右外边距不合并
   

2. 块级元素占一行
   div ul(无序列表) ol(有序列表) dl(定义列表) table(表格)form(表单) h1 (一级标题))p(段落)pre(预格式化)
   块级元素的垂直相邻外边距会合并

3. 常见的空元素：
   <br> <hr> <img> <input> <link> <meta>

盒子模型

正常宽=witdth+border+margin+padding
box-sizing: border-box;
宽：width+margin    (宽＝内容宽+border+padding)

1. 浮动流 （从左到右 fl fr 同高）
2. 标准流 （从上往下 同宽）
3. 混合流 = 浮动+标准流

图层 网站优化

三层嵌套最好（越少越好） 后面代码 图层数高

z-index:-1；  -1图层 
z-index: 1;	1图层 

通栏

内容可以撑着高度，有高度，才有背景颜色/图片

#top{
     height: 80px;
     background: rgb(180, 0, 27);
        }
  .top{宽度+居中可以和别的一起写
      width:1190px;
     margin:0 auto;水平居中
     height:80px ;
     cursor: pointer;鼠标手
     background: #e3e4e5;
        }

<div id="top">
    <div class="top">
    </div>
</div>

隐藏/下拉导航栏：注释display:none显示着写

<div id="top">
    <div class="top">
        <li>
            <a href="">隐藏导航栏</a>
            <div ><!--二级下拉-->
                平常隐藏，鼠标悬浮出现
            </div>
        </li>
    </div>
</div>

        .top li>div{/*显示隐藏标签书写相同*/
            width: 100px;
            height: 100px;
            border: solid 1px #000;
            border-top: 0px;
            display: none;
            z-index: 1;
            position: absolute;
            top: 80px;
            left: 0px;}
        .top li:hover>div{display: block;}

超链接悬浮效果

.top li a{
  color: #000;}
.top li a:hover{
  color: red;
  background: #000;

购物车数字+ iconfont

<div class="a4">
	<span>0</span>
	<a href="">我的购物车</a>
</div>

.a4{		color: red;
            width: 50px;
            text-align: right;
            position:relative;
           }

 .a4>span{
            background-color: red;
            border-radius:50%;
            width: 1.5em;
            color: #ffffff;
            text-align: center;
            font-size: 0.5em;
            position: absolute;
            top:0;
            left: 10px;
        }

图片循环播放点

<span>
     <i class="active-coin"></i>
     <i></i>
</span>

.show-right ul li a div span >i{
    width: 8px;
    height:8px ;
    display: inline-block;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    margin-right: 5px;
  }
.show-right ul li a div span >i:hover,.show-right ul li a div span >i.active-coin{
    width: 11px;
    height:11px ;
    background: rgba(0，0，0， 0.5);!important;
    border: solid 3px rgba(0，0，0, 0.5);!important;
  }