快捷导航
发新帖
返回列表
1 481
电梯直达  跳转到指定楼层

[作业] 网页制作流程

代号0|中级会员 |勤币 544 |学币 0
发表于 2016-9-11 21:45 | 复制链接 | 打印 | 上一主题 | 下一主题
<!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 {
        height: 56px;
        width: 1097px;
        margin: 0px auto;
       
}
#box_2 {
        height: 59px;
        width: 1097px;
        margin: 0px auto;
       
}
#box_3 {
        height: 101px;
        width: 1097px;
        margin: 0px auto;
       
}
#box_4 {
        float: left;
        height: 729px;
        width: 310px;
}
#box_8 {
        float: left;
        height: 154px;
        width: 310px;
}
#box_10 {
        float: left;
        height: 269px;
        width: 310px;
}
#box_11 {
        float: left;
        height: 244px;
        width: 310px;
}
#box_13 {
        float: left;
        height: 356px;
        width: 310px;
}
#box_a {
        float: left;
        height: 752px;
        width: 310px;
}
#box_b {
        float: none;
        height: 1752px;
        width: 1097px;
        margin: 0px auto;
}
#box_5 {
        float: left;
        height: 327px;
        width: 246px;
}
#box_6 {
        float: left;
        height: 327px;
        width: 541px;
}
#box_7 {
        float: left;
        height: 432px;
        width: 787px;
}
#box_9 {
        float: right;
        height: 393px;
        width: 787px;
}
#box_12 {
        float: right;
        height: 600px;
        width: 787px;
}
#box_14 {
        height: 146px;
        width: 1097px;
        margin: 0px auto;
}
#box_15 {
        height: 270px;
        width: 1097px;
        margin: 0px auto;
}
#box_16 {
        height: 125px;
        width: 1097px;
        margin: 0px auto;
}
</style>
</head>
<body>
<div id="box_1"><img src="切片/11_16_01.gif" width="1097" height="56" /></div>
<div id="box_2"><img src="切片/11_16_02.gif" width="1097" height="59" /></div>
<div id="box_3"><img src="切片/11_16_03.gif" width="1097" height="101" /></div>
<div id="box_b">
<div id="box_a">
<div id="box_4"><img src="切片/11_16_04.gif" width="310" height="729" /></div>
<div id="box_8"><img src="切片/11_16_08.gif" width="310" height="154" /></div>
<div id="box_10"><img src="切片/11_16_10.gif" width="310" height="269" /></div>
<div id="box_11"><img src="切片/11_16_11.gif" width="310" height="244" /></div>
<div id="box_13"><img src="切片/11_16_13.gif" width="310" height="356" /></div>
</div>
<div id="box_5"><img src="切片/11_16_05.gif" width="246" height="327" /></div>
<div id="box_6"><img src="切片/11_16_06.gif" width="541" height="327" /></div>
<div id="box_7"><img src="切片/11_16_07.gif" width="787" height="432" /></div>
<div id="box_9"><img src="切片/11_16_09.gif" width="787" height="393" /></div>
<div id="box_12"><img src="切片/11_16_12.gif" width="787" height="600" /></div>
</div>
<div id="box_14"><img src="切片/11_16_14.gif" width="1097" height="146" /></div>
<div id="box_15"><img src="切片/11_16_15.gif" width="1097" height="270" /></div>
<div id="box_16"><img src="切片/11_16_16.gif" width="1097" height="125" /></div>
</body>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
| 回复

共1个回复 最后回复于 2016-9-12 19:00

勤币 18146   学币 398  
沙发
发表于 2016-9-12 19:00:07 | 只看该作者
基本的布局会了,实际设计中,切图还需要更细致,就是能用代码编写的,尽量不用图片。
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表