摘要：一句话，得多做练习！ 做的过程发现自身的弱项在哪里了，总结如下： 1、对元素自身的理解不够，以至于不知道选用哪些属性来实现效果； 2、对属性值的熟悉度不够，以至于出现各种错位和不显示； 3、鉴于以上两点，综合应用起来就是渣渣级别； 4、尤其是对position相对定位、绝对定位的理解，float浮动中标准流和浮动流的理解，还有display的理解；感觉是难点，吃透了就会好很多； -------
一句话，得多做练习！ 做的过程发现自身的弱项在哪里了，总结如下： 1、对元素自身的理解不够，以至于不知道选用哪些属性来实现效果； 2、对属性值的熟悉度不够，以至于出现各种错位和不显示； 3、鉴于以上两点，综合应用起来就是渣渣级别； 4、尤其是对position相对定位、绝对定位的理解，float浮动中标准流和浮动流的理解，还有display的理解；感觉是难点，吃透了就会好很多； ------------------------html部分--------------------------- <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div> <div> <div> <a href="#">中国大陆 <i class="fa fa-angle-down"></i></a> <a href="#" style="color:#ff5000;">亲，请登录</a> <a href="#">免费注册</a> <a href="#">手机逛淘宝</a> </div> <div> <a href="#">淘宝网首页</a> <a href="#">我的淘宝 <i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href="#"><span class="fa fa-cart-arrow-down" style="color:#ff5000;"></span> 购物车 <i class="fa fa-angle-down"></i></a> <a href="#"><span class="fa fa-star" style="color:#778899;"></span> 收藏夹 <i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> <li>我的足迹</li> <li>我的足迹</li> <li>我的足迹</li> <li>我的足迹</li> <li>我的足迹</li> </ul> </a> <a href="#">商品分类 <i class="fa fa-angle-down"></i></a> <a href="#">卖家中心 <i class="fa fa-angle-down"></i></a> <a href="#">联系客服 <i class="fa fa-angle-down"></i></a> <a href="#"><span class="fa fa-reorder (alias)" style="color:#ff5000;"></span> 网站导航 <i class="fa fa-angle-down"></i></a> </div> <div></div> </div> </div> </body> </html> ------------------------CSS部分---------------------------
*{margin: 0px;padding: 0px;}
a{text-decoration: none;color:#6b6b6b;font-size: 12px;}
li{list-style: none;}
.clear{float: both;}
.header{width: 100%;background-color: red;}
.header_content{width:1200px;margin: 0px auto;line-height: 40px;}
.header_left a{margin-right:3px;}
.header_content a:hover{color:#ff5000;}
.header_left{height: 40px;float: left;}
.header_right{height: 40px;float: right;}
.header_a{display:inline-block;width: 80px;height: 40px;text-align:center;position: relative;}
.header_a:hover{background-color:#fff;}
.header_a ul{border:1px solid #fff;display:none;border-top: none;}
.header_a:hover ul{display: block;position: absolute;width: 100px;}
.header_a ul li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 5px;}
.header_a ul li:hover{background-color: red;}
批改老师：灭绝师太批改时间：2018-12-15 09:20:59
老师总结：从布局来看，学习的不错呦，布局主要是要熟悉每个标签的用法，用意，多练习就好了！
