要不然你连基础的都没有学好这么深入呢？
像这样的其实写法有很多，如用列表
<ul>
<li><span>1.xxxxx<span><span><img scr="图片地址"/><span></li>
<li>2.xxxxx</li>
<li>3.xxxxx</li>
<li>4.xxxxx</li>
<li>4.xxxxx</li>
</ul>
给第二，和第四的 li 设置背景background-click:#ccc
可以使用伪类的偶数项来控制，如 ul>li:nth-child(even){background-click:#ccc}
这里控制的就是只有偶数项的li才添加背景颜色。至于图片，可以通过设置 li里面的
div浮动来设置，也可以使用定位等
<li><div>1.xxxxx<div><div><img scr="图片地址"/><div></li>
这里的div如果给了浮动就要给父级li清除浮动，不然回受到影响。
用padding写<div class="a"></div>
<style>
.a{
padding:10px/*这个是上下左右内边距都是10像素*/
padding:0 5px 2px 3px
/*对应顺序：上 右 下 左就是上内边距为0像素，右内边距为5像素以此类推*/
padding:10px 30px 10px
对应顺序 上 左右 下就是上内边距10像素 左右30像素 下内边距 10像素
padding:10px 20px
对应顺序 上下 左右 就是上下内边距为10像素 左右内边距为20像素
}
</style>
这是四种边距设定的写法，每次根据不同环境只用一种就行 margin（外边距）同理的
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
* {
margin: 0px
padding: 0px
}
.nav {
width: 960px
height: 60px
border: 1px solid red
margin: 100px auto
}
.nav ul {
list-style: none
}
.nav ul li {
float: left
background-color: #e7ffb0
}
.nav ul li a {
display: block
width: 120px
text-align: center
line-height: 60px
text-decoration: none
color: #5a3467
}
.nav ul li a:hover {
cursor: pointer
background-color: #645e55
color: #cdff83
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）