还没有制作完,暂时制作到现在这样
代码:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>杂志社</title>
<link rel="stylesheet" type="text/css" href="css/mian.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="toper1">
<div class="toper1l">
<img src="img/zzs_04.jpg"> |
<img src="img/zzs_06.jpg"> |
<img src="img/zzs_08.jpg"> |
<img src="img/zzs_10.jpg"> |
<img src="img/zzs_12.jpg"> |
</div>
<div class="toper1r">
<a href="img/zzs_62.jpg">FAQ </a>
<a href="img/zzs_81.jpg">Contact Us </a>
<a href="img/zzs_58.jpg">About</a>
<img src="img/zzs_14.jpg">
</div>
</div>
<div class="toper2">
<div class="toper2l">
<img src="img/zzs_25.jpg">
</div>
<div class="toper2r">
<img src="img/zzs_23.jpg">
</div>
</div>
<div class="toper3">
<a href="img/zzs_29.jpg"><img src="img/zzs_29.jpg"></a><a href="img/zzs_29.jpg">FEATURES <img
src="img/zzs_32.jpg"></a><a href="img/zzs_29.jpg">TECNOLOGY</a><a
href="img/zzs_29.jpg">BUSINESS</a><a href="img/zzs_29.jpg">TRAVEL</a><a
href="img/zzs_29.jpg">BEAUTY</a><a href="img/zzs_29.jpg">REVIEWS</a>
</div>
</div>
<div id="bodyer">
<div class="lb">
<div class="stage">
<img src="img/zzs_37.jpg">
<img src="img/zzs_38.jpg">
<img src="img/zzs_39.jpg">
</div>
</div>
<div class="lb2">
<marquee behavior="" direction="right">赏天下奇闻,论时事新闻,闻政治风云</marquee>
</div>
<div class="main">
<div class="section">
<div class="content">NEWS</div>
<div class="stage1">
<img src="img/zzs_37.jpg">
<img src="img/zzs_38.jpg">
<img src="img/zzs_39.jpg">
</div>
<div class="content">LATEST NEWS</div>
<div class="stage2">
<img src="img/zzs_37.jpg">
<img src="img/zzs_38.jpg">
<img src="img/zzs_39.jpg">
</div>
</div>
<div class="aside">
adsfadsfadfa
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
css
body{
background-image: url(../img/islemag-background.jpg);
}
.red{color: #FF0000;}
.blue{color: skyblue;}
.black{color: black;}
#wrapper{
margin: 20px auto;
/* 上下间隔20 左右自动 */
width: 1000px;
border: 1px solid red;
background-color: white;
}
#bodyer{
clear: left;
max-width: 1000px;
/* display: -webkit-box;
display: -moz-box; */
/* -moz-box-flex: 1;
-webkit-box-flex: 1; */
}
#wrapper>#header>.toper1>.toper1r{
float: right;
margin: 10px;
}
#wrapper>#header>.toper1>.toper1r>a{
color: dimgrey;
text-decoration: none;
margin-right: 10px;
}
#wrapper>#header>.toper1>.toper1l{
float: left;
margin: 10px;
}
#wrapper>#header>.toper1>.toper1l>img{
margin-right: 6px;
}
#wrapper>#header>.toper1{
background-color: lightgray;
}
#wrapper>#header>.toper2{
clear: left;
display: inline-block;
}
#wrapper>#header>.toper2>.toper2l{
display: inline-block;
margin-left: 20px;
}
#wrapper>#header>.toper2>.toper2r{
display: inline-block;
margin-left: 80px;
}
#wrapper>#header>.toper3>a{
/* margin-right: 10px; */
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
border-top: 3px solid skyblue;
border-right: 1px solid #D3D3D3;
padding-right: 10px;
padding-left: 10px;
}
#wrapper>#header>.toper3{
/* margin-left: 100px; */
margin-top: 5px;
height: 40px;
}
#wrapper>#header>.toper3>a:hover{
background-color: #D3D3D3;
transition-duration: 2s;
}
#wrapper>#bodyer>.lb{
display: inline-block;
overflow: hidden;
width: 820px;
height: 400px;
margin:auto;
position: relative;
margin: 20px;
}
#wrapper>#bodyer>.lb>.stage{
height: 400px;
width: 1220px;
position: absolute;
animation: stage 17s ease-in-out 0s infinite normal;
display: inline-block;
}
#wrapper>#bodyer>.lb>.stage img{
/* display: inline-block; */
}
@keyframes stage{
0%{
transform: scaleX(1);
}
50%{
transform: scaleX(1) translate(-400px);
}
50.001%{
transform: scaleX(1) translate(-400px);
}
100%{
transform: scaleX(1);
}
}
@keyframes stage1{
0%{
transform: scaleX(1);
}
50%{
transform: scaleX(1) ;
margin-left: 200px;
}
50.001%{
transform: scaleX(1);
}
100%{
transform: scaleX(1);
}
}
#wrapper>#bodyer>.main{
display: -webkit-box;
display: -moz-box;
}
#wrapper>#bodyer>.main>.section{
/* display: -webkit-box;
display: -moz-box;
-moz-box-flex: 5;
-webkit-box-flex: 5; */
width: 740px;
border: 1px solid yellow;
}
#wrapper>#bodyer>.main>.aside{
/* display: -webkit-box;
display: -moz-box;
-moz-box-flex: 2;
-webkit-box-flex: 2; */
width: 250px;
border: 1px solid red;
}
#wrapper>#bodyer>.main>.section>.content{
/* width: 750px; */
/* height: 30px; */
border-bottom: 2px solid #696969;
/* float: left; */
/* margin: auto; */
padding: 0 20px;
margin: 10px 20px;
}
#wrapper>#bodyer>.main>.section>.stage1{
/* clear: left; */
}
#wrapper>#bodyer>.main>.section>.stage1 img{
width: 200px;
margin: 10px 20px;
}
#wrapper>#bodyer>.main>.section .stage2 img{
width: 140px;
margin: 10px 20px;
}