简单的网页制作期末作业
话不多说，我用的软件是HBuilder制作的网页。样式是这样的
相信学过的都会做这个页面；
<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>
这是一个简单方便老师检查的页面。
根据页面提示第一个是我学的电商网页。直接上代码；
<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>
>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>
<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">
<header>
<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>
样式图，由于缩小图太丑，我就截取一部分；
这个当中有很多的图片、音乐等各种样式插入进去不是很方便，最后给大家一个链接。自取。
第二个代码，学习的淘宝网；
<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>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111li>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>111111li>
<li><a href="#">a>1111111li>
ul>
div>
<div class="zhong1">
<h3><span style="color:green;">特色市场span>h3>
<ul>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111li>
<li><a href="#">a>11111li>
ul>
div>
<div class="zhong2">
<h3><span style="color:purple;">阿里APPspan>h3>
<ul>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111li>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111111li>
ul>
div>
<div class="you">
<h3><span style="color: lightskyblue;">精彩推荐集span>h3>
<ul>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111li>
<li><a href="#">a>11111li>
<li><a href="#">a>1111111li>
<li><a href="#">a>11111111li>
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>最高补贴3000p>
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>