考试题
2018-06-09 本文已影响0人
明日计划
第一题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 960px;
height: 22px;
/*background-color: skyblue;*/
margin: 50px auto;
padding: 10px 0px;
border: 1px solid #dddddd;
}
li{
float: left;
/*padding: 2px 0px;*/
width: 10%;
}
a{
display: block;
width: 100%;
text-align: center;
line-height: 22px;
text-decoration: none;
/*padding: 5px 0px;*/
display: block;
color: #333333;
font: 14px "雅黑" #333；
padding: 10px 0px;
border-right: 1px solid #d19133;
/*border-left: 1px solid #6eb1ec;*/
}
a:hover{
color: #ff0000;
}
li.b{
visibility: hidden;
}
</style>
</head>
<body>
<ul class="nav">
<li class="b"><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="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
<li class="b"><a href="#">联系我们</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;
}
div{
height: 20px;
width: 33px;
background-image: url(1.png);
/*background-repeat: no-repeat;*/
/*margin: 0px auto;*/
margin: 0px 525px;
/*margin: 0px auto;*/
position: relative;
top: 10px;
z-index: 100;
/*
background-position: 435px 36px;
background-repeat: no-repeat;*/
/* background-color: skyblue;*/
}
.nov{
position: relative;
list-style: none;
width: 960px;
height: 40px;
background-color: #52a6ec;
margin: 0px auto;
/*padding: 1px 0px;*/
/*background-image: url(1.png);
background-position: 435px -5px;
background-repeat: no-repeat;*/
}
li{
width: 100px;
float: left;
/* margin: 5px 0px;*/
}
li:hover{
background-color: #0060a4;
}
a{
display: block;
width: 100%;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #fbfbef;
font: 14px "雅黑" #fff;
}
/* li.b a{
background-image: url(1.png);
background-position: 435px -5px;
background-repeat: no-repeat;
}*/
</style>
</head>
<body>
<div></div>
<ul class="nov">
<li><a href="">首页</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">程序开发</a></li>
<li><a href="">网络营销</a></li>
<li class="b"><a href="">企业VI</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">联系我们</a></li>
</ul>
</body>
</html>
效果：
image.png
