摘要：明白了很多定位以及定位的目的 用到了我们上面学的css来完成这个项目 还是感谢老师的培育css代码*{padding: 0px;margin: 0px;}a{text-decoration: none;/* 去掉下划线 */ line-height: 38px;/* 行高 */font-size:15px;/* 字体大小 */}ul li{list-style:none;/* 去掉有序
明白了很多定位以及定位的目的 用到了我们上面学的css来完成这个项目 还是感谢老师的培育
css代码
*{
padding: 0px;margin: 0px;}
a{text-decoration: none;/* 去掉下划线 */ line-height: 38px;/* 行高 */font-size:15px;/* 字体大小 */}
ul li{list-style:none;/* 去掉有序列表前面的圆点 */}
.clear{clear:both}
.top{width: 100%;/* 宽 */height: 38px;/* 高 */background-color: #f5f5f5;/* 背景颜色 */}
.top_center{width: 1200px;/* 宽 */height: 38px;/* 高 */margin: 0px auto;/* 居中 */}
.top_left{/* 宽 */height: 38px;/* 高 */float: left/* 左浮动 */}
.top_left a{margin-right: 5px;/* 右边外边距 */}
.top_right{/* 宽 */height: 38px;/* 高 */float: right;/* 有浮动 */}
.top_right a{margin-right: 6px;/* 右边外边距 */}
.top_left_a{color: #6c6c6c;/* 字体颜色 */display:inline-block;/* 内快元素 例如显示下拉框 */
position: relative;/* 相对定位 例如相对框内的定位*/height: 38px;/* 高 */text-align: center;/* 文字居中 */}
.top_left_b{color: #6c6c6c;/* 字体颜色 */}
.top_left_a:hover{height:38px;/* 鼠标点击的高度 */background-color: #fff;/* 鼠标点击的背景颜色 */color: red;/* 字体颜色 */}/* 鼠标点击的效果 */
.top_left_b:hover{color: red;/* 字体颜色 */}/* 鼠标点击的效果 */
.top_left_a ul{border: 1px solid #f5f5f5;/* 边框为 一个像素 边框为单线*/display: none;/* 次元素不会被显示 例如元素不显示在行外 只是合并了 */}
.top_left_a:hover ul {display: block;/* 鼠标点击后显示快及元素 例如显示在下方*/position: absolute;/* 绝对定位 */width: 90px;/* 鼠标点击的高 */} /* 鼠标点击的效果 */
.top_left_a ul li{color: #6c6c6c;/* 字体颜色 */}
.top_left_a ul li:hover{background-color: #f5f5f5;/* 鼠标点击背景颜色*/}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index1.css">
<link rel="stylesheet" type="text/css" href="css\font-awesome-4.7.0\css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<div class="top">
<div class="top_center">
<div class="top_left">
<a href="" class="top_left_a" style="color: #282923; " >中国大陆 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>香港<>
<li>台湾<>
<li>中国大陆<>
</ul>
</a>
<a href="" style="color: #F22E00;">亲，请登录</a>
<a href="" class="top_left_b">免费注册</a>
<a href="" class="top_left_b">手机逛淘宝</a>
</div>
<div class="top_right">
<a href="" class="top_left_a">我的淘宝 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>已买到的宝贝<>
<li>我的足迹<>
</ul>
</a>
<a href="" class="top_left_b"><i class=" fa fa-shopping-cart" style="color: #ff4400;"> </i>购物车 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i></a>
<a href="" class="top_left_a">收藏夹 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>收藏宝贝<>
<li>收藏店铺<>
</ul>
</a>
<a href="" class="top_left_b">商品分类</a>
<a href="" class="top_left_a">卖家中心 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>免费开店<>
<li>已卖出的宝贝<>
<li>出售中的宝贝<>
<li>卖家服务市场<>
</ul>
</a>
<a href="" class="top_left_a">联系客服 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>消费者客服<>
<li>卖家客服<>
</ul>
</a>
<a href="" class="top_left_a"><i class=" fa fa-server" style="color: #ff4400;"></i>网站导航 <i class=" fa fa-angle-down" style="color: #a2a2a2;"></i>
<ul>
<li>消费者客服<>
<li>卖家客服<>
</ul>
</a>
</a>
</div>
</div>
</div>
</body>
<ml>
批改老师：韦小宝批改时间：2018-12-06 15:39:48
老师总结：不错不错！写的很棒哦！课后要记得多多练习啊！
