第一题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 649px;
height: 50px;
/*background-color: skyblue;*/
margin: 50px auto;
border: 1px solid gold;
/*border-right: none;*/
}
li{
list-style: none;
float: left;
width: 14.13%;
}
li.b{
width: 15.22%;
}
li:hover{
background-color: #ffa500;
}
a{
display: block;
width: 100%;
text-align: center;
line-height: 50px;
color: #ffc0cb;
text-decoration: none;
}
a:not(.b){
border-right: 1px solid gold;
}
a:hover{
color: #ff0000;
}
span{
font: 16px pink "雅黑"；
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>公司简介</span></a></li>
<li><a href="#"><span>解决方案</span></a></li>
<li><a href="#"><span>公司新闻</span></a></li>
<li><a href="#"><span>行业动态</span></a></li>
<li><a href="#"><span>招贤纳才</span></a></li>
<li class="b"><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html>
效果：
image.png
第二题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
margin: 50px auto;
width: 95px;
height: 95px;
background-image: url(1.jpg);
background-position: -567.5px -128.5px;
}
</style>
</head>
<body>
<div class="nav"></div>
</body>
</html>
效果：
image.png
第三题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.nov{
width: 960px;
height: 22px;
/*background-color: skyblue;*/
margin: 50px auto;
padding: 10px 0px;
border: 2px solid #dddddd;
}
li{
float: left;
list-style: none;
line-height: 22px;
background-color: #ffd700;
padding: 0px 0px;
border: 2px solid white;
}
li.g{
background-color: white;
}
.nov li.c{
width: 25%;
background-color: red;
visibility: hidden;
}
.nov li.num{
width: 3%;
}
.nov li.k{
width: 11.5%;
}
a{
display: block;
width: 100%;
text-align: center;
text-decoration: none;
}
a:hover{
background-color: #ff0000;
color: #ffffd6;
}
/*li:not(.c) :not(.d){
float: left;
}*/
</style>
</head>
<body>
<ul class="nov">
<li class="c"><a class="b"href="#">hh</a></li>
<li class="num k"><a href="#">上一页</a></li>
<li class="num"><a href="#">1</a></li>
<li class="num"><a href="#">2</a></li>
<li class="num"><a href="#">3</a></li>
<li class="num"><a href="#">4</a></li>
<li class="num g"><a href="#">...</a></li>
<li class="num"><a href="#">17</a></li>
<li class="num"><a href="#">18</a></li>
<li class="num"><a href="#">19</a></li>
<li class="num"><a href="#">20</a></li>
<li class="num k"><a href="#">上一页</a></li>
<li class="c"><a class="b"href="#">hh</a></li>
</ul>
</body>
</html>
效果：
image.png
网友评论