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>