网页制作-CSDN博客

一.作业内容

马云链接：https://gitee.com/liguolan/codes/3jg9voqa58zf6kd4i7pxh78

模仿网页链接：http://127.0.0.1:8020/HBuilder2/6.html?__hbt=1553607616734

二.网页截图

三.源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合肥学校网站</title>
<style type="text/css">

.b {
padding-left: 115px;
height: 50px;
width: auto;
margin-top: 35px;
margin-left: 5px;
margin-right: 5px;
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

.tp {
height: 50px;
width: 98px;
float: left;
text-align: center;
}

.tp1 {
height: 40px;
width: 200px;
float: left;
padding-top: 10px;
text-align: center;
}

.b1 {
height: 34px;
width: 125px;
text-align: center;
padding-top: 16px;
padding-left: 10px;
float: left;
}

.b2 {
height: 34px;
width: 125px;
text-align: center;
padding-top: 16px;
float: left;
}

.bk2 {
height: 120px;
width: 1200px;
}
.bk3 {
width: 1200px;
margin-top: 15px;
}

.zb {
float: left;
height: 300px;
width: 265px;
padding-left: 115px;
}

.z1 {
height: 60px;
width: 265px;
margin-bottom: 10px;
float: left;
}

.z2 {
background-color: #744f30;
height: 30px;
line-height: 30px;
width: 230px;
float: left;
font-size: 18px;
color: #ffae00;
padding-left: 20px;
font-family: "微软雅黑";
}

.z3 {
background-image: url(images/xx.png);
font-size: 14px;
line-height: 30px;
color: #b9875e;
height: 26px;
width: 247px;
border: 1px solid #ffdbbb;
float: left;
text-align: center;
letter-spacing: 0.1em;
}

.z4 {
background-image: url(images/xx.png);
font-size: 14px;
line-height: 30px;
color: #b9875e;
height: 26px;
width: 247px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffdbbb;
border-right-color: #ffdbbb;
border-bottom-color: #ffdbbb;
border-left-color: #ffdbbb;
float: left;
text-align: center;
letter-spacing: 0.1em;
}

.yb {
float: left;
width: 710px;
}

.y1 {
background-image: url(images/ss.png);
height: 43px;
width: 703px;
float: left;
}

.y2 {
float: left;
/*height: 500px;*/
height: auto;
width: 693px;
margin-left: 10px;
}

.dtb {
height: 216px;
width: 201px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
border: 1px solid #ffdbbb;
text-align: center;
font-size: 15px;
color: #b9875e;
float: left;
font-family: "微软雅黑";
}

.dtb1 {
height: 216px;
width: 201px;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
border: 1px solid #ffdbbb;
text-align: center;
font-size: 15px;
color: #b9875e;
float: left;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div class="bk2">
<div class="b">
<div class="tp">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/bz.png" width="98" height="50" /></div>
<div class="tp1">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/bt.png" width="186" height="33" /></div>
<div class="b1">巴学园</div>
<div class="b2">亲子园</div>
<div class="b2">父母学堂</div>
<div class="b2">亲子俱乐部</div>
<div class="b2">新闻动态</div>
<div class="b2">联系我们</div>
</div>
</div>
<div >
<img src="http://www.5imoban.net/view/css&html/201408/3/images/sbj.png" width="1200" height="187" />
</div>
<div class="bk3">
<div class="zb">
<div class="z1">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/zb.png" width="250" height="60" /></div>
<div class="z2">亲子园 </div>
<div class="z3">园所风采</div>
<div class="z4">理念支撑</div>
<div class="z4">师资队伍</div>
<div class="z4">教师手记</div>
<div class="z4">交流互动</div>
</div>
<div class="y2">
<div class="dtb">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/tu1.png" width="180" height="159" /></div>
校园小博士
</div>
<div class="dtb">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/TU2.png" width="180" height="159" /></div>
校园食堂一瞥
</div>

<div class="dtb">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/TU3.png" width="180" height="159" /></div>
儿童休息室角落
</div>
<div class="dtb1">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/tu4.png" width="180" height="159" /></div>
儿童活动室
</div>
<div class="dtb1">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/tu5.png" width="180" height="159" /></div>
互动游戏室
</div>
<div class="dtb1">
<div class="ttt">
<img src="http://www.5imoban.net/view/css&html/201408/3/images/tu6.png" width="180" height="159" /></div>
未来规划图
</div>