例子1:
例子2:
例子2素材:
例子1代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
/*将标签自带的内外边距属性初始化*/
margin:0;
padding: 0;
}
.nav{
width: 800px;
height: 40px;
background: pink;
margin: 20px auto;
}
.nav ul li{
list-style: none;
float: left;
}
.nav ul li a{
/**
* 虽然上面已经用float制作出浮动的效果了,
* 但是这里还是要转成行内块元素,
* 否则鼠标触发的背景无法正常展示
*
* 注意:虽然float:left;可以直接将行内元素转成类似行内块元素,
* 但是不推荐使用
*/
display: inline-block;
height: 40px;
font: 14px/40px 微软雅黑;
padding:0 20px;
text-decoration: none;
}
.nav ul li a:hover{
background: #aaa;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">嘻嘻哈哈哈</a></li>
</ul>
</div>
</body>
</html>
例子2代码:
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
/*初始化元素块内外边距*/
body,ul,li{
margin:0;
padding: 0;
}
li{
/*清空li风格*/
list-style:none;
}
.nav{
/*定义总体高度*/
height: 55px;
background:url("images/head_bg.jpg");
margin-top:30px;
border-top:1px solid #666666;
}
.nav-con{
/*定义块元素宽高*/
width:1000px;
height:55px;
/*内容居中效果*/
margin: 0 auto;
position: relative;
/*父相子绝:父类相对定位,子类绝对定位。子类的绝对定位是根据父类的定位出发*/
}
.nav-con ul li{
/*将块元素从左浮动排列*/
float:left;
background: url("images/li_bg.png") no-repeat right;
height: 55px;
padding: 0 30px;
}
.nav-con ul li a{
/*将行内元素转成行内块元素*/
display: inline-block;
height: 55px;
font:18px/55px "微软雅黑";
text-decoration: none;
color:#000;
}
.nav-con ul li a:hover{
color:green;
}
.news{
position: absolute;
/*因为是父相子绝的形式,所以子块是根据父块的大小来进行绝对定位,而非浏览器*/
left:30px;
bottom:40px;
}
</style>
</head>
<body>
<div class="nav">
<!--因为要将内容整体居中所以外面还要套一个盒子-->
<div class="nav-con">
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">智能手机</a></li>
<li><a href="#">智能手机</a></li>
<li><a href="#">智能手机</a></li>
</ul>
<div class="news"><img src="images/new.png"/></div>
</div>
</div>
</body>
</html>