軟工第二次做業

時間 2019-11-19

標籤第二次简体版

原文原文鏈接

碼雲連接：https://gitee.com/MHJ-0827/codes/wik61dotuxnzmbqjv489l53css

實現的功能：html

1.實現了圖片的滾動。git

2.實現了圖片的大小隨網頁大小的改變而改變。url

網頁截圖：spa

實現後的網頁：3d

代碼：code

<!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/a1.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;
}
.b7{
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/a1.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: 20%;
font:"微軟雅黑";
font-size:200%;
float: left;
padding-left:3%;
}
.wz1{
width: 28%;
font:"微軟雅黑";
font-size: 200%;
float: left;
padding-left: 5%;
height: 20%;
}
.wz2{
width: 28%;
font:"微軟雅黑";
font-size: 200%;
float: left;
padding-left: 5%;
height: 20%;
}
</style>htm

</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/1.jpg"></td>
<td><img src="img/2.jpg"></td>
<td><img src='img/3.jpg'></td>blog

</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 class="b7">話題</div>
</div>
<div class="ds">
<div class="c1" style="with:100%;height:80%;background-image:url(img/a.jpg);background-size: cover;"></div>
<div class="c2" style="with:100%;height:80%;background-image:url(img/b.jpg);background-size: cover;"></div>
<div class="c3" style="with:100%;height:80%;background-image:url(img/c.jpg);background-size: cover;"></div>
<div class="d1">
<p class="wz"><font alz></font>黑木耳烤鴨炒圓白菜</p>
<p class="wz1">鴨皮千張炒蘿蔔絲</p>
<p class="wz2">鉢仔糕</p>
</div>seo

<div class="c4" style="with:100%;height:80%;background-image:url(img/d.jpg);background-size: cover;"></div> <div class="c5" style="with:100%;height:80%;background-image:url(img/e.jpg);background-size: cover;"></div> <div class="c6" style="with:100%;height:80%;background-image:url(img/f.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/g.jpg);background-size: cover;"></div> <div class="c8" style="with:100%;height:80%;background-image:url(img/h.jpg);background-size: cover;"></div> <div class="c9" style="with:100%;height:80%;background-image:url(img/i.jpg);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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。