摘要： 通过改节的学习，自己学会了下拉列表的使用，通过练习是自己更加熟练下拉列表的应用，是自己的基础进一步的巩固； 案例如下，用CSS3 的内部样式完成：<!DOCTYPE html><head> <meta charset="utf-8"> <title>新浪导航条</title> &l
通过改节的学习，自己学会了下拉列表的使用，通过练习是自己更加熟练下拉列表的应用，是自己的基础进一步的巩固；
案例如下，用CSS3 的内部样式完成：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>新浪导航条</title>
<link rel="shortcut icon" type="image/x-icon" href="../picture/xinlang.jpg">
<!-- <link rel="stylesheet" type="text/css" href="../css/daohangtiao css.css"> -->
<!-- 引入css外部样式表 -->
<link rel= "stylesheet" type= "text/css" href ="../css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 字体库符号引入 -->
<style type= "text/css">
*{margin:0px; padding:0px;}
.clear{clear:both;}
a{text-decoration:none;margin-right:22px;color:#4C4C4C;font-size:12px;position:relative;}
a:hover{color:#FA7D3C;}
.header{width:100%;height:47px;background:#FFFFFF;border-top:3px #FA7D3C solid;}
.header_m{height:50px;line-height:50px;width:1020px;margin:0px auto;}
.header_l{width:279px;height:50px;float:left;}
.header_r{width:403px;height:50px;float:right;}
ul{list-style:none;display:none;font-size:12px;color:#4C4C4C;}
a:hover ul{display:block;position:absolute;}
li:hover{color:#FA7D3C;}
.header_l_a li{border:1px solid #F39D15;width:80px;height:30px;line-height:30px;padding-left:10px;border-top:none;}
.li{border-top:;}
.header_l_a{display:inline-block;width:80px;}
.header_r_a {display:inline-block;width:50px;}
.header_r_a li{border:1px solid #F39D15;width:50px;height:20px;line-height:20px;border-top:none;padding-left:15px;}
.ul_style2 li{border:1px solid #F39D15;width:70px;height:20px;line-height:20px;border-top:none;padding-left:15px;}
</style>
</head>
<body>
<div class= "header">
<div class= "header_m">
<div class= "header_l">
<a href= "">设置为首页</a>
<a href= "">手机新浪网</a>
<a href= "" class= "header_l_a">移动客户端  <i class= "fa fa-angle-down"></i>
<ul>
<li>新浪微博</li>
<li>新浪财经</li>
<li>新浪体育</li>
<li>新浪新闻</li>
<li>新浪娱乐</li>
<li>新浪港股通</li>
<li>天气通</li>
<li>新浪游戏</li>
<li>新浪众测</li>
</ul>
</a>
</div>
<div class= "header_r">
<a href="">登录</a>
<a href=""class= "header_r_a">微博   <i class= "fa fa-angle-down"></i>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</a>
<a href=""class= "header_r_a">博客   <i class= "fa fa-angle-down"></i>
<ul class="ul_style2">
<li>博客评论</li>
<li>未读提醒</li>
</ul>
</a>
<a href=""class= "header_r_a">邮箱   <i class= "fa fa-angle-down"></i>
<ul class="ul_style2">
<li>免费邮箱</li>
<li>VIP邮箱</li>
<li>企业邮箱</li>
</ul>
</a>
<a href="">网站导航</a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-20 09:07:19
老师总结：完成的不错，下次记得附上课程完成图片奥！
