HTML淘宝导航条

原创2019-06-24 10:49:5547
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>淘宝网</title>


<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1257000_89gg54nh7po.css">

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}


.iconfonts {

margin: 0px 0px 0px 0px;

float: left;

color: coral;

}


.iconfontss {

margin: 0px 5px;

float: left;

}


.margins {

margin-left: 16px;

}


a {

text-decoration: none;

color: black;

}


a[href='##'] {

color: chocolate;

}


a:hover {

color: chocolate;

}


.clear {

clear: both;

}


ul li {

list-style: none;

float: left;

font-size: 12px;

margin-left: 8px;

}


.top_menu {

height: 50px;

}


.content {

width: 1200px;

height: 36px;

line-height: 36px;

text-align: center;

margin: 0px auto;

}


.left {


float: left;

}


.right {


float: right;

}


.list ul {

border: 1px solid #f5f5f5;

margin: 0px 0px 0px 38px;

display: none;

}


.list ul li {

clear: both;

width: 80px;

text-align: left;

margin: 0px -40px;

}


.lists:hover ul {

display: block;

position: absolute;

}


.lists {

position: relative;

}

</style>

</head>


<body>

<!-- 跟着老师的视频做了这个导航。但是写的方法跟老师的不太一样。还有些地方老师加了浮动,我没有加也能正常显示。现在虽然能写出来,但是懵懵懂懂,可能写的多了自己就明白了-->

<div class="top_menu">

<div class="content">

<div class="left">

<ul>

<li class="lists">中国大陆

<div class="list">

<ul>

<li>中国大陆</li>

<li>中国台湾</li>

<li>中国香港</li>

<li>美国</li>

<li>韩国</li>

</ul>

</div>

</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>

<li><a href="##">亲,请登录</a> </li>

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

<li class="margins"><a href="#">手机逛淘宝</a></li>

</ul>

</div>

<div class="right">

<ul>

<li class="lists"><a href="">我的淘宝</a>

<div class="list">

<ul>

<li>已买到的宝贝</li>

<li>我的足迹</li>

</ul>

</div>

</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>


<li><a href=""></a>

<i class="iconfont iconicon-test iconfonts"></i>

<a href="#">购物车</a>


</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>


<li class="lists"><a href=""></a>

<i class="iconfont iconaixin iconfonts"></i>

<a href="#">收藏夹</a>


<div class="list">

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</div>

</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>

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

<i class=" iconfont iconvertical_line iconfontss"></i>

<li><a href=""></a>千牛卖家中心</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>

<li><a href=""></a>联系客服</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>


<li><a href=""></a>

<i class="iconfont icondingdan iconfonts"></i>网站导航

</li>

<i class="iconfont iconRectangleCopy iconfontss"></i>

</ul>

</div>

</div>

</div>

</body>


</html>


批改老师:欧阳批改时间:2019-06-25 17:48:51
老师总结:完成的不错。学编程,先从模仿开始,继续加油。

发布手记

热门词条