每次写设置元素css样式的位置好难确定

Original 2019-06-16 23:45:12 222
abstract:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航案例</title><style>*{ margin:0; pad

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航案例</title>

<style>

*{

margin:0;

padding:0;

}

a{

text-decoration:none;

color:#6c6c6c;

font-size:13px;

}

.q{

clear:both;

}

li{

list-style:none;

}

.header{

width:100%;

background-color:#f5f5f5;

}

.cont{

width:1200px;

margin: 0px auto;

line-height:40px;

}

.c_left{

height:40px;

float:left;

}

.c_right{

width:800px;

float:right;

}

.b{

display:inline-block;

width:70px;

height:40px;

text-align:center;

position:relative;

}

.c_left a{

margin-right:5px;

}

.cont a:hover{

color:#ff5000;

}

.b:hover{

background-color:#FFF;

}


.b ul{

border:1px solid #f5f5f5;

display:none;

border-top:none;

}

.b:hover ul{

display:block;

position:absolute;

width:70px;

}

.b ul li{

color:#6c6c6c;

height:30px;

line-height:30px;

padding:0px 3px;

margin:5px 0px;

}

.b ul li:hover{

background-color:#ccc;

}


</style>

</head>


<body>

<div class="header">

<div class="cont">

<div class="c_left">

<a href="#" class="b">中国大陆 <span>v</span>

</a>

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

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

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

</div>


<div class="c_right">

<a href="#" class="b">我的淘宝 <span>v</span>

<ul>

<li>1</li>

<li>2</li>

</ul>

</a>

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

<a href="#" class="b">收藏夹 <span>v</span>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</a>

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

<a href="#" class="b">卖家中心 <span>v</span>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</a>

<a href="#" class="b">客服中心 <span>v</span>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</a>

</div>

<div class="q"></div>

</div>

</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-06-17 09:36:06
Teacher's summary:完成的不错。css样式学好,做出来的页面很绚丽。继续加油。

Release Notes

Popular Entries