前端HTML实现部分功能代码

最新推荐文章于 2022-12-07 10:07:05 发布

おざぁす~

最新推荐文章于 2022-12-07 10:07:05 发布

阅读量281

点赞数 1

本文链接：https://blog.csdn.net/weixin_45550042/article/details/100057682

版权

HTML实现部分功能代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.大框架{
			width: 650px;
			background-color: white;
			border: solid #b4b4b4 3px;
		}
		.大框架 p a{
			display: block;
			padding: 6px 3px;
		}
		.大框架 a{
			text-decoration: none;
			color: blue;
		}
		.大框架 p a:hover{
			text-decoration: underline;
			width: 75px;
			
		}
	
		.nav .one{
			font-size: 10px;
			float: left;
			color: #cccccc;
		}
		.nav{
			list-style: none;
			color: #cccccc;
			font-size: 10px ;
			overflow: hidden;
		}
		.nav li{
			 float: left;
			 margin: 5px;
		}
		.nav2{
			width: 22px;
			height: 12px;
			background-color: #f3593b;
			padding: 1px;
			color: white;
			font-size: 10px;
		}
		.nav a{
			text-decoration: none;
			color: black;
			font-size: 10px;
			margin: 10px;
		}
		.nav a:hover{
			text-decoration: underline;
			
		}
		.box1{
			width: 610px;
			background-color: #dcd7d7;
			margin: 15px;
			overflow: hidden;
		}
		.nav3{
			list-style: none;
			text-decoration: none;
		}
		.nav3 li{
			float: left;
			width: 60px;
			font-size: 10px;
			color: black;
			margin: 10px;
			}
		.nav3 a{
			color: black;
			height: 20px;
		}
		.nav3 a:active{
			width: 100%;
			height: 20px;
			text-decoration: underline;
		}
		.box2{
			text-decoration: none;
		}
		.box2 a{
			margin: 9px 10px 5px 15px;
		}
		.nav4{
			list-style: none;
			overflow: auto;
			zoom:1;
		}
		.nav4 li a{
			float: left;
			margin: 2px 52px;
		}
		.nav4 a{
			display: block;
			color: #8a4f97;
			font-size: 10px;
		}
		.nav4 a:hover{
			text-decoration: underline;
		}
		.box3{
			list-style: none;
			margin: 5px 5px 5px 170px ;
			overflow: hidden;
			zoom:1;

		}
		.box3 li:not(.four){
			display: inline-block;
			float: left;
			width: 20px;
			height: 20px;
			background-color: white;
			color: black;
			border:#dcd7d7 1px solid;
			font-size: 10px;
			margin: 5px;
		}
	
		.box3 .four {
			display: block;
			float: right;
			width: 30px;
			height: 20px;
			background-color: white;
			color: black;
			border:#dcd7d7 1px solid;
			font-size: 9px;
		}
		.box3 a{
			display: block;
			text-align: center;
		}
		.box3 a:hover{
			width: 100%;
			height: 20px;
			background-color: #dcd7d7;

		}

	</style>
<body>
	<div class="大框架">
		<p style="color:blue;"><a href="#">电影大全</a></p>
	 <ul class="nav">
	 	<li class="nav1">类型：</li>
	 	<li class="nav2">全部</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>
	 	<li><a href="#">动画</a></li>
	 	<li><a href="#">战争</a></li>
	 	<li><a href="#">科幻</a></li>
	 </ul>

	 <ul class="nav">
	 	<li class="nav1">地区：</li>
	 	<li class="nav2">全部</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>
	 	<li><a href="#">泰国</a></li>
	 	<li><a href="#">法国</a></li>
	 	<li><a href="#">其他</a></li>
	 </ul>

	 <ul class="nav">
	 	<li class="nav1">年代：</li>
	 	<li class="nav2">全部</li>
	 	<li><a href="#">00年代</a></li>
	 	<li><a href="#">90年代</a></li>
	 	<li><a href="#">80年代</a></li>
	 	<li><a href="#">更早</a></li>
	 	<li><a href="#">2019</a></li>
	 	<li><a href="#">2016</a></li>
	 	<li><a href="#">2015</a></li>
	 	<li><a href="#">2014</a></li>
	 </ul>
	
	 <div class="box1">
	 	<ul class="nav3">
	 		<li><a href="#">最热电影</a></li>
	 		<li><a href="#">最新电影</a></li>
	 		<li><a href="#">好评电影</a></li>
	 	</ul>
	 </div>
	 <div class="box2">
	 		<a href="#"><img src="1.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="2.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="3.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="4.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<ul class="nav4">
	 			<li><a href="#">哪吒之魔童降世</a></li>
	 			<li><a href="#">追龙II</a></li>
	 			<li><a href="#">复仇者联盟4终局之战</a></li>
	 			<li><a href="#">烈火英雄</a></li>
	 		</ul>
	 </div>
	 <div class="box2">
	 		<a href="#"><img src="5.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="6.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="7.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<a href="#"><img src="8.jpg" alt="图片" style="width: 130px; height: 180px;" /></a>
	 		<ul class="nav4">
	 			<li><a href="#">恶人传</a></li>
	 			<li><a href="#">扫毒2天地对决</a></li>
	 			<li><a href="#">何以为家</a></li>
	 			<li><a href="#">熊出没原始时代</a></li>
	 		</ul>
	 </div>
	 <ol class="box3">
	 	<li><a href="#">1</a></li>
	 	<li><a href="#">2</a></li>
	 	<li><a href="#">3</a></li>
	 	<li><a href="#">4</a></li>
	 	<li><a href="#">5</a></li>
	 	<li><a href="#">...</a></li>
	 	<li><a href="#">8</a></li>
	 	<li><a href="#">下一页</a></li>
	 </ol>
 	</div>
</body>
</html>