练习二 导航条
2018-09-13 本文已影响0人
qianxun0921
导航条一 翻页导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<!--
描述：翻页导航条
-->
<center>
<div class="box">
<div class="nav">
<a href="" class="pageBtn">上一頁</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href=""class="aa">...</a>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<a href="" class="pageBtn">下一頁</a>
</div>
</div>
<!--
作者：offline
时间：2018-09-11
描述：导航条01
-->
<div class="box1">
<ul class="nav1">
<li><a href="">首页</a>|</li>
<li><a href="">网站建设</a>|</li>
<li><a href="">程序开发</a>|</li>
<li><a href="">网络营销</a>|</li>
<li><a href="">企业VI</a>|</li>
<li><a href="">案例展示</a>|</li>
<li><a href="">联系我们</a>|</li>
</ul>
</div>
</center>
</body>
</html>
css代码如下：
*{
padding: 0;
margin: 0;
}
.box{
width: 958px;
height: 40px;
border: 1px solid #e8e8e8;
margin: 50px auto;
}
.nav{
margin-top:10px;
}
a{
width: 20px;
height: 18px;
line-height: 18px;
display: inline-block;
text-decoration: none;
background-color: yellow;
font-size: 12px;
font: "微软雅黑";
}
.pageBtn{
width: 60px;
height: 17px;
}
a:hover{
background-color: red;
}
.aa{
background-color: white;
}
.box1{
width: 958px;
height: 40px;
border: 1px solid #E8E8E8;
margin: 50px auto;
}
.nav1{
list-style: none;
margin-left: 170px;
}
.nav1 li{
float: left;
}
.nav1 li a{
width: 60px;
height: 18px;
background-color: white;
color: black;
font: "微软雅黑";
/*line-height: 40px;*/
font-size: 12px;
margin: 0px auto ;
margin-top: 14px;
margin-left: 20px;
}
.box1{
width: 958px;
height:40px;
border: 1px solid #E8E8E8;
margin: 50px auto;
}
.nav1 li a:hover{
background-color: skyblue;
}
显示效果如下所示：
1.png
导航条二
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/nav_style.css"/>
</head>
<body>
<ul class="nav">
<li><a href="#"class="one">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#" class="VI">企业VI</a><img src="img/new.png"/></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
css代码如下：
*{
padding: 0;
margin: 0;
}
.nav{
list-style: none;
width: 960px;
height: 40px;
background-color: #55A8EA;
margin: 50px auto 0;
}
.nav li{
/*text-align: center;*/
float: left;
width: 12.5%;
}
a{
text-decoration:none;
width: 100px;
display: block;
line-height: 40px;
text-align: center;
color: white;
font: "微软雅黑";
font-size: 14px;
}
a:hover{
background-color: #00219f;
}
.one{
background-color: #00219F;
}
.VI{
position: relative;
}
img{
position: relative;
top: -55px;
left: 20px;
}
显示效果如下：
2.png
图片列表
首先需要一张图片
goods.jpg
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/picture.css"/>
</head>
<body>
<div class="box">
<div class="title">
<div class="tb">图片展示</div>
</div>
<div class="main">
<div class="icon1">
<img src="img/goods.jpg" class="p2"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
</div>
<div class="icon2">
<img src="img/goods.jpg" class="p2"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
<img src="img/goods.jpg" class="p1"/>
</div>
</div>
</div>
</body>
</html>
css代码如下：
*{
padding: 0;
margin: 0;
}
.box{
width: 960px;
border: 1px solid #E8E8E8;
margin: 50px auto;
}
.title{
width: 920px;
height: 50px;
border-bottom: 1px solid #E8E8E8;
margin-top: 0px;
margin-right: 20px;
margin-left: 20px;
}
.tb{
width: 80px;
font-size: 18px;
font: "微软雅黑";
color: #000000;
line-height: 50px;
display: block;
border-bottom: 1px solid red;
}
.main{
width: 920px;
height: 161px;
margin: 20px 20px 38px 20px;
}
.icon1{
display: block;
float: left;
}
.p1{
margin-left: 25px;
width: 160px;
height: 68px;
transition: all 500ms ease;
}
.p1:hover{
transform: translateY(-10px);
}
.p2{
/*margin-left: 25px;*/
width: 160px;
height: 68px;
transition: all 500ms ease;
}
.p2:hover{
transform: translateY(-10px);
}
.icon2{
display: block;
float: left;
margin-top: 25px;
}
显示效果如下：
3.png
当鼠标移入图片上时，图片都会有相应的动画显示
