淘宝的导航栏,先模范,再深入.

Original 2019-06-13 23:48:51 203
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘宝导航条</title><link rel="stylesheet" href="font-aw/css/font-awesome.min.css"

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>淘宝导航条</title>

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

<style type="text/css">


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


 a{text-decoration: none;color: #000;font-size: 13px}


 .clear{clear: both;}


 .header{width: 100%;background-color: #f5f5f5;}


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


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


 .header_left a{margin-right: 5px}


 .header_content a:hover{color:#ff5000;}


.header_right{width:600px;height: 40px;float:right;} 


.header_a{display: inline-block;height: 40px;width: 90px;text-align: center}


.header_a:hover{background-color: #fff}


</style>


</head>

<body>

<div>

<div>

<div>

<a href="">中国大陆&nbsp &nbsp<i class="fa fa-angle-down"></i></a>

<a href="" style="color:#ff5000">亲,请登录</a>

<a href="">免费注册</a>

<a href="">手机逛淘宝</a>

</div>

<div>

<a href=""><span class="fa fa-cart-plus"></span>&nbsp &nbsp购物车</a>

<a href=""><span class="fa fa-star"></span>&nbsp &nbsp收藏夹&nbsp &nbsp<i class="fa fa-angle-down"></i></a>

<a href="">商品分类</a>

<a href="">&nbsp &nbsp卖家中心&nbsp &nbsp<i class="fa fa-angle-down"></i></a>

<a href="">&nbsp &nbsp联系客服&nbsp &nbsp<i class="fa fa-angle-down"></i></a>

<a href="">&nbsp &nbsp网站导航&nbsp &nbsp<i class="fa fa-angle-down"></i></a>

</div>

    </div>

    <div></div>

</div>


</body>

</html>

总结:网页制作第一步要需要搞清楚很多标签的含义,第二步要牢记标签的参数.

第三步,制作要先搭框架,从底框开始向上搭建,分部分区完善.

第四部,优化标签属性;

目前我现在的程度,还在第一步,离二三四步还有很多距离,需要通过不停的网页制作,增加熟悉度.

Correcting teacher:查无此人Correction time:2019-06-14 09:21:38
Teacher's summary:完成的不错,常用的css样式可以写到公用文件里,每个项目都可以加载这一个公用文件。继续加油。

Release Notes

Popular Entries