新浪导航条的布局

Original 2018-11-19 15:10:15 349
abstract:  通过看老师讲解的淘宝导航条,自己防写新浪的导航条,通过该导航条,让自己巩固之前学习过的知识,总结想要做好这一行的编程还是要多写多练。   新浪导航条的案例如下所示:<!DOCTYPE html><head> <meta charset="utf-8"> <title>新浪导航条</title

  通过看老师讲解的淘宝导航条,自己防写新浪的导航条,通过该导航条,让自己巩固之前学习过的知识,总结想要做好这一行的编程还是要多写多练。

   新浪导航条的案例如下所示:

<!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;}

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;}

</style>

</head>

<body>

<div class= "header">

<div class= "header_m">

<div class= "header_l">

<a href= "#">设置为首页</a>

<a href= "#">手机新浪网</a>

<a href= "#">移动客户端 &nbsp<i class= "fa fa-angle-down"></i></a>

</div>

<div class= "header_r">

<a href="#">登录</a>

<a href="#">微博 &nbsp <i class= "fa fa-angle-down"></i></a>

<a href="#">博客 &nbsp <i class= "fa fa-angle-down"></i></a>

<a href="#">邮箱 &nbsp <i class= "fa fa-angle-down"></i></a>

<a href="#">网站导航</a>

</div>

</div>

<div class="clear"></div>

</div>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2018-11-19 15:29:03
Teacher's summary:非常棒!完成的很好!这种自己找案例的想法,继续保持

Release Notes

Popular Entries