话不多说,我用的软件是HBuilder制作的网页。样式是这样的
相信学过的都会做这个页面;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面跳转</title>
		<style type="text/css">
			*{
				/*margin: 0px;
				padding: 0px;*/
			}
			h2{
				color: darkblue;
				padding: 40px;
			}
			
       		.one{
       			
       			text-align: center;/*text-align属性只能针对文本文字和img标签  居中*/
       		}
       	
			li{
				letter-spacing:3px;
			}
			ul {
       			/*display:block;*/
      			list-style-type:none;
      			margin:100px;
      		}
  
           
		</style>
	</head>
	<body>
		<h1  align="center" >作业页面链接</h1>
		
		<hr color="aquamarine" width="600" align="center" size="5"/>
		
		<div class="one">
			
		<ul>
			<li><a href="电商网/电商网页.html" >页面一 《电商网》</a> </li><br/>
			<li><a href="淘宝网/淘宝网完整版.html" >页面二 《淘宝网》</li><br/>
			<li><a href="人民网/人民网完整版.html"> 页面三 《人民网》</a></li><br/>
			<li><a href="图片变形/guodu.html" >页面四 《图形变换》</a></li><br/>
			<li><a href="网易云/唱片练习.html" >页面五 《网易云唱片》</a></li><br/>
			<li><a href="期末作业/个人主页.html" >页面六 《个人主页》</a></li><br/>
			<li><a href="期末作业/表单.html" >页面七 《表单》</a></li><br/>
			<li><a href="期末作业/我的.html" >页面八 《我的》</a></li><br/>
			<li><a href="期末作业/注册页面.html" >页面九 《注册页面》</a></li><br/>
			<li><a href="期末作业/花.html" >页面十 《花》</a></li><br/>
		</ul>
		
		</div>
	</body>
</html>

这是一个简单方便老师检查的页面。

根据页面提示第一个是我学的电商网页。直接上代码;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电商网</title>
		<link rel="stylesheet" type="text/css" href="css/ux_1446629159_9522004/demo.css"/>
		<link rel="stylesheet" type="text/css" href="css/ux_1446629159_9522004/iconfont.css"/>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				list-style: none;
			}
			.bigtop{
				width: 100%;
				height: 30px;
				background-color: #333333;
				position: absolute;
				z-index: 2;
				
			}
			.bigtop .top{
				width: 1000px;
				margin: auto;
				
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.bigtop .top .right a{
				text-decoration: none;
				color: #ccc;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				margin-left: 10px;
			}
			.bigtop .top .right a:hover{
				color: white;
			}
			.bigbox{
				width: 100%;
				height: 680px;
				border: 1px solid black;
				overflow: hidden;
				position: relative;
			}
			.bigbox video{
				width: 100%;
				min-width: 1280px;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%,-50%);
				z-index: 1;
			}
			.bignav{
				width: 100%;
				height:70px;
				background-color: rgba(0,0,0,0.2);
				position: absolute;
				left: 0px;
				top: 30px;
				z-index: 3;
				line-height: 70px;
			}
			.bignav .nav{
				width: 1000px;
				margin: auto;
			}
			.bignav .nav .right a{
				width: 32px;
				height: 32px;
				display: inline-block;
				/*background-color: red;*/
				line-height: 32px;
				text-align: center;
				border-radius: 50%;
				box-shadow: 0 0 0 1px #fff inset;
				-webkit-transition: all 1s ease;
				color: white;
			}
			.bignav .nav .right a:hover{
				box-shadow: 0 0 0 16px #fff inset;
				color: chartreuse;
			}
			.bignav .nav .center input{
				width: 200px;
				height: 30px;
				padding-left: 30px;
				background: url(top/search.png) no-repeat 2px 2px;
				border-radius: 20px;
				border: 1px solid #fff;
				margin-left: 323px;
			}
			.try{
				width: 100%;
				height: 270px;
				background-color: #83ba8b;
				margin-top: 30px;
			}
			.try ul{
				width: 960px;
				margin: 40px auto;
				/*background-color: lightblue;*/
			}
			.try ul li{
				width: 291px;
				height: 251px;
				position: relative;
				float: left;
				margin-left: 20px;
				-webkit-perspective: 2300px;
			}
			.try ul li img{
				position: absolute;
				left: 0px;
				top: 0px;
				-webkit-backface-visibility: hidden;
				-webkit-transition: ease 2s all;
			}
			.try ul li .fan{
				-webkit-transform: rotateX(-180deg);
			}
			.clear{
				clear: both;
			}
			.try header{
				text-align: center;
			}
			.try ul li:hover .fan{
				-webkit-transform: rotateX(0deg);
			}
			.try ul li:hover .zheng{
				-webkit-transform: rotateX(180deg);
			}
			
			/*test*/
			.test{
				width: 100%;
				height: 800px;
				background: lightgray;
			}
			.test ul{
				margin: 40px auto 0;
				width: 960px;
			}
			.test header{
				text-align: center;
			}
			.test ul li{
				width: 195px;
				height: 195px;
				border: 1px solid black;
				border-radius: 50%;
				position: relative;
				float: left;
				margin-right: 3%;
				margin-bottom: 40px;
			}
			.test ul li img{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.test ul li .tihuan{
				opacity: 0;
				transition: all 1s ease-in 0.2s;
			}
			.test ul li:hover .tihuan{
				opacity: 1;
				-webkit-transform: translate(-50%, -50%) scale(0.75);
			}
			.test ul li .tu{
				transition: all 1s ease-in 0s;
			}
			.test ul li:hover .tu{
				opacity: 0;
			}
			
			/*new*/
			.new ul{
				width: 960px;
				margin: auto;
			}
			.new ul li{
				width: 266px;
				height: 250px;
				float: left;
				border: 1px solid #ccc;
				position: relative;
				overflow: hidden;
				margin-left: 20px;
			}
			.new ul li .up{
				width: 266px;
				height: 250px;
				position: absolute;
				left: 0px;
				top: -250px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;		
			}
			.new p{
				color: white;
			}
			.new ul li:hover .up{
				position: absolute;
				top: 0px;
				left: 0px;
				-webkit-transition: ease 1s all;
				padding-top: 5px;
			}
			.new .jiantou{
				top: 140px;
				left: 124px;
				position: absolute;			
			}
			.new .anniu{
				position: absolute;
				top: 190px;
				left: 100px;
			}
			.new ul li p:nth-child(1){
				position: absolute;
				top: 60px;
				left:100px;
				font-size: 18px;
			}
			.new ul li p:nth-child(2){
				position: absolute;
				top: 90px;
				left: 100px;
				font-size: 18px;
			}
			.new header{
				text-align:center;
			}
			
			.bigbox .pic{
           	width: 570px;
           	height: 220px;
           	position: absolute;
           	left: 50%;
           	top: 50%;
           	transform: translate(-50%,-50%);
           	z-index: 2;
           }
           .bigbox .pic ul li{
           	width: 180px;
           	height: 56px;
           /*	background-color: brown;*/
           	border-radius: 30px;
           	line-height: 56px;
           	-webkit-transition: all 1s ease;
            color: darkgray;
            font-size: 15px;
           }
           .bigbox .pic ul{
           	position: relative;
           	/*border: 1px solid white;*/
           }
           
           .bigbox .pic ul .left{
           	position: absolute;
           	left: -800px;
           	top: 40px;
           	
           }
            .bigbox .pic ul .right{
            position: absolute;
           	left: 1200px;
            top: 40px;
            }
            body:hover  .bigbox .pic ul .left{
            	position: absolute;
            	left: 100px;
            	top: 40px;
            	
            }
            body:hover  .bigbox .pic ul .right{
            	position: absolute;
            	left: 300px;
            	top: 40px;
            	
            }
            .bigbox .pic ul li span{
            	width: 40px;
            	height: 40px;
            	display: inline-block;
            	border-radius: 50%;
            	line-height: 40px;
            	text-align: center;
            	margin-left: 8px;
            	margin-right: 5px;
            	box-shadow: 0 0 0 1px #fff inset;
            	-webkit-transition: all 1s ease;
            }
             .bigbox .pic ul li span:hover{
             	box-shadow: 0 0 0 20px #fff inset;
             	color: red;
             }
             .bigbox .pic p{
             	color: lightseagreen;
             	font-size: 13px;
             	text-align: center;
             }
            .bottom{
             	width: 100%;
             	background-color: #545861;
             	border: 1px solid white;
             }
            .bottom img{
             	display: block;
             	margin: auto;
             }
            .bottom .nav1{
             	width: 1000px;
             	height: 300px;
             	border-top:1px solid darkgray;
             	margin: auto;
             	position: relative;
             }
            .bottom .nav1 ul li:nth-child(1){
             	position: absolute;
             	top: 10px;
             	left: 30px;
             }
            .bottom .nav1 ul li:nth-child(2){
             	position: absolute;
             	top: 10px;
             	left: 270px;
             }
            .bottom .nav1 ul li:nth-child(3){
             	position: absolute;
             	top: 90px;
             	left: 30px;
             }
            .bottom .nav1 ul li:nth-child(4){
             	position: absolute;
             	top: 90px;
             	left: 270px;
             }
            .bottom .nav1 ul li:nth-child(5){
             	position: absolute;
             	top: 170px;
             	left: 30px;
             }
            .bottom .nav1 ul li:nth-child(6){
             	position: absolute;
             	top: 10px;
             	left: 600px;
             }
            .bottom .nav1 ul li input{
            	width: 200px;
             	height: 25px;
             	border-radius: 5px;
             }
            .bottom .nav1 ul p{
             	color: white;
             }
             .bq{
             	width: 100%;
             	background-color: black;
             	
             }
             .bq p{
             	color:white;
             	text-align: center;
             }
		</style>
	</head>
	<body>
		<div class="bigbox">
			<video src="video/home_loop_720p.mp4" autoplay="autoplay" loop="loop"<!-- controls="controls"-->></video>
			<audio src="audio/home.ogg" autoplay="autoplay" loop="loop" <!--controls="controls"-->></audio>
		<div class="bigtop">
			<div class="top">
				<div class="left fl"><img src="top/logo.png"/></div>
				<div class="right fr">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>
		</div>
		<div class="bignav">
			<div class="nav">
				<div class="left fl">
					<a href="#">
						<img src="top/sanxian.png"/>
					    <span style="color: white;margin-left: 5px;">选项</span>
					    <img src="top/sanjiao.png"/>
					</a>
				</div>
				<div class="center fl">
					<form action="">
						<input type="search" name="search" id="search" value="" placeholder="遥控器" />
					</form>
				</div>
				<div class="right fr">
					<a href="" class="iconfont icon-wangpanyinle"></a>
					<a href="" class="iconfont">&#Xf012a;</a>
					<a href="" class="iconfont icon-gezi2"></a>
					<a href="" class="iconfont">&#Xe608;</a>
				</div>
			</div>
		</div>
		
		<div class="pic">
			<img src="top/wenzi.png"/>
			<p>Select the right resolution for your PC and dive in! (请为您的电脑选择正确的分辨率)</p>
			<ul>
				<li class="left"><span class="iconfont icon-jiantou1"></span>STANDARD标准</li>
				<li class="right"><span class="iconfont icon-jiantou1 "></span>HD高清</li>
			</ul>
		</div>
		
		</div>
		<div class="new">
			<header>
				<img src="img/new/new.jpg"/ >
				<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
			</header>
			
			<ul>
				<li>
					<img src="img/new/pic1.jpg" alt="" />
					<div class="up">
						<p>补水保湿</p>
						<p>提亮肤色</p>
						<p><img src="img/new/jiantou.png" class="jiantou"/></p>
						<p><img src="img/new/anniu.png" class="anniu"/></p>
					</div>
				</li>
				<li>
					<img src="img/new/pic2.jpg" alt="" />
					<div class="up">
						<p>低敏配方</p>
						<p>收缩毛孔</p>
						<p><img src="img/new/jiantou.png" class="jiantou"/></p>
						<p><img src="img/new/anniu.png" class="anniu"/></p>
					</div>
				</li>
				<li>
					<img src="img/new/pic3.jpg" alt="" />
					<div class="up">
						<p>滋养容颜</p>
						<p>美丽自己</p>
						<p><img src="img/new/jiantou.png" class="jiantou"/></p>
						<p><img src="img/new/anniu.png" class="anniu"/></p>
					</div>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		
	 <div class="try">
		<!--<img src="img/效果图.PNG"/>-->
		<header>
			<img src="img/shizhuang.jpg"/ style="border-radius: 40px 40px 40px 40px;">
			<p>美化容貌 增添自信 突出个性</p>
		</header>
			<ul>
				<li>
					<img src="img/try1.jpg" alt="" class="zheng"/>
					<img src="img/try4.jpg" alt="" class="fan"/>
				</li>
				<li>
					<img src="img/try2.jpg" alt="" class="zheng"/>
					<img src="img/try5.jpg" alt="" class="fan"/>
				</li>
				<li>
					<img src="img/try3.jpg" alt="" class="zheng"/>
					<img src="img/try6.jpg" alt="" class="fan"/>
				</li>
				<div class="clear"></div>
			</ul>
	 </div>
		
		
	 <div class="test">
		<header>
			<img src="img/test/cp.jpg"/>
			<p>评测 我们更专业 用户更放心</p>
		</header>
		<ul>
			<li>
				<img src="img/test/cp1.jpg" alt="" class="tu"/>
				<img src="img/test/th1.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp2.jpg" alt="" class="tu"/>
				<img src="img/test/th2.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp3.jpg" alt="" class="tu"/>
				<img src="img/test/th3.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp4.jpg" alt="" class="tu"/>
				<img src="img/test/th4.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp5.jpg" alt="" class="tu"/>
				<img src="img/test/th5.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp6.jpg" alt="" class="tu"/>
				<img src="img/test/th6.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp7.jpg" alt="" class="tu"/>
				<img src="img/test/th7.png" alt="" class="tihuan"/>
			</li>
			<li>
				<img src="img/test/cp8.jpg" alt="" class="tu"/>
				<img src="img/test/th8.png" alt="" class="tihuan"/>
			</li>
			<div class="clear"></div>
		</ul>
	 </div>
	 <div class="bottom"><img src="top/logo1.jpg"/>	
		<div class="nav1">
			<form action="">
			<ul>
				<li>
					<p>姓名:</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>邮箱:</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>电话:</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<p>密码:</p>
					<input type="text" name="" id="" value="" />
				</li>
				<li>
					<a href=""><img src="top/but.jpg"/></a>
				</li>
				<li>
					<p>留言:</p>
					<textarea name="" rows="10" cols="50"></textarea>
				</li>
			</ul>
			</form>
		</div>
		</div>
		
	<div class="bq">
			<p><strong>@版权归属于工学部软件工程专业学号1801120072周杰所有</strong></p>
		</div>
	</body>
</html>

样式图,由于缩小图太丑,我就截取一部分;

这个当中有很多的图片、音乐等各种样式插入进去不是很方便,最后给大家一个链接。自取。

第二个代码,学习的淘宝网;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘宝模块</title>
		<style type="text/css">
			header{
				width: 1190px;
				margin: auto;
			}
			*{
				margin: 0px;
				padding: 0px;
				list-style-type: none;
				text-decoration: none;
			}
			nav{
				width: 1190px;
				height: 30px;
				border:1px solid #ccc ;
				margin: auto;
			}
			nav ul{
				float: left;
				width: 1000px;
				background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
				list-style-type: none;
			}
			nav li{
				display: inline-block;
				height: 30px;
				width: 90px;
				line-height: 30px;
				text-align: center;
				
			}
			nav li a{
				text-decoration: none;
			}
			nav h2{
				float: left;
				width: 190px;
				height: 30px;
				font-size: 16px;
				background-color: #ff5000;
				text-align: center;
				line-height: 30px;
				color: white;
			}
			nav a{
				color: white;
				font-weight: 800;
				
			}
			.box{
				width: 1190px;
				margin: auto;
				
			}	
			.box .left{
				width: 188px;
				height: 510px;
				border: 1px solid #ff5000;
				padding-top:5px ;
				padding-bottom:3px ;
				text-align: center;
				line-height: 33px;
			    color: white;
		        font-size: 16px;
		        position: relative;
			}
			
			
						
			.box .left a{
				text-decoration: none;
				color: #666;
			}
			.box .left li{
				line-height: 32px;
				height: 32px;
				padding-left: 22px;
				padding-right: 19px;
				padding-top: 1px;
				
				font-size: 14px;
				font-weight: 400;
				width: 145px;
				color: #666;
				
			}
			.box .left .arrow1{
				position: absolute;
				right: 8px;
				font-size: 12px;
				font-family: iconfont!important;
				font-style: normal;
				display: inline-block;
				text-decoration: none;
				-webkit-font-smoothing: antialiased;
				z-index: 1;
			}
			.box .left .tanchu{
				position:absolute;
				left: 190px;
				top: 0px;
				display: none;
				z-index: 1;
			}
			.box .left a:hover .tanchu{
				display: block;
				z-index: 1;
			}
			header .logtop a{
				text-decoration: none;
				color: #FF5000 ;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			header .bottom a{
				text-decoration: none;
				font-family: "微软雅黑";
				color: black;
				font-size: 12px;
			}
			header .left{
				float: left;
			}
			header .center{
				float: left;
				padding-top: 35px;
			}
			header .right{
				float: right;
				padding-top: 35px;
				padding-right: 50px;
			}
			.clear{
				clear: both;
			}
			header .search{
				width: 540px;
				height: 35px;
				border:2px solid #FF5000;
				border-radius: 30px 0px 0px 30px;
				color: #999999;
				padding-left: 20px;
				background-image: url(img/icon1.PNG),url(img/icon2.PNG) ;
				background-repeat: no-repeat;
				background-position: left,right;				
				outline: none;
				float: left;
			}
			header .btn1{
				color: white;
				font-size: 16px;
				font-family: "微软雅黑";
				font-weight: 900;
				width: 75px;
				height: 35px;
				border: 2px solid #FF5000;
				border-radius: 0px 30px 30px 0px;
				background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);			    
			    color: #FFFFFF;
			    cursor: pointer;
			    border: 0px;
			    float: left;
			}	
			header .innerlogo{
				width: 1190px;
				margin: auto;
				
			}
		 header .logtop a:hover{
		 	padding: 5px;
		 	background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);color: white; 
		 	border-radius: 5px 5px 0px 0px;
		 	
		 }
		 header .logtop{
		 	padding-left: 10px;
		 }
		.banner{
			width:100%;
			background-image: url(img/banner.png);
		}
		.banner a{
			display: inline-block;
			width: 210px;
			height: 75px;
			position: relative;
			color: white;
		}
		.binner{
			width: 1190px;
			margin: auto;
		}
		.banner .bl{
			float: left;
			margin-left:20px ;
			margin-top: 15px;
		}
		.banner .br{
			float: left;
			position: absolute;
			left: 140px;
			top: 10px;
		}
		.banner .br img{
			width: 50px;
			height: 50px;
			
			
		}
		.ad{
			width: 1190px;
			margin: auto;
		}
		.ad li{
			display: inline-block;
		}
		.goods{
			width: 1190px;
			margin: auto;
			
			padding-top: 20px;
		}
		.goods a{
			display: inline-block;
			width: 180px;
			margin-left: 13px;
		}
		.goods a:hover h4{
			color: red;
		}
		.goods h3 img{
			width: 74px;
			height: 24px;
			float: left;
		}
		.goods h3{
			font-size: 12px;
			font-weight: 400;
			color: #999;
			margin-bottom: 15px;
			margin-left: 13px;
		}
		.goods h4{
			font-size: 16px;
			font-weight: 400;
			color: #3c3c3c;
			margin-bottom: 5px;
		}
		.goods p{
			font-size: 14px;
			font-weight: 400;
			margin-top: 10px;
		}
		
		.goods p:first-of-type{color: #999;}
		.goods p:last-of-type{color: #35b1ff;}
		.goods .top{
			position: relative;
		}
		
		.goods .imgtop{
			width: 178px;
			height: 177px;
			background-color: rgba(0,0,0,0.1);
			position: absolute;
			left: 0px;
			top: 0px;
		}
		
		.goods .top:hover .imgtop{
			background-color: rgba(0,0,0,0.2);
		}
		
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1604663585663'); /* IE9 */
  src: url('iconfont.eot?t=1604663585663#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABtwAAALWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBZIFbATYCJAMICwYABCAFhG0HMhsDBhHVk3lkf4Q4xnZAKw0Eqa4pU20FOtme9Bst35xy4NpG24K7AloKfgUSAAAAACCI+P1Ys/8tJtI0mkkliWjCk0foGgpUO4u0Cw0hyN19/aK2yAMOMAs0gcA8m11bUiAxVW0touSP/JWe/C83ZbhUVpgXiiW5avAdUyXwYWXd811e1Og2SMJH/bb5qsQEubh5IgWmAXYe0upbACZ7X21SO+FQIk8hIBzg9IG8IvgthKEAuDhUzQQKyHyQxGXugQEM5zwXoLFWu8lakAJ4h7ELXuBpCHAUKpmsgrI67Cl7kgC5w4Pd2BeclLKIPWHbsDJFdrFhX9asJ2En+n35miFgsanYOVUD+X1kfdCJMfgBbQEC1nJ6gK0DA5KBQnZjsAJDGM5wpFSRQKnngz8/gRo56j8PadjpzgCCIfOZWB77UUssAOrZw7nAIMbq7TbdOSDtfrnk6zY86/DLoOtr2tGPtT1XFz6VffHH9tMNh97XPsw9btzP3nXFOT8njM1zaIHsHdSjYa8Md7m39/r5/SAN031u9mkn2XVYOnFrW1kfPc7z5IhdOupgphweo+srrZbGoe4mhZQMT9Mi4Z7yzxCcYjp2t1EAfntXNOYHinmA/R2YBH+yk8YAyjl20Eqgo1qAJRebO6xw5Ah+CFk9/Zsq9bntqLDnc/NmOyEZGPaikYpNBhtOUsGWvUxwlKRwvRMvIxiSDkCiJQDC3TVYXD2C4e4Zqdi/YMPXf7DlHgyOGmS7o5PY0CaRUDL2oL4wdd5pV8Miztzj8DSS8pwIf0ZaJw+UWVGOtOiQlpizvoaKWYMmb6EB56ExHgL5GTvORuZQ57lu+qas8zYSJJSMPagvTJ13OmjNovLzexyeRlJHQ536jLRO3UOZFQOQrdANaniU16yvoWLWoMlbaMAwNMZDaB42Y8fZOMEf6txppocKs+3F9u+2EUUCW5aIk2MwOklvPIOLIgAA') format('woff2'),
  url('iconfont.woff?t=1604663585663') format('woff'),
  url('iconfont.ttf?t=1604663585663') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1604663585663#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xiaolian:before {
  content: "\e627";
}

.sale{
	width: 1190px;
	margin: auto;
}
.sale .item a{
	display: block;
	color: #999;
	font-size: 12px;
}
.sale .item{
	width: 197px;
	height: 310px;
	padding: 18px;
	border: 1px solid #f4f4f4 ;
	float: left;
	position: relative;
}
.sale .item:hover{
	border: 1px solid #FF5000;
}
.sale .item img{
	width: 197px;
	height: 197px;
	
}
.sale .item .left{
	position: absolute;
	left: 18px;
	bottom: 18px;
}
.sale .item .right{
	position: absolute;
	right: 18px;
	bottom: 18px;
}

.sale .item a:nth-of-type(3){
	color: #FF5000;
}

.sale .item a:nth-of-type(3) em{
	font-size: 22px;
	font-style: normal;
}
.sale h3:before{
	content: "";
	width: 4px;
	height: 16px;
	background-color: #FF0000;
	display: inline-block;
	margin-right:10px ;
	margin-left: 18px;
}
.sale h3{
	color: #FF5000;
	margin-bottom: 10px;
}

.sale .sale-nav a{
	color: #999;
	font-size: 12px;
	
	width: 50px;
	height: 35px;
	display: inline-block;
	text-align: center;
	line-height: 35px;
}

.bigtop{
	width: 100%;
	background-color: #f5f5f5;
}
.bigtop .top{
	width: 1190px;
	height: 35px;
	margin: auto;
	position: relative;
	
}
.bigtop .left{
	width: 300px;
	height: 35px;
	float: left;
	
}
.bigtop .right{
	width: 700px;
	height: 35px;
	float: right;
	
}
.bigtop li{
	display: inline-block;
	line-height: 35px;
}
.bigtop a{
	font-size: 12px;
	color: #6c6c6c;
}
.bigtop .item{
	width: 70px;
	
}
.bigtop .long{
	width: 100px;
}
.bigtop .orange{
	color: #DF5000;
	margin-right: 4px;
}
.bigtop .left{
	
}
		.bigtop .ml{
			margin-left: 6px;
			color: #9c9c9c;
		}
		.bigtop .toptanchu1{
			width: 250px;
			height: 200px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu1 li{
			width: 100%;
		}
		.bigtop li:hover .toptanchu1{
			display: block;
			position: absolute;
			left: 0px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		.bigtop .toptanchu2{
			width: 100px;
			height: 100px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu2 li{
			width: 100%;
		}
		.bigtop li:hover .toptanchu2{
			display: block;
			position: absolute;
			left: 490px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		
		.bigtop .toptanchu3{
			width: 200px;
			height: 70px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu3 li{
			width: 100%;
		}
		
		.bigtop li:hover .toptanchu3{
			display: block;
			position: absolute;
			left: 565px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		.bigtop .toptanchu4{
			width: 150px;
			height: 100px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu4 li{
			width: 100%;
		}
		
		.bigtop li:hover .toptanchu4{
			display: block;
			position: absolute;
			left: 640px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		.bigtop .toptanchu5{
			width: 200px;
			height: 300px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu5 li{
			width: 100%;
		}
		
		.bigtop li:hover .toptanchu5{
			display: block;
			position: absolute;
			left: 875px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		
		.bigtop .toptanchu6{
			width: 100px;
			height: 100px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu6 li{
			width: 100%;
		}
		.bigtop li:hover .toptanchu6{
			display: block;
			position: absolute;
			left: 980px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		
		.bigtop .toptanchu7{
			width: 1190px;
			height: 400px;
			overflow: scroll;
			display: none;
		}
		.bigtop .toptanchu7 li{
			width: 100%;
		}
		.bigtop li:hover .toptanchu7{
			display: block;
			position: absolute;
			left: 0px;
			top: 35px;
			background-color: white;
			z-index: 10000001;
		}
		.bigtop .toptanchu7 .zuo{
			width: 292.5px;
			height: 400px;
			
			float: left;
		}
		.bigtop .toptanchu7 .zhong1{
			width: 292.5px;
			height: 400px;
			
			float: left;
		}
		.bigtop .toptanchu7 .zhong2{
			width: 292px;
			height: 400px;
			
			position: absolute;
			right: 293px;
		}
		.bigtop .toptanchu7 .you{
			width: 292.5px;
			height: 400px;
			
			float: right;
		}
		.boxmain{
			width: 1000px;
			height: 520px;
			position: relative;
			background-color: lightblue;
			background-image: url(cat/2.jpg);
		}
		.boxmain .boxtitle li a{
			width: 20px;
			height: 5px;
			background-color: darkgrey;
			display: inline-block;
		}
		.boxmain .boxtitle li{
			display: inline-block;
		}
		.boxmain .boxtitle{
			position: absolute;
			bottom: 20px;
			left: 40%;
		}
		.boxmain img{
			width: 1000px;
			height: 520px;
		}
		.boxmain .boximage{
			display: none;
		}
		.boxmain .boximage:target{
			display: block;
		}
		.box .right{
			position: absolute;
			top: 0pc;
			left: 190px;
			z-index: 0;
		}
		.box{
			position: relative;
		}
		.box .right .boxmain .boximage:target{
			display: block;
			z-index: 0;
		}
		.box .right .boxmain .boximage{
			display: none;
			z-index: 0;
		}
		.aside{
			width: 40px;
			height: 250px;
			padding: 10px;
			background-color: lightgray;
			position: fixed;
			right: 120px;
			top: 200px;
		}
		.aside a{
			display: block;
			width: 40;
			height: 40px;
			margin: 3px;
			
		}
		.aside a:hover{
			background-color: orange;
		}
		.bigtop .left .item span{
			display: inline-block;
			-webkit-transition: ease 1s all;
		}
		.bigtop .left .item span:hover{
			-webkit-transform: rotate(180deg);
		}
		</style>
		<link rel="stylesheet" href="css/iconfont.css" type="text/css" />
	</head>
	<body>
		<div class="aside">
			<a href="#">热卖单品</a>
			<a href="#">热卖单品</a>
			<a href="#">热卖单品</a>
			<a href="#">热卖单品</a>
			<a href="#">热卖单品</a>
			<a href="bigtop">返回商品</a>
		</div>
		<div class="bigtop" id="bigtop">
			<div class="top">
		<div class="left">
			<ul>
				
			<li class="item"><a href="#">中国大陆</a><span class="iconfont icon-xiajiantou ml"></span>
				<div class="toptanchu1">
					<ul>
						<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>
						<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>
				</div>
			</li>
			
			<li class="item"><a href="#" style="color: #FF5000;">亲,请登录</a></li>
			<li class="item"><a href="#">免费注册</a></li>
			<li class="item"><a href="#">手机逛淘宝</a></li>
		</ul>
		</div>
		<div class="right">
			<ul>
				
				<li class="item"><a href="#">我的淘宝</a><span class="iconfont icon-xiajiantou ml"></span>
					<div class="toptanchu2">
					<ul>
						<li><a href="#">已买到的宝贝</a></li>
						<li><a href="#">我的足迹</a></li>
					</ul>
				</div>
				</li>
				
				<li class="item"><a href="#"><span class="iconfont orange">&#xe614</span>购物车</a><span class="iconfont icon-xiajiantou ml"></span>
					<div class="toptanchu3">
					<ul>
						<li><a href="#">你购物车里还没有任何宝贝!</a></li>
					</ul>
				</div>
				</li>
				
				<li class="item"><a href="#"><span class="iconfont orange">&#xe61a</span>收藏夹</a><span class="iconfont icon-xiajiantou ml"></span>
					<div class="toptanchu4">
					<ul>
						<li><a href="#">收藏的宝贝</a></li>
						<li><a href="#">收藏的店铺</a></li>
					</ul>
				</div>
				</li>
				
				<li class="item"><a href="#">商品分类</a></li>
				<li class="item"><a href="#">免费开店</a></li>
				<li></li>
				
				<li class="item long"><a href="#">千牛卖家中心</a><span class="iconfont icon-xiajiantou"></span>
					<div class="toptanchu5">
					<ul>
						<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>
				</div>
				</li>
				
				
				<li class="item"><a href="#">联系客服</a><span class="iconfont icon-xiajiantou ml"></span>
					<div class="toptanchu6">
					<ul>
						<li><a href="#">消费者客服</a></li>
						<li><a href="#">卖家客服</a></li>
					</ul>
				</div>
				</li>
				
				<li class="item long"><a href="#"><span class="iconfont orange">&#xe62b</span>网站导航</a><span class="iconfont icon-xiajiantou ml"></span>
					<div class="toptanchu7">
						<div class="zuo">
							<h3><span style="color: #FF0000;">主题市场</span></h3>
							<ul>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>111111</li>
								<li><a href="#"></a>1111111</li>
							</ul>
						</div>
						
						<div class="zhong1">
							<h3><span style="color:green;">特色市场</span></h3>
							<ul>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>11111</li>
							</ul>
						</div>
						
						<div class="zhong2">
							<h3><span style="color:purple;">阿里APP</span></h3>
							<ul>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111111</li>
							</ul>
						</div>
						
						<div class="you">
							<h3><span style="color: lightskyblue;">精彩推荐集</span></h3>
							<ul>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>11111</li>
								<li><a href="#"></a>1111111</li>
								<li><a href="#"></a>11111111</li>
							</ul>
						</div>
						
					</div>
					
				</li>
			</ul>
		</div>
		</div>
		</div>		
			<div class="banner">
				<div class="binner">
					<a href="#" style="width: 90px;"><img src="img/banlogo.png" /></a>
					
					<a href="#" style="background-image:url(img/b1.png)">
						<div class="bl">
							<h4>超值囤货</h4>
							<p>1元抢百元券</p>
						</div>
						<div class="br">
							<img src="img/b4-4.PNG"/>
						</div>
					</a>
					
					<a href="#" style="background-image:url(img/b2.png)">
						<div class="bl">
							<h4>秋冬好衣</h4>
							<p>爆款不止3折</p>
						</div>
						<div class="br">
							<img src="img/b4-4.PNG"/>
						</div>
					</a>
					
					<a href="#" style="background-image: url(img/b3.png)">
						<div class="bl">
							<h4>运动新品</h4>
							<p>尖货新品直降</p>
						</div>
						<div class="br">
							<img src="img/b4-4.PNG"/>
						</div>
					</a>
					
					<a href="#" style="background-image:url(img/b4.png)">
						<div class="bl">
							<h4>以旧换新</h4>
							<p>最高补贴3000</p>
						</div>
						<div class="br">
							<img src="img/b4-4.PNG"/>
						</div>
					</a>
					
					<a href="#" style="background-image:url(img/b5.png)">
						<div class="bl">
							<h4>运动爆款</h4>
							<p>限量5折抢</p>
						</div>
						<div class="br">
							<img src="img/b4-4.PNG"/>
						</div>
					</a>
				</div>
			</div>
		<header>
			
			<div class="top"></div>
			
			
			<div class="logo">
				<div class="left"><img src="img/290-130.gif"/></div>
				<div class="center">
					<div class="logtop">
						<p>
							<a href="#">宝贝</a>
							<a href="#">天猫</a>
							<a href="#">店铺</a>
						</p>
					</div>
					<div class="middle">
						<from>
							<input type="search" name="search" id="search" class="search"  placeholder="鹿阿姨"/>
							<input type="button" name="ss" id="ss" value="搜索"  class="btn1"/>
						</from>
					</div>
					<div class="bottom">
						<p>
							<a href="#">新款连衣裙</a>
							<a href="#">四件套</a>
							<a href="#"><span style="color: #FF5000;">潮流体恤</span></a>
							<a href="#">时尚女鞋</a>
							<a href="#">短裤</a>
							<a href="#">半身裙</a>
							<a href="#">男士外套</a>
							<a href="#">墙纸</a>
							<a href="#">行车记录仪</a>
							<a href="#">新款男鞋</a>
							<a href="#">耳机</a>
							<a href="#">时尚女包</a>
							<a href="#">沙发</a>
							
						</p>
					</div>
				
			</div>
				
				<div class="right"><img src="img/二维码.PNG"/></div>
				<div class="clear"></div>
				</div>
			
		</header>
		
		
		
		<nav>
		<h2>主题市场</h2>
		<ul>
			<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>
			<li><a href="#">苏宁易购</a></li>
		</ul>
		</nav>
		
		<article>
			<div class="box">
				<div class="left">
					<ul>
						<li><a href="#">女装 / 内衣 / 家居
							<img src="img/tan1.PNG" alt=""  class="tanchu"/> </a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">女鞋 / 男鞋 / 箱包
							<img src="img/tan2.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">母婴 / 童鞋 / 玩具
							<img src="img/tan3.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">男装 / 运动户外
							<img src="img/tan4.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">美妆 / 彩妆 / 个护
							<img src="img/tan5.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">手机 / 数码 / 企业
							<img src="img/tan6.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">大家电 / 生活电器
							<img src="img/tan7.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">零食 / 生鲜 / 茶酒
							<img src="img/tan8.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">厨具 / 收纳 / 清洁
							<img src="img/tan9.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">家访 / 家饰 / 鲜花
							<img src="img/tan10.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">图书音像 / 文具
							<img src="img/tan11.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">医药保健 / 进口
							<img src="img/tan12.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">汽车 / 二手车 / 用品
							<img src="img/tan13.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">房产 / 装修家居 / 建材
							<img src="img/tan14.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
						<li><a href="#">手表 / 眼睛 / 珠宝饰品
							<img src="img/tan15.PNG" alt="" class="tanchu"/></a>
							<i class="arrow1">></i>
						</li>
						
					</ul>
				</div>
				<div class="right">
					<div class="boxmain">
				<div class="boxtitle">
					<ul>
						<li><a href="#boximage1"></a></li>
						<li><a href="#boximage2"></a></li>
						<li><a href="#boximage3"></a></li>
						<li><a href="#boximage4"></a></li>
						<li><a href="#boximage5"></a></li>
						<li><a href="#boximage6"></a></li>
					</ul>
				</div>
				<div class="boximage" id="boximage1"><a href="#"><img src="cat/1.webp" alt="" /></a></div>
				<div class="boximage" id="boximage2"><a href="#"><img src="cat/2.webp" alt="" /></a></div>
				<div class="boximage" id="boximage3"><a href="#"><img src="cat/3.webp" alt="" /></a></div>
				<div class="boximage" id="boximage4"><a href="#"><img src="cat/4.webp" alt="" /></a></div>
				<div class="boximage" id="boximage5"><a href="#"><img src="cat/5.webp" alt="" /></a></div>
				<div class="boximage" id="boximage6"><a href="#"><img src="cat/6.webp" alt="" /></a></div>
			
		</div>
				</div>
				<div class=""></div>
			</div>
		</article>
		<div class="ad">
			<ul>
				<li><a href="#"></a><img src="img/a1.png"/></li>
				<li><a href="#"></a><img src="img/a2.png"/></li>
				<li><a href="#"></a><img src="img/a3.png"/></li>
				<li><a href="#"></a><img src="img/a4.png"/></li>
				<li><a href="#"></a><img src="img/a5.png"/></li>
			</ul>
		</div>
		<!--
        	货物展示的结构代码
        -->
        
		<div class="goods">
			<h3><img src="img/148-48.png"/><span style="display: inline-block;height: 24px;line-height: 24px;margin-left: 15px;margin-top: 10px;">与品质生活不期而遇</span></h3>
			<div class="ginner">
				<a href="#">
					<div class="top"><img src="img/p1.PNG"/><div class="imgtop"></div></div>
					<div class="bottom">
						<h4>大豆家  方头奶奶鞋</h4>
						<p>一脚蹬设计,方便日常的穿</p>
						<p><span class="iconfont icon-xiaolian"></span>3758人说好</p>
					</div>
				</a>
				<a href="#">
					<div class="top"><img src="img/p1.PNG"/><div class="imgtop"></div></div>
					<div class="bottom">
						<h4>佳宝路转角水槽</h4>
						<p>304不锈钢,表面光洁坚固</p>
						<p><span class="iconfont icon-xiaolian"></span>

							123人说好
						
						</p>
					</div>
				</a>
				<a href="#">
					<div class="top"><img src="img/p3.PNG"/><div class="imgtop"></div></div>
					<div class="bottom">
						<h4>肖优秀真皮细高跟过膝</h4>
						<p>细跟尖头设计更显优雅女人</p>
						<p><span class="iconfont icon-xiaolian"></span>68人说好</p>
					</div>
				</a>
				<a href="#">
					<div class="top"><img src="img/p4.PNG"/><div class="imgtop"></div></div>
					<div class="bottom">
						<h4>LANCOME秋冬限量迷雾</h4>
						<p>雾面质感暗红色管身,优雅</p>
						<p><span class="iconfont icon-xiaolian"></span>16人说好</p>
					</div>
				</a>
				<a href="#">
					<div class="top"><img src="img/p5.PNG"/><div class="imgtop"></div></div>
					<div class="bottom">
						<h4>汽车盲点变道辅助系</h4>
						<p>行车安全盲区监测系统,</p>
						<p><span class="iconfont icon-xiaolian"></span>24人说好</p>
					</div>
				</a>
				<a href="#">
					<div class="top"><img src="img/p5.PNG"/>
					<div class="imgtop"></div>
					</div>
					
					<div class="bottom">
						<h4>PUMA芥末绿复古老爹鞋</h4>
						<p>芥末绿色的鞋面视觉上给人</p>
						<p><span class="iconfont icon-xiaolian"></span>7人说好</p>
					</div>
				</a>
			</div>
		</div>
	
	<div class="over">
		
		<div class="sale" id="bigtop">
			<h3>热卖单品</h3>
			<div class="sale-nav">
				<a href="#">连衣裙</a>
				<a href="#">女手表</a>
				<a href="#">女裤休闲</a>
				<a href="#">耐克</a>
				<a href="#"></a>
				<a href="#">女t恤</a>
				<a href="#">平板电脑</a>
				<a href="#">女秋装</a>
				<a href="#">休闲裤</a>
				<a href="#">水杯</a>
				<a href="#">口红</a>
				<a href="#">男士T恤</a>
				<a href="#">男拖鞋</a>
				<a href="#">防晒霜</a>
				<a href="#">手链</a>
				<a href="#">沐浴露</a>
				<a href="#">平板电脑</a>
				<a href="#">男手表</a>
				<a href="#">女手表</a>
				<a href="#">项链</a>
				<a href="#">冰箱</a>
				
			</div>
			<div class="sale-bd">
				<ul>
					<li class="item">
						<a href="#"><img src="img/11.webp" /></a>
						<a href="#">欧美外贸原单春秋款高腰包腹显瘦孕妇长裤小脚裤子修身打底裤</a>
						<a href="#" class="left">&yen;<em>99</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/22.webp" /></a>
						<a href="#">职业阿玛施特牛仔外套女装正品2020秋新款正品宽松休闲卡通</a>
						<a href="#" class="left">&yen;<em>239</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/古装.png" /></a>
						<a href="#">汉服女中国风仙气初中学生古装改良版连衣裙</a>
						<a href="#" class="left">&yen;<em>44</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/2.webp" /></a>
						<a href="#">重生立领斜襟领口金边大袖衫一片式马面裙</a>
						<a href="#" class="left">&yen;<em>99</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/1.webp" /></a>
						<a href="#">碧落梨花渡汉服女原创齐胸对襟襦裙春夏绣花</a>
						<a href="#" class="left">&yen;<em>279</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/帐篷.png" /></a>
						<a href="#">骆驼户外帐篷全自动速开露营野营超轻便帐蓬</a>
						<a href="#" class="left">&yen;<em>313</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/意大利.png" /></a>
						<a href="#">2014 意大利S家秋冬新品 七分袖蝴蝶结纯色连衣裙</a>
						<a href="#" class="left">&yen;<em>88</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/3.webp" /></a>
						<a href="#">【暖房】清sang 原89元mystic原d全蕾丝刺绣夏新款缎拼接短</a>
						<a href="#" class="left">&yen;<em>66</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/霓裳.png" /></a>
						<a href="#">远山乔汉服原创齐腰裙半臂坦领汉服女套装</a>
						<a href="#" class="left">&yen;<em>189</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
					<li class="item">
						<a href="#"><img src="img/11.webp" /></a>
						<a href="#">酥容 宽松chic高腰少女裤 显瘦bf风黑阔腿裤休闲学生运动黑色</a>
						<a href="#" class="left">&yen;<em>80</em></a>
						<a href="#" class="right">月销3595笔</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	</body>
</html>

样式图

第三个人民网;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>人民网-模块设计</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			body{
				background-image: url(img2/2020gq.jpg);
				background-repeat: no-repeat;
				background-position: center top;
				
			}
			.red {
				color: red;
			}
			
			.rm {
				width: 48px;
				height: 33px;
				/*border: 1px solid black;*/
				display: inline-block;
				background-image: url(img2/rm.jpg);
				background-repeat: no-repeat;
				margin-right: 2px;
			}
			
			.w1000 {
				width: 1000px;
				margin: auto;
				border: 1px solid black;
			}
			
			.mok1 {
				height: 1280px;
			}
			
			.mok2 {
				height: 380px;
			}
			
			.box {
				width: 278px;
				padding: 15px;
				border: 1px solid black;
			}
			
			.mok1 .box {
				height: 378px;
			}
			
			.mok2 .box {
				height: 348px;
			}
			
			.fr {
				float: right;
			}
			
			.fl {
				float: left;
			}
			
			.ml35 {
				margin-left: 35px;
			}
			
			.mb {
				margin-bottom: 25px;
			}
			
			.box h3 {
				font-size: 24px;
				border-bottom: 1px solid black;
				padding-bottom: 10px;
				font-family: "microsoft yahei";
				margin-bottom: 15px;
			}
			
			.box ul {
				list-style-type: none;
			}
			
			.box li {
				font-size: 14px;
				font-family: simsun;
				line-height: 39px;
			}
			
			.box a {
				text-decoration: none;
				color: black;
			}
			
			.box a:hover {
				color: red;
			}
			
			.box p {
				width: 275px;
				height: 160px;
				position: relative;
			}
			
			.box p span {
				display: ;
				width: 275px;
				height: 35px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				background-image: url(img2/1.jpg);
				color: white;
				text-align: center;
				font-size: 14px;
				line-height: 35px;
			}
			
			.ad {
				height: 90px;
				position: relative;
				margin-bottom: 10px;
				margin-top: 10px;
			}
			.mok3{
				height: 627px;
			}
			.mok3 .box{
				height: 596px;
			}
			.mok4{
				height: 450px;
				margin-bottom: 10px;
				margin-top: 300px;
				background: #FFFFFF;
			}
			.mok4 div{
				height: 50px;
				background: #FF0000;
				align-content: center;
				font-family: "微软雅黑";
			}
			.mok4 div a{
				margin: 20px;
				margin-top: 100px;
				text-decoration: none;
				color: black;
				line-height: 50px;
			}
			.box h3 img:hover{
				transform: rotate(180deg);
				transition: all 3s;
		</style>
	</head>

	<body>
		
		<div class="w1000 mok4">
			<img src="img2/headimg1.PNG"/>
			<div class="w1000">
				<a href="">滚动 </a>
				<a href="">时政</a>
				<a href="">国际 </a>
				<a href="">财经 </a>
				<a href="">台湾 </a>
				<a href="">军事 </a>
				<a href="">观点</a>
				<a href="">领导</a>
				<a href="">视频</a>
				<a href="">人事</a>
				<a href="">理论</a>
				<a href="">法治</a>
				<a href="">社会</a>
			</div>
			<img src="img2/headimg2.PNG"/>
		</div>	
		
		<div class="w1000 mok3">
			<div class="box fl">
				<a>
					<h3>国际 一带一路 人民智云<img src="img2/jiaicon.png" align="right"/></h3></a>
				<p>
					<img src="img2/MAIN202010100910260779540089298.jpg">
					<span>韩国大白菜飙涨至62元一颗</span>
					<ul>
						<a href="#">
						<li>
							雪深达6厘米 中国最冷小镇开启"童话模式"
						</li>
						<a href="#">
						<li>
							青岛新增3例新冠肺炎无症状感染者
						</li>
						<a href="#">
						<li>
							北京"十四五"建言超千条 近四成关注交通
						</li>
						<a href="#">
						<li>
							世卫:全球累计新冠确诊病例达36754395例
							
						</li>
						<a href="#">
						<li>
							湖北仙桃村民中毒 初判饮水钡金属超标
						</li>
						<a href="#">
						<li>
							古特雷斯呼吁纳卡冲突各方尊重停火协议
						</li>
						<a href="#">
						<li>
							拉美学界:拉美需要同中国开展有益合作
						</li>
					</a>
					<a href="#">
						<li>
							世界镇痛日:面对疼痛 千万别忍忍就算了
						</li>
					</a>
					<a href="#">
						<li>
							青岛新增3例新冠肺炎无症状感染者
						</li>
					</a>
				    <a href="#">
						<li>
						王毅分别同菲律宾外长、伊朗外长举行会谈
						</li>
					</a>	
				</ul>
			</div>
			
			<div class="box ml35 fl">
				<a>
					<h3>人民 体育<img src="img2/jiaicon.png" align="right"/></h3></a>
				<p>
					<img src="img2/MAIN202010111426041199449322953.jpg">
					<span>2020法网:斯维亚特克夺女单冠军</span>
				</p>
				<ul>
					<a href="#">
						<li>
							美国新冠肺炎确诊病例数超765万
						</li>
					</a>
					<a href="#">
						<li>
						   疫情下在美中国留学生创业:"危"中求"机"
						</li>
					</a>
					<a href="#">
						<li>
							白宫医生预期特朗普即将重返公共活动
						</li>
					</a>
					<a href="#">
						<li>
							美制裁18家伊朗银行 伊方批“政治宣传”
						</li>
					</a>
					<a href="#">
						<li>
					               景区热气球带飞工作人员 双腿悬空险坠落
						</li>
					</a>
					<a href="#">
						<li>
							退休老师做担保帮贷18万后学生失联
						</li>
					</a>
					<a href="#">
						<li>
							巨大海象迷路后误闯小镇 穿过10个街区
						</li>
					</a>
					<a href="#">
						<li>
							3岁儿童闯入车流之中 被民警一把抱起
						</li>
					</a>
					<a href="#">
						<li>
							澳洲一男子被鲨鱼尾随 无人机助其脱险
						</li>
					</a>
					<a href="#">
						<li>
							巧夺天工!小伙用6400根筷子拼出母校
						</li>
					</a>
				</ul>
			</div>
			<div class="box fr">
				<a>
					<h3>财经 产经<img src="img2/jiaicon.png" align="right"/></h3></a>
				<p>
					<img src="img2/MAIN202008110811140709048729554.jpg">
					<span>近1.16亿元 央行开出国内支付机构最大罚单</span>
				</p>
				<ul>
					<a href="#">
						<li>
							西藏昌都各族各界隆重庆祝解放70周年
						</li>
					</a>
					<a href="#">
						<li>
							湖北省78746名干部驻贫困村开展帮扶
						</li>
					</a>
					<a href="#">
						<li>
							中国-东盟跨境医疗合作平台正式启动
						</li>
					</a>
					<a href="#">
						<li>
							海南政务便民服务站新增77项便民事项
						</li>
					</a>
					<a href="#">
						<li>
							专题|决战决胜脱贫攻坚地方策
						</li>
					</a>
					<a href="#">
						<li>
							全国巾帼助农创业浙江基地落户义乌
						</li>
					</a>
					<a href="#">
						<li>
							福建闽清:漫山橄榄树“种出”山区致富路
						</li>
					</a>
					<a href="#">
						<li>
							深圳全面强化“一核一带一区”主引擎作用
						</li>
					</a>
					<a href="#">
						<li>
							今年四川高职扩招 “八类群体”可报名
						</li>
					</a>
					<a href="#">
						<li>
							"互联网+中华文明"展在首都博物馆开幕
						</li>
					</a>
				</ul>
			</div>
		</div>
		
		<div class="w1000 ad">
			<img src="img2/hf.jpg" />
			<img src="img2/ad1.png" style="position: absolute; top: 0px; right: 0px;" />
		</div>
		
		<div class="w1000 mok1">
			<div class="box fl mb">
				<a>
					<h3>旅游<img src="img2/jiaicon.png" align="right"/></h3></a>
				<p>
					<img src="img2/MAIN202009290907015519298894528.jpg">
					<span>“逛博物馆”成为新时尚</span>
				</p>
				<ul>
					<a href="#">
						<li>
							文旅部再次提醒游客注意安全
						</li>
					</a>
					<a href="#">
						<li>
							湖北30家重点景区单日接待31.1万人次
						</li>
					</a>
					<a href="#">
						<li>
							工业旅游:在安源,走过百年矿道
						</li>
					</a>
					<a href="#">
						<li>
							坐着高铁看中国——快旅慢游 美丽中国
						</li>
					</a>
				
				</ul>
			</div>
			<div class="box fl ml35 mb ">
				<h3>美丽乡村<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202009290927253652947130195.jpg">
					<span>大凉山里“暖流”涌</span>
				</p>
				<ul>
					<a href="#">
						<li>
							让每个乡村收获幸福
						</li>
					</a>
					<a href="#">
						<li>
							丰收中国,希望田野的最美画卷
						</li>
					</a>
					<a href="#">
						<li>
							村民喜增收 村寨大变样
						</li>
					</a>
					<a href="#">
						<li>
							沪郊乡村成市民休闲“网红点”
						</li>
					</a>
				</ul>
			</div>
			<div class="box fr mb">
				<h3>汽车<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202009300947078514519843992.jpg">
					<span>交通部:抓好疫情防控 保障群众安全出行</span>
				</p>
				<ul>
					<a href="#">
						<li>
							国庆首日发送旅客6586.23万人次
						</li>
					</a>
					<a href="#">
						<li>
							新疆15项措施加速汽车消费回暖
						</li>
					</a>
					<a href="#">
						<li>
							中国农村公路里程已达420万公里
						</li>
					</a>
					<a href="#">
						<li>
							交通部:严格公路口岸运输管理
						</li>
					</a>
				</ul>
			</div>
			<div class="box fl mb">
				<h3>教育<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202009301006528402481528620.jpg">
					<span>名校入驻"回天" 32个项目完成近半</span>
				</p>
				<ul>
					<a href="#">
						<li>
							职业教育进入提质培优新阶段
						</li>
					</a>
					<a href="#">
						<li>
							大学食堂自选称重 节俭已成新风尚
						</li>
					</a>
					<a href="#">
						<li>
							村里来了科技扶贫“智囊团”
						</li>
						<a href="#">
							<li>
							面临高三首次月考 做好复习计划最重要
							</li>
						</a>
				</ul>
			</div>
			<div class="box fl ml35 mb">
				<h3>科普<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202010030903418170587910993.jpg">
					<span>国庆期间准备结婚?婚前检查先了解一下</span>
				</p>
				<ul>
					<a href="#">
						<li>
							这种米能减肥还对心血管好,赶快吃起来
						</li>
					</a>
					<a href="#">
						<li>
							总是在夜间腿抽筋?这些情况需要注意了
						</li>
					</a>
					<a href="#">
						<li>
							新冠病毒完整结构图到底多牛
						</li>
					</a>
					<a href="#">
						<li>
							除了坠毁和回收 老旧航天器还有第三种归宿
						</li>
				</ul>
			</div>
			<div class="box fr mb">
				<h3>传媒  知识产权<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202010030917177589740016314.jpg" width="280">
					<span>国庆档三天收获票房二十亿</span>
				</p>
				<ul>
					<a href="#">
						<li>
							文化街区里的“旧时光”
						</li>
					</a>
					<a href="#">
						<li>
							时代精神是影视创作的永恒动力
						</li>
					</a>
					<a href="#">
						<li>
							思政节目赋能思政课
						</li>
					</a>
					<a href="#">
						<li>
							陕西日报:走好群众路线 做好深融大文章
						</li>
					</a>
				</ul>
			</div>
			<div class="box fl">
				<h3>书画<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202009291344107138785317736.jpg" width="280" height="160">
					<span>用绘画讴歌光辉时刻——画里的“国庆”</span>
				</p>
				<ul>
					<a href="#">
						<li>
							黄金周“文艺游”攻略 好展任你看
						</li>
					</a>
					<a href="#">
						<li>
							月到中秋分外明 古今中外共此时
						</li>
					</a>
					<a href="#">
						<li>
							“互联网+中华文明”展览开幕
						</li>
					</a>
					<a href="#">
						<li>
							中国漫画家大会在穗召开
						</li>
					</a>
				</ul>
			</div>
			<div class="box fl ml35">
				<h3>军事<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202010040933496276149319620.jpg">
					<span>大学生“后浪”汇入强军洪流</span>
				</p>
				<ul>
					<a href="#">
						<li>
							祝福母亲,他们在边防一线守望家与国
						</li>
					</a>
					<a href="#">
						<li>
							第74集团军某旅问卷调查掌握官兵用餐需求
						</li>
					</a>
					<a href="#">
						<li>
							坝上小村庄 阔步奔小康
						</li>
					</a>
					<a href="#">
						<li>
							将国防观念深植学生心中
						</li>
					</a>
				</ul>
			</div>
			<div class="box fr">
				<h3><sapn class="rm"></sapn>健康<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN202010040725246502787924626.jpg">
					<span>疲劳背痛?5种运动专治假日各种不适</span>
				</p>
				<ul>
					<a href="#">
						<li>
							截至6月底医保跨省就医直接结算669万人次
						</li>
					</a>
					<a href="#">
						<li>
							世卫:全球累计新冠确诊病例达34495176例
						</li>
					</a>
					<a href="#">
						<li>
							糖友尿酸高,首选双胍 
						</li>
					</a>
					<a href="#">
						<li>
							三名科学家获2020年诺贝尔生理学或医学奖
						</li>
				</ul>
			</div>
		</div>
		<div class="w1000 ad">
			<img src="img2/hf2.jpg" />
			<img src="img2/ad1.png" style="position: absolute; top: 0px; right: 0px;" />
		</div>

		<div class="w1000 mok2">
			<div class="box fl ">
				<h3>人民日报 人民网<img src="img2/jiaicon.png" align="right"/></h3>
				<p>
					<img src="img2/MAIN201912261145299809222635520.jpg" height="125px" align="left">
					<a href="#">2019年12月6日,李宝善社长会见韩国江原道知事崔文洵一行。[阅读]</a>
				</p>
				<ul>
					<a href="#">
						<li>
							李宝善社长会见巴基斯坦驻华大使哈什米
						</li>
					</a>
					<a href="#">
						<li>
							人民日报全媒体亮相服贸会
						</li>
					</a>
					<a href="#">
						<li>
							“大道康庄”人民网全媒体调研行在京启动
						</li>
					</a>
					<a href="#">
						<li>
							《70问解码“中国之治”》出版 
						</li>
					</a>
					
				</ul>
			</div>

			<div class="box fl ml35">
				<h3>人民服务<img src="img2/jiaicon.png" align="right"/></h3>

				<ul>
					<a href="#">
						<li>
							人民日报图文数据库
						</li>
					</a>
					<a href="#">
						<li>
							政务密钥
						</li>
					</a>
					<a href="#">
						<li>
							金报电子
						</li>
					</a>
					<a href="#">
						<li>
							领导人活动报道集
						</li>
					</a>
					<a href="#">
						<li>
							人民日报社论、言论
						</li>
					</a>
					<a href="#">
						<li>
							省部长言论
						</li>
					</a>
					<a href="#">
						<li>
							中国共产党重大事件人物库
							政府工作报告
						</li>
					</a>
					<a href="#">
						<li>
						中国共产党重要文献
						中共历次全会文献
						</li>
					</a>
				</ul>
			</div>
			<div class="box fr">
				<h3>资料<img src="img2/jiaicon.png" align="right"/></h3>

				<ul>

					<a href="#">
						<li>
						高层领导人报道集
						</li>
					</a>
					<a href="#">
						<li>
							地方领导资料库
							历次党代会
						</li>
					</a>
					<a href="#">
						<li>
							十九届四中全会电子书
						</li>
					</a>
					<a href="#">
						<li>
							2020年全国两会
							外交部发言人
						</li>
					</a>
					<a href="#">
						<li>
							中央重拳打击腐败
							人事任免
						</li>
					</a>
					<a href="#">
						<li>
							开国将帅名录
							党史人物纪念馆
						</li>
					</a>
					<a href="#">
						<li>
							历年访谈汇总
							2020两会访谈录
						</li>
					</a>
					<a href="#">
						<li>
							高考
							考公务员
							图解新闻
						</li>
					</a>
				</ul>
			</div>
		</div>

		</div>
		<p>
			<h3 align="center" style="color: black;">周杰&nbsp;&nbsp;&nbsp;1801120072&nbsp;&nbsp;&nbsp;软件工程二班</h3></p>
	</body>

</html>

样式图

第四个网页:图形变换;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过渡和变形</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				list-style: none;
			}
			body{
				background-color: #000000;
			}
			.box{
				width: 1200px;
				margin: auto;
			}
			.box li{
				display: inline-block;
				margin: 38px;
			}
			.box .image{
				width: 200px;
				height: 200px;
				border: 10px solid white;
				border-radius: 15px;
				margin-top: 30px;
				overflow: hidden;
				-webkit-transition: ease 2s all;
				-webkit-animation-name: faguang;
				-webkit-animation-duration: 2s;
				-webkit-animation-delay: 0s;
				-webkit-animation-timing-function: ease;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
			}
			.box h2{
				color: white;
				background-color: rosybrown;
				text-align: center;
				text-shadow: 2px 2px gray;
				border-radius: 20px;
				width: 100px;
				height: 40px;
				margin: auto;
				line-height: 40px;
				-webkit-animation-name: faguang;
				-webkit-animation-duration: 2s;
				-webkit-animation-delay: 0s;
				-webkit-animation-timing-function: ease;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
			}
			@-webkit-keyframes faguang{
				from{
					box-shadow: 0px 0px 10px 10px green;
				}
				to{
					box-shadow: 0px 0px 10px 10px gold ;
				}
			}
			.box .trans:hover{
				border-radius: 50%;
			}
			.box img{
				-webkit-transition: ease 2s all;
				-webkit-transform-origin: left top;
			}
			.box .scale:hover img{
				-webkit-transform: scale(2);
				
			}
			.box .rotate:hover{
				-webkit-transform: rotate(20deg);
			}
			.box .color:hover img{
				-webkit-filter: grayscale(100%);
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<h2>过渡</h2>
					<div class="image trans"><img src="images/image1.jpg"/></div>
				</li>
				<li>
					<h2>缩放</h2>
					<div class="image scale"><img src="images/image2.jpg"/></div>
				</li>
				<li>
					<h2>旋转</h2>
					<div class="image rotate"><img src="images/image3.jpg"/></div>
				</li>
				<li>
					<h2>灰度</h2>
					<div class="image color"><img src="images/image4.jpg"/></div>
				</li>
			</ul>
		</div>
	</body>
</html>

样式图

第五个网页:网易云唱片;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>media</title>
		<style type="text/css">
		.zz{
			width: 100%;
			height: 100%;
			margin: auto;
			position: relative;
		}
		.cd{
		
			width: 600px;
			height: 600px;
			border: 10px solid #ccc;
			border-radius: 50%;
			background-image: repeating-radial-gradient(circle at 50% 50%,#333 0%,#000 1%);重复径向渐变
			/*background-image: repeating-linear-gradient(to right,#333 0%,#000 1%);*/
			/*margin: auto;*/
			position: relative;
			margin-left: 150PX;
			
		}
		.in{
			/*border-radius: 50%;*/
			width: 422px;
			height: 422px;
			position:relative;
			/*position: absolute;*/
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%,-50%);
			overflow: hidden;
		}
		.in img {
			border-radius: 50%;
			/*-webkit-animation: xuanzhuan 4s infinite;*/
		}
		
		.song{
			/*position: relative;*/
			width: 500px;
			height: 600px;
			top: 0px;
			/*left:0px;*/
			
		}
		.song h1{
			color: darkblue;
		}
		@font-face {
			font-family: "jianzi";
			src: url(font/FZJZJW.TTF);
		}
		h1{
			font-family: "jianzi";
		
		}
		p{
			font-family: "jianzi";
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.xz{
			animation: move 4s linear infinite;
			-webkit-animation: move 4s linear infinite;
			display: inline-block;
			
		}
		@keyframes move{
			from{transform:rotate(0deg) ;}
			to{transform:rotate(360deg) ;}
		}
		</style>
	</head>
	<body>
		<div class="zz">
		<div class="cd fl ">
			<div class="in"><img src="img/cd_img.jpg" class="xz" /></div>
			</div>
			<div class="song fr">
				<h1>我和我的祖国</h1>
				<p> 作词 : 张藜</p>
				 <p> 作曲 : 秦咏诚</p>
				<p>我和我的祖国一刻也不能分割</p>
				<p>无论我走到哪里都流出一首赞歌</p>
				<p>我歌唱每一座高山我歌唱每一条河</p>
				<p>袅袅炊烟小小村落路上一道辙</p>
				<p>啦……</p>
				<p>你用你那母亲的脉搏和我诉说</p>
				<p>我的祖国和我像海和浪花一朵</p>
				<p>浪是海的赤子海是那浪的依托</p>
				<p>每当大海在微笑我就是笑的旋涡</p>
				<p>	我分担着海的忧愁分享海的欢乐</p>
				<p>	啦…..</p>
				<p>	永远给我碧浪清波心中的歌</p>
				<details>
				<summary>展开</summary>
				<p>啦…….</p>
				<p>永远给我碧浪清波心中的歌</p>
				<p>	你用你那母亲的脉搏和我诉说</p>
				<p>我的祖国和我像海和浪花一朵</p>
				<p>浪是海的赤子海是那浪的依托</p>
				<p>每当大海在微笑我就是笑的旋涡</p>
				<p>我分担着海的忧愁分享海的欢乐</p>
				</details>
		</div>
		</div>
	</body>
</html>

样式图

以上五个是课上学习的练习。
以下五个是自己借鉴一些模板自己改的,我也是刚刚学习,做的不是很好。
第六个网页:个人主页;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历</title>
	<style type="text/css">
* {
    margin: 0;
    padding: 0
}

.home {
    height: 100%;
    overflow: hidden;
}

.content {
    perspective: 340px;
    width: 100%;
    position: relative;
}

h1 {
    color: white;
    text-align: center;
}

span {
    display: block;
    text-align: center;
}

.stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    z-index: 999;
    border-radius: 50%;
    box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
    animation: fly 15s linear infinite;
    transform-style: preserve-3d;
}

.stars:before,
.stars:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
}

.stars:before {
    transform: translateZ(-300px);
    opacity: .6;
}

.stars:after {
    transform: translateZ(-600px);
    opacity: .4;
}

@keyframes fly {
    from {
        transform: translateZ(0px);
        opacity: .6;
    }
    to {
        transform: translateZ(200px);
        opacity: .8;
    }
}

.title {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 300px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.titles {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 350px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.icon {
    width: 15px;
    height: 15px;
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 100%;
    position: absolute;
    left: 49%;
    bottom: 50px;
    animation: downs 2s linear infinite;
}

@keyframes downs {
    from {
        transform: translatey(0px);
        opacity: .6;
    }
    to {
        transform: translatey(30px);
        opacity: .8;
    }
}

.ribbon {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 300px;
    top: 50px;
    margin: auto;
}

.ribbon:after,
.ribbon:before {
    margin-top: 0.5em;
    content: "";
    display: flex;
    ;
    border: 1.5em solid #fff;
}

.ribbon:after {
    border-right-color: transparent;
}

.ribbon:before {
    border-left-color: transparent;
}

.ribbon a:link,
.ribbon a:visited {
    color: #000;
    text-decoration: none;
    height: 3.5em;
    overflow: hidden;
}

.ribbon span {
    background: #fff;
    display: inline-block;
    line-height: 3em;
    padding: 0 1.5em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s;
    /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;
    /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;
    /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;
    /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background: #FFD204;
    margin-top: 0;
}

.ribbon span:before {
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.introduce {
    display: flex;
    flex-direction: column;
}

.introduce_item {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.introduce_item_img {
    width: 800px;
    height: 500px;
}

.introduce_item_title {
    width: 300px;
    font-size: 18px;
    line-height: 36px;
    align-self: center;
    padding-left: 100px;
}

.introduce_item_titles {
    width: 300px;
    font-size: 18px;
    line-height: 36px;
    align-self: center;
    padding-right: 100px;
}

audio {
    position: fixed;
    bottom: 50px;
    right: 0;
}

.music_img {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 40px;
    height: 30px;
    animation: muscis 5s linear infinite;
}

@keyframes muscis {
    from {
        transform: rotate (0deg);
        opacity: .6;
    }
    to {
        transform: rotate(360deg);
        opacity: .8;
    }
}

.icons {
    display: flex;
    justify-content: space-between;
    padding: 0 400px;
    box-sizing: border-box;
    overflow: hidden;
}

.icons_items {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    margin-top: 80px;
    width: 200px;
}

.icons_items_imgs {
    width: 200px;
    margin-bottom: 30px;
}
</style>
</head>


<body>
    <div class="home">
        <div class="content">
            <div class="stars"></div>
            <img class="bgc" src="img/注册背景图1.jpg" width="100%" alt="">
            <h3 class="title">欢迎来到我的个人网站</h3>
            <h3 class="titles">今天也要加油鸭</h3>
            <img class="icon" src="img/小图.png" alt="">
            <div class='ribbon'>
                <a href='个人主页.html'><span>Home</span></a>
                <a href='我的.html'><span>About</span></a>
                <a href='表单.html'><span>Form</span></a>

            </div>

        </div>
        <div class="icons">
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/教学楼.png" alt="">
                <span>教学楼是我们每天必去取经之地</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/餐厅.png" alt="">
                <span>每天都要在食堂里面纠结到底吃什么</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/校内风景图2.png" alt="">
                <span>午饭过后可以躺着休息晒晒太阳的小山坡</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/宿舍.png" alt="">
                <span>忙碌的一天结束啦爬上小床跟世界说晚安</span>
            </div>
        </div>
        <div class="introduce">
            <div class="introduce_item">
                <img class="introduce_item_img" src="img/第一张图.png" alt="">
                <span class="introduce_item_title">天空还是一片浅蓝,转眼间东方出现了一道红霞,红霞慢慢地在扩大,不大一会就染红了小半边天。颜色红得可爱, 又 过了一会儿,在那个地方出现了太阳的小半边脸。</span>

            </div>
            <div class="introduce_item">

                <span class="introduce_item_titles">当清晨的阳光洒进我们温馨的寝室,忙碌的一天又开始了,闹钟开始响起,每个人睡眼惺忪,从床上爬起,忙忙碌碌的穿梭在食堂与教室之间</span>
                <img class="introduce_item_img" src="img/第二张图.png" alt="">
            </div>
            <div class="introduce_item">
                <img class="introduce_item_img" src="img/第三张图.png" alt="">
                <span class="introduce_item_title">温暖的阳光照耀着大地,远处的小山都金灿灿的美轮美奂,它穿梭于微隙的气息。舒倘,漫长。紫檀的香味,弥漫在春日,把天地间一切空虚盈满,阳光下,是一道纤绝的尘陌,呢喃着天真,充盈着那抹曾经深不可测的孤清而飘逸的影。</span>
            </div>
            <div class="introduce_item">
                <span class="introduce_item_titles">当晚自习结束后,抬头望向天空,几颗大而亮的星星挂在夜空,仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了,裹紧衣裳,在这优美的夜色中慢慢的走回寝室。</span>
                <img class="introduce_item_img" src="img/第四张图.png" alt="">
            </div>
        </div>
        <audio autoplay="autoplay" id="audio" loop="loop">
                <source src="img/段戈—Geromion.mp3" type="audio/MP3">
               
        </audio>
        <img class="music_img" src="" alt="">
    </div>

</body>
<script>
    let mucics = document.getElementById('audio')
    document.body.addEventListener('mousemove', function() {
        setTimeout(() => {
            mucics.play();
        }, 2000);
    }, false);
</script>

</html>


第七个网页:表单;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<style type="text/css">
* {
    margin: 0;
    padding: 0
}

.from {
    overflow: hidden;
    position: relative;
}

.bgc {
    width: 100%;
}

.submit {
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-top: 150px;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.form_title {
    text-align: center;
    margin-top: 40px;
    font-size: 18px;
}

.form_input {
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    margin-top: 20px;
}

.inputs {
    height: 40px;
    width: 300px;
    border-radius: 5px;
    border: none;
    background-color: #eee;
    color: #666;
    padding-left: 20px;
}

.form_input span {
    width: 85px;
    align-self: center;
}

.btn_submit {
    align-self: center;
}

.btn {
    border: none;
    width: 80px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    background: #999;
    margin-top: 40px;
}

.btn:hover {
    background: #666;
}

.back {
    margin-left: 10px;
}

.home_href {
    border: none;
    width: 80px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    background: #FFD204;
}

		</style>
	</head>
		<body>
    <div class="from">
        <img class="bgc" src="img/表单背景.png" alt="">
        <div class="submit">
            <span class="form_title">个人信息提交</span>
            <div class="form_input">
                <span>姓名:</span>
                <input class="inputs" type="text" value="周艺人">
            </div>
            <div class="form_input">
                <span>班级:</span>
                <input class="inputs" type="text" value="软件工程清华二班">
            </div>
            <div class="form_input">
                <span>学号:</span>
                <input class="inputs" type="text" value="1801120072">
            </div>
            <div class="form_input">
                <span>系部:</span>
                <input class="inputs" type="text" value="工学部">
            </div>
            <div class="form_input">
                <span>课程名称:</span>
                <input class="inputs" type="text" value="网页设计与制作">
            </div>
            <div class="btn_submit">
                <a href="注册页面.html">
                    <button class="btn">提交</button></a>
                <a href="个人主页.html" class="back"><button class="home_href">首页</button></a>
            </div>
        </div>
    </div>
</body>

</html>

第八个网页:我的;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的</title>
		<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

.about {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about_bgc {
    width: 100%
}

.about_tit {
    position: absolute;
    top: 280px;
    left: 0;
    right: 0;
    font-size: 28px;
    font-weight: 550;
    bottom: 0;
    width: 800px;
    margin: auto;
    text-align: center;
}

.ribbon {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 300px;
    top: 50px;
    margin: auto;
}

.ribbon:after,
.ribbon:before {
    margin-top: 0.5em;
    content: "";
    display: flex;
    ;
    border: 1.5em solid #fff;
}

.ribbon:after {
    border-right-color: transparent;
}

.ribbon:before {
    border-left-color: transparent;
}

.ribbon a:link,
.ribbon a:visited {
    color: #000;
    text-decoration: none;
    height: 3.5em;
    overflow: hidden;
}

.ribbon span {
    background: #fff;
    display: inline-block;
    line-height: 3em;
    padding: 0 1.5em;
    margin-top: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s;
    /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;
    /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;
    /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;
    /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background: #FFD204;
    margin-top: 0;
}

.ribbon span:before {
    content: "";
    position: absolute;
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position: absolute;
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;
    border-bottom: 0.5em solid #fff;
}

.me {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    overflow: hidden;
}

.me_tit {
    width: 600px;
    line-height: 36px;
    font-size: 18px;
    margin-left: 100px;
    margin-top: 50px;
}

.me_img {
    width: 800px;
    height: 600px;
}

.animate {
    padding-left: 20px;
    width: 500px;
    font-size: 16px;
    color: #000;
    animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateY(100px);
        -webkit-transform: translateY(100px);
    }
    100% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }
}

.videos {
    display: flex;
    margin-top: 60px;
    padding-bottom: 80px;
}

.videos span {
    width: 400px;
    margin-right: 100px;
    margin-left: 300px;
    color: #FFD204
}

		</style>
	</head>
	<body>
		
    <div class="about">
        <h3 class="about_tit">要不断的努力,才能成为更好的自己</h3>
        <img class="about_bgc" src="img/我的背景图片2.png" alt="">
        <div class='ribbon'>
            <a href='个人主页.html'><span>Home</span></a>
            <a href='我的.html'><span>About</span></a>
            <a href='表单.html'><span>Form</span></a>

        </div>
        <div class="me">
            <img class="me_img" src="img/我的背景图片.png" alt="">
            <span class="me_tit animate ">我是一名大三的学生,平时爱好打游戏,外出游玩可惜没钱,学习一下专业知识,
            	为以后毕业做些小打算。跟大多数人一样,对未来些许迷茫,当忽然之间脑海里闪现出来一些关于几年前的某个片段时,
            	会情不自禁的回想那个时候的自己,关于那个曾经的所有点点滴滴也渐渐浮现出一些画面,突然拼命的想要去找一点在那个记忆点里的某些东西,
            	寻找的过程中脑海里的思绪早已沉溺在回忆里面,忘了的还有那些忘不了的感触在这一刻全都涌了出来,我觉得最后寻找的结果或许已不重要了,
            	因为这突如其来想要寻找的一些东西的念头,让自己突然变得好安静,莫名的思绪蔓延开来了,它又带我回到了现在已经体会不到的那种怦然心动的时候,
            	仿佛打开了老旧的抽屉,里面装满了当初的成长,青涩,遗憾与那一种想起来会不禁忽然笑出来的感觉,可能想笑的是那时的自己,
            	又或许是笑那带有遗憾结尾的时光,怀念真好。
                又一年即将过去了,生活一如既往的推着自己往前走,在行人眼里穿梭,而不时会回头看看的,还是那个仿佛不知在追逐着什么的自己,
                此刻的空气很好,它不会留下痕迹。(备注:都是假的骗自己开心的,整点悲伤的事,不然就不是文案。)
            </span>
        </div>
        <div class="videos">
            <span>
                        这是我很喜欢的一个动漫电影,玩具总动员里面的第四部,讲述的事胡迪深知自己在这个世界上的使命,就是照顾他的主人,
                        无论是原来的安迪还是新主人邦妮。当邦妮将不情愿成为玩具的“叉叉”带回家时,胡迪又担起了教导叉叉接受自己新身份的责任。
                         然而当邦妮将所有玩具带上房车家庭旅行时,胡迪与伙伴们将共同踏上全新的冒险之旅,领略房间外面的世界有多广阔,
                         甚至偶遇老朋友牧羊女。在多年的独自闯荡中,牧羊女已经变得热爱冒险,不再只是一个精致的洋娃娃。
                         正当胡迪和牧羊女发现彼此对玩具的使命的意义大相径庭时,他们很快意识到更大的威胁即将到来。
                         (备注:网上找的,我喜欢打游戏,为啥找这个?因为给上面的文案比较配)
                    </span>
            <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="img/网页制作视频.mp4"></video>

        </div>
    </div>
	</body>
</html>

第九个网页:注册页面;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background: url(img/注册背景图1.jpg) no-repeat center;
			}
			.rg_layout{
				width: 900px;
				height: 500px;
				border: 8px solid #EEEEEE;
				background-color: white;
				/*让div水平居中*/
				margin: auto;
				margin-top: 15px;
			}
			
			.rg_left{
				/*border: 1px solid red;*/
				float: left;
				margin: 15px;
			}
			.rg_left > p:first-child{
				color: #FFD026;
				font-size: 25px;	
			}
			.rg_left > p:last-child{
				color: #A6A6A6;
				font-size: 25px;
			}
			.rg_center{
				/*border: 1px solid red;*/
				float: left;
				width: 450px;
			}
			.rg_right{
				/*border: 1px solid red;*/
				float: right;
				margin: 15px;
			}	
			.rg_right > p:first-child{
				font-size: 15px;
			}
			.rg_right p a{
				color: pink;
			}
			.td_left{
				width: 100px;
				text-align: right;
				height: 45px;	
			}
			.td_right{
				padding-left: 50px;
			}
			#username,#birthday,#checkcode,#email,#name,#password,#tel{
				width: 251px;
				height: 23px;
				border: 1px solid #A6A6A6;
				/*设置边框圆角*/
				border-radius: 5px ;
				padding-right: 10px;
			}
			#img_check{
				height: 32px;
				vertical-align: middle;	
			}
			#checkcode{
				width: 110px;
			}
			#btn_sub{
				width: 150px;
				height: 40px;
				background-color: #FFD026;
				border: 1px solid #FFD026;
			}
			
				
		</style>
	</head>
	<body>
		<div class="rg_layout">
		
			<div class="rg_left">
				<p>新用户注册</p>
				<p>USER REGISTER</p>
				
			</div>
			
			<div class="rg_center">
				<div class="rg_form">
					<!--定义表单 form-->
		<form action="#" method="post">
			<table>
				<tr>
					<td class="td_left"><label for="username">用户名</label></td>
					<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="password">密码</label></td>
					<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="email">Email</label></td>
					<td class="td_right"><input type="email" name="emsil" id="email" placeholder="请输入邮箱"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="name">姓名</label></td>
					<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="tel">手机号</label></td>
					<td class="td_right"><input type="password" name="tel" id="tel" placeholder="请输入手机号码"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label>性别</label></td>
					<td class="td_right"><input type="radio" name="gender" value="male"/><input type="radio" name="gender" value="female"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="birthday">出生日期</label></td>
					<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="checkcode">验证码</label></td>
					<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/>
					<img id="img_check" src="img/验证码.jpg"  width="40" height="25"/>
					</td>
				</tr>
				
				<tr>
					<td  colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"/></td>
				</tr>
			</table>
		</form>
				</div>
			
			</div>
			
			<div class="rg_right">
				<p>已有账号?<a href="个人主页.html">立即登陆</a></p>
				
			</div>
			
		</div>
	</body>
</html>

样式图

第十个网页:花;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background: url(img/注册背景图1.jpg) no-repeat center;
			}
			.rg_layout{
				width: 900px;
				height: 500px;
				border: 8px solid #EEEEEE;
				background-color: white;
				/*让div水平居中*/
				margin: auto;
				margin-top: 15px;
			}
			
			.rg_left{
				/*border: 1px solid red;*/
				float: left;
				margin: 15px;
			}
			.rg_left > p:first-child{
				color: #FFD026;
				font-size: 25px;	
			}
			.rg_left > p:last-child{
				color: #A6A6A6;
				font-size: 25px;
			}
			.rg_center{
				/*border: 1px solid red;*/
				float: left;
				width: 450px;
			}
			.rg_right{
				/*border: 1px solid red;*/
				float: right;
				margin: 15px;
			}	
			.rg_right > p:first-child{
				font-size: 15px;
			}
			.rg_right p a{
				color: pink;
			}
			.td_left{
				width: 100px;
				text-align: right;
				height: 45px;	
			}
			.td_right{
				padding-left: 50px;
			}
			#username,#birthday,#checkcode,#email,#name,#password,#tel{
				width: 251px;
				height: 23px;
				border: 1px solid #A6A6A6;
				/*设置边框圆角*/
				border-radius: 5px ;
				padding-right: 10px;
			}
			#img_check{
				height: 32px;
				vertical-align: middle;	
			}
			#checkcode{
				width: 110px;
			}
			#btn_sub{
				width: 150px;
				height: 40px;
				background-color: #FFD026;
				border: 1px solid #FFD026;
			}
			
				
		</style>
	</head>
	<body>
		<div class="rg_layout">
		
			<div class="rg_left">
				<p>新用户注册</p>
				<p>USER REGISTER</p>
				
			</div>
			
			<div class="rg_center">
				<div class="rg_form">
					<!--定义表单 form-->
		<form action="#" method="post">
			<table>
				<tr>
					<td class="td_left"><label for="username">用户名</label></td>
					<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="password">密码</label></td>
					<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="email">Email</label></td>
					<td class="td_right"><input type="email" name="emsil" id="email" placeholder="请输入邮箱"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="name">姓名</label></td>
					<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="tel">手机号</label></td>
					<td class="td_right"><input type="password" name="tel" id="tel" placeholder="请输入手机号码"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label>性别</label></td>
					<td class="td_right"><input type="radio" name="gender" value="male"/><input type="radio" name="gender" value="female"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="birthday">出生日期</label></td>
					<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"/></td>
				</tr>
				
				<tr>
					<td class="td_left"><label for="checkcode">验证码</label></td>
					<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/>
					<img id="img_check" src="img/验证码.jpg"  width="40" height="25"/>
					</td>
				</tr>
				
				<tr>
					<td  colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"/></td>
				</tr>
			</table>
		</form>
				</div>
			
			</div>
			
			<div class="rg_right">
				<p>已有账号?<a href="个人主页.html">立即登陆</a></p>
				
			</div>
			
		</div>
	</body>
</html>

样式图

好多都是从网上找的资料有任何的违规侵权请联系我删除;
QQ:1364190767
链接:https://pan.baidu/s/1eF4SnQjJ3Ht4u7Yh2Kix4w
提取码:3ylo
复制这段内容后打开百度网盘手机App,操作更方便哦

这是完整的网页作业,包含代码,样式,图片音乐,字体。大家自取。
第一次写这个东西,大家多多关照。
完全免费;完全免费;完全免费;重要的事情说三遍!哈哈哈!!!

更多推荐

简单的网页制作期末作业