论坛

标题: 第三节网页制作 [打印本页]

作者: 水墨洛洛 时间: 2016-3-8 23:51
标题: 第三节网页制作
1、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title铛铛网</title>
<style type="text/css">
body,td,th {
font-family: "宋体";
font-size: 18px;
margin: 0px auto;
}
#box {
height: 2509px;
width: 1097px;
margin: 0px auto;
}
#box_1 {
height: 56px;
width: 1097px;
margin: 0px auto;
}
#box_2 {
height: 60px;
width: 1097px;
margin: 0px auto;
}
#box_3 {
height: 101px;
width: 1097px;
margin: 0px auto;
}
#box_4 {
float: left;
height: 1752px;
width: 301px;
}
#box_5 {
float: right;
height: 327px;
width: 246px;
}
#box_6 {
float: right;
height: 327px;
width: 541px;
}
#box_7 {
float: right;
height: 432px;
width: 787px;
}
#box_8 {
float: right;
height: 393px;
width: 787px;
}
#box_9 {
float: right;
height: 600px;
width: 787px;
}
#box_10 {
float: left;
height: 146px;
width: 1097px;
}
#box_12 {
float: left;
height: 125px;
width: 1097px;
}
#box_11 {
float: left;
height: 270px;
width: 1097px;
}
</style>
</head>
<body>
<div id="box">
<div id="box_1"><img src="图像/1.gif" width="1097" height="56" alt=""/></div>
<div id="box_2"><img src="图像/2.gif" width="1097" height="59" alt=""/></div>
<div id="box_3"><img src="图像/3.gif" alt="" width="1097" height="101" align="left"/></div>
<div id="box_4"><img src="图像/4.gif" width="310" height="729" alt=""/><img src="图像/8.gif" width="310" height="154" alt=""/><img src="图像/10.gif" width="310" height="269" alt=""/><img src="图像/11.gif" width="310" height="244" alt=""/><img src="图像/13.gif" width="310" height="356" alt=""/></div>
<div id="box_6"><img src="图像/6.gif" alt="" width="541" height="327" align="right"/></div>
<div id="box_5"><img src="图像/5.gif" alt="" width="246" height="327" align="right"/></div>
<div id="box_7"><img src="图像/7.gif" alt="" width="787" height="432"/></div>
<div id="box_8"><img src="图像/9.gif" width="787" height="393" alt=""/></div>
<div id="box_9"><img src="图像/12.gif" width="787" height="600" alt=""/></div>
<div id="box_10"><img src="图像/14.gif" width="1097" height="146" alt=""/></div>
<div id="box_11"><img src="图像/15.gif" width="1097" height="270" alt=""/></div>
<div id="box_12"><img src="图像/16.gif" width="1097" height="125" alt=""/></div>
</div>
</body>
</html>

2、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
<style type="text/css">
body,td,th {
font-family: "宋体";
font-size: 18px;
margin: 0px auto;
}
#box {
height: 1079px;
width: 1003px;
margin: 0px auto;
}
#box_1 {
height: 74px;
width: 1003px;
margin: 0px auto;
}
#box_2 {
height: 363px;
width: 1003px;
margin: 0px auto;
}
#box_3 {
float: left;
height: 543px;
width: 183px;
}
#box_4 {
float: left;
height: 543px;
width: 820px;
}
#box_5 {
float: left;
height: 31px;
width: 1003px;
}
#box_6 {
float: left;
height: 70px;
width: 1003px;
}
</style>
</head>

<body>
<div id="box">
<div id="box_1"><img src="图像/商务网站二级页面_01.gif" width="1003" height="73" alt=""/></div>
<div id="box_2"><img src="图像/商务网站二级页面_02.gif" width="1003" height="363" alt=""/></div>
<div id="box_3"><img src="图像/商务网站二级页面_03.gif" width="183" height="293" alt="导航区"/><img src="图像/商务网站二级页面_08_06.gif" width="177" height="229" alt=""/></div>
<div id="box_4"><img src="图像/商务网站二级页面_04.gif" width="820" height="542" alt=""/></div>
<div id="box_5"><img src="图像/商务网站二级页面_06.gif" width="1003" height="31" alt=""/></div>
<div id="box_6"><img src="图像/商务网站二级页面_07.gif" width="1003" height="70" alt=""/></div>
</div>
</body>
</html>

file:///E:/%E5%9B%BE%E7%89%87%E3%80%81%E9%A2%9C%E8%89%B2/%E7%AB%99%E7%82%B9/%E5%B8%83%E5%B1%80.html

作者: xm10421396 时间: 2016-3-9 17:55
代码写的还算整齐，注意图片边的黑条条可以切掉哦~~

欢迎光临论坛 (http://bbs.qinxue.com/)