摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> &
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="layui/css/layui.css"> <title>淘宝首页</title> </head> <body> <div class="header"> <div class="header_c"> <div class="header_c_l l"> <a href="">中国大陆</a>  <i class="layui-icon layui-icon-down"></i> <a href="" style="color:#ff6500;">亲,请登陆</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div class="header_c_r r"> <a href="">我的淘宝  <i class="layui-icon layui-icon-down"></i></a> <a href="" ><span class="layui-icon layui-icon-cart-simple" id="header_a"></span> 购物车</a> <a href=""><span class="layui-icon layui-icon-star-fill"></span>收藏夹  <i class="layui-icon layui-icon-down"></i></a> <a href="">商品分类</a> <a href="">卖家中心  <i class="layui-icon layui-icon-down"></i></a> <a href="">联系客服  <i class="layui-icon layui-icon-down"></i></a> <a href=""><span class="layui-icon layui-icon-shrink-right" id="header_a"></span> 网站导航  <i class="layui-icon layui-icon-down"></i></a> </div> <div class="clear"></div> </div> </div> </body> </html>
*{margin: 0px; padding:0px;}
a{text-decoration: none;color:white;font-size: 12px;}
.l{float:left;}
.r{float:right;}
.clear{clear: both;}
.header{width:100%;line-height: 40px;background: #f5f5f5;}
.header_c{width: 1200px;height: 40px;margin: 0 auto;}
.header_c a:hover{color: #ff6500; background: #fff;}
.header_c_l{width:300px;height: 40px;}
.header_c_l a{margin: 0 3px;}
.header_c_l i{font-size: 12px;}
.header_c_r{height: 40px}
.header_c_r a{display: inline-block;margin: 0 5px;}
.header_c_r a i{font-size: 12px;}
.header_c_r a span{font-size: 12px;}
#header_a{color: #ff6500;}
批改老师:天蓬老师批改时间:2019-02-14 09:14:05
老师总结:这只是一个导航, 用框架实现, 其实这么简单的导航,根本没有必要用框架