<!doctype html> <html> <head> <title>导航</title> <style type="text/css"> *{margin: 0px;padding: 0px;} a{text-decoration: :none;color: #BDBEBE;font-size: 13px;} .clear{clear: both;} .header{width: 100%;height: 40px;background-color: #E3E4E5;} .header_content{width: 1200px;height: 40px;margin: 0px auto;} .header_left{height: 40px;line-height: 40px;float: left;} .header_a:hover{color: #FF5000;background-color: white;} .header_right{width: 800px;height: 40px;line-height: 40px;float: right;} .header_a{display: inline-block;height: 40px;line-height: 40px; text-align: center;} </style> </head> <body> <div class="header"> <div class="header_content"> <div class="header_left"> <a class="header_a">北京<i class=" fa fa-angle-down"></i></a><span> </span> </div> <div class="header_right"> <a href="#">你好,请登录</a> <span> </span> <a href="" style="color:red">免费注册</a> <span> |</span> <a href="">我的订单</a> <span> |</span> <a href="" class="header_a">我的京东</a> <span> |</span> <a href="">京东会员</a> <span> |</span> <a href="" class="header_a">企业采购</a> <span> |</span> <a href="" class="header_a">客户服务</a> <span> |</span> <a href="" class="header_a">网站导航</a> <span> |</span> <a href="">手机京东</a> </div> </div> <div class="clear"></div> </div> </body> </html>
命令使用不熟悉,需要翻看之前的笔记才能完成。练习量不够。