網頁模仿

時間 2019-11-19
標籤網頁模仿欄目 HTML 简体版
原文原文鏈接
https://gitee.com/mr-1998/codes/pe4u7b6xv8ktn19j5ylhz33css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>動漫王國</title>
<style type="text/css">    
.dy{
margin:0 auto;
margin-top:2%;
margin-bottom:4%;
width: 80%;
height: 0; 
padding-bottom:18%;
}
.dy1{
width: 80%;
padding-left: 10%;
}
.dr{
margin:0 auto;
margin-top:2%;
margin-bottom:4%;
margin-left :10%;
width: 15%;
height: 0;
padding-bottom:70%;
overflow:hidden;
float:left;
background-image:url(img/bj.jpg);
background-size: cover;
} 
.b1{
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:4%;
font-size: 40px;
}
.b2{
margin-top:10%;
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:4%;
font-size: 40px;
}
.b3{
margin-top:10%;
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:4%;
overflow:hidden;
font-size: 40px;
}
.b4{
margin-top:10%;
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:2%;
font-size: 40px;
}
.b5{
margin-top:10%;
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:2%;
font-size: 40px;
}
.b6{
margin-top:10%;
width: 100%;
height: 0;
padding-bottom:40%;
text-align:center;
padding-top:2%;
font-size: 40px;
} 
.ds{
margin:0 auto;
margin-top:2%;
margin-bottom:4%;
margin-left :3%;
width: 62%;
height: 0;
padding-bottom:70%;
display: block;
box-shadow:
0px 0px 10px #000;
float: left;
background-image:url(img/bj.jpg);
background-size: cover;
}
.c1
{
margin-top:0;
width: 28%;
height: 0;
padding-bottom:22%;
text-align:center;
padding-top:2%;
display: block;
float:left;
}
.c2,.c3
{
margin-top:0;
margin-left:8%;
width: 28%;
height: 0;
padding-bottom:22%;
text-align:center;
padding-top:2%;
display:block;
float:left;
}
.c4,.c7
{
margin-top:0;
width: 28%;
height: 0;
padding-bottom:22%;
text-align:center;
padding-top:2%;
display: block;
float:left;
}
.c5,.c6,.c8,.c9
{
margin-top:0;
margin-left:8%;
width: 28%;
height: 0;
padding-bottom:22%;
text-align:center;
padding-top:2%;
display: block;
float:left;
}
.d1,.d2,.d3{
margin-top:25%;
width: 100%;
height: 0;
padding-bottom:8.5%;
text-align:center;
padding-top:4%;
display: block;
}
.wz{
width: 28%;
height: 10%;
font:"楷體";
font-size:170%;
float: left;
padding-left:3%;
}
.wz1{
width: 28%;
font:"楷體";
font-size: 170%;
float: left;
padding-left: 5%;
height: 20%;
}
.wz2{
width: 28%;
font:"楷體";
font-size: 170%;
float: left;
padding-left: 5%;
height: 20%;
}
</style>

</head>
<div class="dy">
<div class="dy1">
<div id="butong_net_right" style="overflow:hidden;width:100%;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="img/a.jpg"></td>
<td><img src="img/b.jpg"></td>
<td><img src='img/c.jpg'></td>

</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
</div>
<div>
<div class="dr">
<div class="b1">首頁</div>
<div class="b2">目錄</div>
<div class="b3">介紹</div>
<div class="b4">評分</div>
<div class="b5">評論</div>
<div class="b6">熱評</div>
</div>
<div class="ds">
<div class="c1" style="with:100%;height:80%;background-image:url(img/1.jpg);background-size: cover;"></div>
<div class="c2" style="with:100%;height:80%;background-image:url(img/2.jpg);background-size: cover;"></div>
<div class="c3" style="with:100%;height:80%;background-image:url(img/3.jpg);background-size: cover;"></div>
<div class="d1">
<p class="wz"><font alz></font>起風了</p>
<p class="wz1">魔女宅急便</p>
<p class="wz2">側耳傾聽</p>
</div>

<div class="c4" style="with:100%;height:80%;background-image:url(img/4.jpg);background-size: cover;"></div>
<div class="c5" style="with:100%;height:80%;background-image:url(img/5.jpg);background-size: cover;"></div>
<div class="c6" style="with:100%;height:80%;background-image:url(img/6.jpg);background-size: cover;"></div>
<div class="d2">
<p class="wz"><font alz></font>千與千尋</p>
<p class="wz1">天空之城</p>
<p class="wz2">龍貓</p>
</div>
<div class="c7" style="with:100%;height:80%;background-image:url(img/7.jpg);background-size: cover;"></div>
<div class="c8" style="with:100%;height:80%;background-image:url(img/8.jpg);background-size: cover;"></div>
<div class="c9" style="with:100%;height:80%;background-image:url(img/9.jpeg);background-size: cover;"></div>
<div class="d3">
<p class="wz"><font alz></font>貓的報恩</p>
<p class="wz1">風之谷</p>
<p class="wz2">幽靈公主</p>
</div>
</div>
</div>
</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。