模拟新浪导航条

Original 2019-02-27 20:00:32 243
abstract:<!doctype html><html><head><meta charset="UTF-8"><title>新浪导航条</title><!--  外部导入的css我不知道如何上传,所以就在下面用内部css替代了。但是,字体的font-awesome.min.css不知如何上传。-->

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>新浪导航条</title>

<!--  外部导入的css我不知道如何上传,所以就在下面用内部css替代了。但是,字体的font-awesome.min.css

不知如何上传。-->

<!--建议将这个上传的界面修改一下,增加可以上传文件夹的选项。-->

<link rel="stylesheet" href="css/dht.css">

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

<style>

  *{margin: 0px;padding: 0px;}

.header{width:100% ;height: 40px;background-color: #F7F4F4;

border-bottom: 1px solid #DEDCDC;border-top: 3px solid #FF8500;}

.header_content{width: 1000px;height: 40px; margin: auto;line-height: 40px;}

.header_left{width:400px ;height: 40px; float: left;}

.header_right{width:500px ;height: 40px;float: right;text-align: right;}

a{display:inline-block;text-decoration: none;color: #000;font-size: 12px;text-align: center;

    margin-right: 0px;/*height: 40px;width: 50px;*/}

.header_content a:hover{color:#FF8500 ;background:#D6DDEF;line-height: 40px;}

.clear{clear: both;}

.header_left a{padding-left: 10px;padding-right: 10px;}

.header_right a{padding-left: 18px;padding-right: 18px;}

h2{text-align: center;margin-top: 15px;}

</style>

</head>

<body>

<div>

<div>

<div>

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

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

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

</div>

<div>

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

</div>

</div>

<h2>这是我写的新浪导航条,请老师指教!</h2>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-02-28 09:17:15
Teacher's summary:完成的不错,下次提交作业可以附上作业完成图片

Release Notes

Popular Entries