话不多说，我用的软件是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">󰄪</a>
<a href="" class="iconfont icon-gezi2"></a>
<a href="" class="iconfont"></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"></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"></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"></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">¥<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">¥<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">¥<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">¥<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">¥<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">¥<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">¥<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">¥<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">¥<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">¥<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;">周杰 1801120072 软件工程二班</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.com/s/1eF4SnQjJ3Ht4u7Yh2Kix4w
提取码：3ylo
复制这段内容后打开百度网盘手机App，操作更方便哦
这是完整的网页作业，包含代码，样式，图片音乐，字体。大家自取。
第一次写这个东西，大家多多关照。
完全免费；完全免费；完全免费；重要的事情说三遍！哈哈哈！！！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
