css里的浮动与定位

abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ttt</title> <link rel="stylesheet" type="text/css" href="css/dhbj.cs

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ttt</title>
<link rel="stylesheet" type="text/css" href="css/dhbj.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> -->
</head>
<body>
<div class="head">
<div class="head_cent">
<div class="head_cent_l">
<a href="" class="heada">中国大陆&nbsp&nbsp<i class="fa fa-angle-down"></i></a>
<a href="" style="color: #FF8700">新，请登录</a>
<a href="" class="heada">免费注册</a>
<a href="" class="heada">手机逛淘宝</a>
</div>

<div class="head_cent_r">
<div class="menu">
<a href="" class="heada">我的淘宝</a>&nbsp&nbsp<i class="fa fa-angle-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-shopping-cart"></span>&nbsp
<a href="" class="heada">购物车</a>&nbsp
<i class="fa fa-angle-down"></i>
</div>
<div class="menu">
<span class="fa fa-star" style="color:#FF4400"></span>&nbsp
<a href="" class="heada">收藏夹</a>&nbsp
<i class="fa fa-angle-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
<div class="menu">
<a href="" class="headb">商品分类</a>
</div>
<div class="menu">
<a href="" class="heada" >卖家中心</a>&nbsp&nbsp
<i class="fa fa-angle-down"></i>
<ul class="mjzs">
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
</ul>
</div>
<div class="menu">
<a href="" class="heada">联系客服</a>&nbsp&nbsp
<i class="fa fa-angle-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-bars" style="color:#FF4400"></span>&nbsp
<a href="" class="heada">网站导航</a>&nbsp
<i class="fa fa-angle-down"></i>
</div>
</div>

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

</div>

<div class="t"></div><div class="t"></div>
</body>
</html>
*{margin: 0px;padding: 0px;}

a{text-decoration: none;color: #666666;font-size: 12px;}

ul li {list-style: none;font-size: 12px;text-align: left;padding: 0px 12px;height: 30px;}


.clear{clear: both;}

.head{width: 100%;line-height: 36px ;background-color: #F5F5F5;}
.head_cent{width: 1190px;/*height: 40px; background-color: red;*/margin: 0px auto;}
/*.head_cent a:hover{color: #FF8700;}*/

.head_cent_l{/*width: 200px;*/height: 36px;float: left;/*background-color: blue;*/}


.head_cent_r{/*width: 630px;*/height: 36px;float: right;/*background-color: yellow;*/}

.menu{height: 36px;width: 96px;float: left;/*border: 1px solid yellow;*/display: inline-block;text-align: center;}
.menu:hover ul{display: block;}
.menu a:hover {color:#FF8700; }
.menu ul{display: none;}

/*.heada{display: inline-block;height: 36px;width: 76px;text-align: center;}留出宽度
.heada:hover {background-color: #fff;position: relative;color: #FF8700;}

.headb{display: inline-block;height: 36px;width: 80px;text-align: center;}/*留出宽度

.heada ul {display: none;position: absolute;width: 96px;border: 1px 1px 0px 1px solid #F5F5F5;}
.heada:hover ul{display: block;border: 1px 1px 0px 1px solid #F5F5F5;}

.heada ul li{width:80px;height: 36px;line-height:36px;padding:0px 8px;text-align: left;color: #666666}LI的宽度如果不定义，是由字体撑开，但不会超过上一级，上一级继承的宽度。
.heada ul li:hover {background-color: #F5F5F5;}*/
.mjzs li {width: 72px;}/*由于定义了PADDING，那么实际宽度为：72+8*2*/

/*最终改一下淘宝*/

Correcting teacher：查无此人Correction time：2019-01-12 13:32:52
Teacher's summary：做的不错。代码要缩进，容易阅读。样式是从另一个文件拷贝过的吧？下次要注释哦，继续加油

css里的浮动与定位

Popular Entries