网页的制作流程

登录

这节课花了两天的时间，也真是太低产了~那么请老师和同学们来点评啦~~

首先是代码：
<!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>

下面是成品：

潜意式 · 发表于 2016-3-12 18:01:56

完成很不错，素材的处理也很细致，赞一个~

[作业] 网页的制作流程

本帖子中包含更多资源

共1个回复最后回复于 2016-3-12 18:01

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 网页的制作流程

本帖子中包含更多资源

共1个回复 最后回复于 2016-3-12 18:01

共1个回复最后回复于 2016-3-12 18:01