emmm...这一篇其实挺杂的,留着给自己看吧...
大概效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 800px;
margin: 0 auto;
}
.news{
width: 800px;
height:130px;
margin: 0 auto;
}
ul.news li{
/*background-color: blueviolet;*/
line-height: 2em;
list-style-type: none;
background:greenyellow url("../img/iconNew.png") 0 -40px no-repeat;
padding-left: 15px;
}
ul.news li a{
text-decoration: none;
color: black;
}
ul.news li a:hover{
color: red;
text-decoration: underline;
}
ul#menu{
width: 900px;
background-color: antiquewhite;
margin: 0 auto;
/*清除浮动*/
overflow: hidden;
/*弹性布局*/
display: flex;
justify-content: center;
}
ul#menu li{
list-style-type: none;
}
ul#menu li a{
text-decoration: none;
display: block;
padding: 10px 45px;
}
ul#menu li a:hover{
background: cornflowerblue;
text-shadow: 0px 1px gold;
}
.box_pink{
width: 600px;
height: 300px;
background: pink;
position: relative;
left: 50px;
top:20px;
}
.box_pink p{
width: 30px;
height:30px;
display: block;
font-size: 30px;
color: white;
text-align: center;
padding-bottom: 10px;
position: relative;
}
.box_pink p.left{
border-radius: 0 10px 10px 0;
left: -990px;
top:95px;
}
.box_pink p.right{
border-radius: 10px 0 0 10px;
left: -990px;
top:70px;
}
.box_pink:hover p.left{
left: 0px;
background: cornflowerblue;
}
.box_pink:hover p.right{
left: 570px;
background: cornflowerblue;
}
.box_pink ul {
/*width: 150px;*/
/*height:20px;*/
/*background: greenyellow;*/
/*overflow: hidden;*/
position: absolute;
bottom: 5px;
right:5px;
}
.box_pink ul li{
background: deeppink;
list-style-type: none;
width:20px;
height:20px;
float: left;
border-radius: 10px;
text-align: center;
margin-left: 5px;
}
.box1{
width: 700px;
height:280px;
background: aquamarine;
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="menu">
<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>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<ul class="news">
<li><a href="#">啦啦啦啦啦啦啦</a></li>
<li><a href="#">啦啦啦啦啦啦啦</a></li>
<li><a href="#">啦啦啦啦啦啦啦</a></li>
<li><a href="#">啦啦啦啦啦啦啦</a></li>
</ul>
<div class="box_pink">
<p class="left">></p>
<p class="right"><</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="box1">
<video width="320" height="240" controls>
<source src="../img/movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="../img/舍得.mp3" type="audio/mp3">
</audio>
</div>
</div>
</body>
</html>