<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type ="text/css">
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
width:1000px;
background-color:red;
margin:100px auto;
overflow:hidden;
}
.nav li{
float:left;
width:20%;
}
.nav a{
display:block;
text-align:center;
padding:5px 0;
text-decoration:none;
font-weight:bold;
color:white;
}
.nav a:hover{
background-color:black;
}
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.q{
height:80px;
width:1133px;
background-color:white;
border:gold 2px solid;
margin:50px auto;
}
.w{
width:120px;
height:60px;
float:left;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
.e{
width:120px;
height:60px;
float:left;
border-left:2px gold solid;
border-right:2px gold solid;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
.r{
width:120px;
height:60px;
float:left;
border-right:1px gold solid;
font-size:25px;
font-family:"微软雅黑";
font-weight:bold;
color:pink;
padding:10px 20px;
}
.t{
width:120px;
height:60px;
float:left;
border-left:1px gold solid;
border-right:1px gold solid;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
.y{
width:120px;
height:60px;
float:left;
border-left:1px gold solid;
border-right:1px gold solid;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
.u{
width:120px;
height:60px;
float:left;
border-left:1px gold solid;
border-right:1px gold solid;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
.i{
width:120px;
height:60px;
float:left;
border-left:1px gold solid;
font-size:25px;
font-weight:bold;
font-family:"微软雅黑";
color:pink;
text-align:center;
padding:10px 20px;
}
</style>
</head>
<body>
<div class="q">
<div class="w">首页</div>
<div class="e">公司简介</div>
<div class="r">解决方案</div>
<div class="t">公司新闻</div>
<div class="y">行业动态</div>
<div class="u">招贤纳才</div>
<div class="i">联系我们</div></div>
</body>
</html>
image.png
...
