论坛

标题: 网页的制作流程 [打印本页]

作者: 借问众神明    时间: 2016-3-11 21:54
标题: 网页的制作流程
这节课花了两天的时间,也真是太低产了~那么请老师和同学们来点评啦~~

首先是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family:"宋体";
font-size: 18px;
margin: 0px auto;
}
#box_1_1 {
float: left;
height: 1757px;
width: 308px;
}
#box_1 {
height: 58px;
width: 1097px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#box_2 {
height: 60px;
width: 1097px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#box_3 {
height: 101px;
width: 1097px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#box_4 {
float: left;
height: 737px;
width: 308px;
}
#box_8 {
float: left;
height: 153px;
width: 308px;
}
#box_9 {
float: left;
height: 392px;
width: 789px;
}
#box_10 {
float: left;
height: 260px;
width: 308px;
}
#box_11 {
float: left;
height: 613px;
width: 789px;
}
#box_12 {
float: left;
height: 246px;
width: 308px;
}
#box_13 {
float: left;
height: 360px;
width: 308px;
}
#box_14 {
float: left;
height: 124px;
width: 1097px;
}
#box_15 {
float: left;
height: 284px;
width: 1097px;
}
#box_16 {
float: left;
height: 126px;
width: 1097px;
}
#box_5 {
float: left;
height: 315px;
width: 242px;
}
#box_6 {
float: left;
height: 314px;
width: 547px;
}
#box_7 {
float: left;
height: 438px;
width: 789px;
}
#box_1_2 {
height: 2509px;
width: 1097px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
</head>
<body>
<div id="box_1_2">
<div id="box_1"><img src="images/11-1_01.gif" width="1097" height="58" /></div>
<div id="box_2"><img src="images/11-1_02.gif" width="1097" height="60" /></div>
<div id="box_3"><img src="images/11-1_03.gif" width="1097" height="101" /></div>
<div id="box_1_1">
<div id="box_4"><img src="images/11-1_04.gif" width="308" height="737" /></div>
<div id="box_8"><img src="images/11-1_08.gif" width="308" height="153" /></div>
<div id="box_10"><img src="images/11-1_10.gif" width="308" height="260" /></div>
<div id="box_12"><img src="images/11-1_12.gif" width="308" height="246" /></div>
<div id="box_13"><img src="images/11-1_13.gif" width="308" height="360" /></div>
</div>
<div id="box_5"><img src="images/11-1_05.gif" width="242" height="314" /></div>
<div id="box_6"><img src="images/11-1_06.gif" width="547" height="314" /></div>
<div id="box_7"><img src="images/11-1_07.gif" width="789" height="438" /></div>
<div id="box_9"><img src="images/11-1_09.gif" width="789" height="392" /></div>
<div id="box_11"><img src="images/11-1_11.gif" width="789" height="612" /></div>
<div id="box_14"><img src="images/11-1_14.gif" width="1097" height="124" /></div>
<div id="box_15"><img src="images/11-1_15.gif" width="1097" height="284" /></div>
<div id="box_16"><img src="images/11-1_16.gif" width="1097" height="126" /></div>
</div>
</body>
</html>

下面是成品:

[attach]42889[/attach]


作者: 潜意式    时间: 2016-3-12 18:01
完成很不错,素材的处理也很细致,赞一个~




欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1