css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;
line-height: 25px;
float: left;
}
li a:hover {
background-color: #111;
}
#one{
background-color:#6cf;
border: solid #980002 5px;
width: 390px;
height: 222px;
position: absolute;
margin-top: 250px;
left: 0px;
}
#two{
background-color:#6cf;
width: 390px;
height: 222px;
border: 5px solid green;
position: absolute;
margin-top: 250px;
margin-left: 400px;
}
#three{
background-color:#6cf;
width: 390px;
height: 222px;
border: 5px solid green;
position: absolute;
margin-top: 250px;
margin-left: 800px;
}
#four{
background-color:#6cf;
width: 390px;
height: 222px;
border: 5px solid green;
position: absolute;
margin-top: 250px;
margin-left: 1200px;
}
div a{
font-family:"宋体";
font-size: 20px;
line-height: 25px;
padding-left:0px;
}
</style>
</head>
<body>
<center><img src="e.jpg" width="1500" height="500"></center>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div id="one">
<h3>ooooo</h3>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃紧闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
<li><a href="#">sss团日向无故损坏会议室玻璃禁闭3天00</a></li>
</div>
</body>
</html>
