论坛

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

作者: 筱奕Sar 时间: 2016-3-3 23:16
标题: 网页制作流程
这次的作业，感觉摸索了好久，看来还是要多注意细节的，还是有点不够好。。。这是我做的代码
<!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>dangdang</title>
<style type="text/css">
body {
font-family: DFLiKaiShu-Md, Fixedsys;
font-size: 18px;
margin: 0px auto;
}
#box {
margin: 0px auto;
height: 2503px;
width: 1095px;
}
#box-1 {
margin: 0px auto;
height: 58px;
width: 1095px;
}
#box-2 {
margin: 0px auto;
height: 57px;
width: 1095px;
}
#box-3 {
margin: 0px auto;
height: 103px;
width: 1095px;
}
#box-4 {
float: left;
height: 728px;
width: 307px;
}
#box-5 {
float: left;
height: 322px;
width: 788px;
}
#box-6 {
float: left;
height: 406px;
width: 788px;
}
#box-7 {
float: left;
height: 420px;
width: 307px;
}
#box-8 {
float: left;
height: 420px;
width: 788px;
}
#box-9 {
float: left;
height: 595px;
width: 307px;
}
#box-10 {
float: left;
height: 595px;
width: 788px;
}
#box-11 {
float: left;
height: 154px;
width: 1095px;
}
#box-12 {
float: left;
height: 265px;
width: 1095px;
}
#box-13 {
float: left;
height: 124px;
width: 1095px;
}
</style>
</head>

<body>
<div id="box">
<div id="box-1"><img src="images/标题1.gif" width="1095" height="58" /></div>
<div id="box-2"><img src="images/导航栏2.gif" width="1095" height="57" /></div>
<div id="box-3"><img src="images/搜索区3.gif" width="1095" height="103" /></div>
<div id="box-4"><img src="images/产品分类4.gif" width="307" height="728" /></div>
<div id="box-5"><img src="images/广告新区5.gif" width="788" height="322" /></div>
<div id="box-6"><img src="images/特供区6.gif" width="788" height="406" /></div>
<div id="box-7"><img src="images/推荐区7.gif" width="307" height="160" /><img src="images/广告区9.gif" width="307" height="259" /></div>
<div id="box-8"><img src="images/主编推荐区8.gif" width="788" height="419" /></div>
<div id="box-9"><img src="images/合作区10.gif" width="307" height="245" /><img src="images/广告区12.gif" width="307" height="350" /></div>
<div id="box-10"><img src="images/好评区11.gif" width="788" height="595" /></div>
<div id="box-11"><img src="images/广告区13.gif" width="1095" height="154" /></div>
<div id="box-12"><img src="images/售后区14.gif" width="1095" height="265" /></div>
<div id="box-13"><img src="images/版权区15.gif" width="1095" height="124" /></div>
</div>

</body>
</html>

作者: yuanxi52028 时间: 2016-3-4 16:55
代码没问题，用浏览器打开不变形，与效果图片一致就算是成功。

不过效果图片的黑边应该切掉，考验切片是否细心

图片命名最好别用中文，而且这种大尺寸图片可以不要用到gif格式，用jpg品质调到80。

作者: 筱奕Sar 时间: 2016-3-4 22:30

yuanxi52028 发表于 2016-3-4 16:55
代码没问题，用浏览器打开不变形，与效果图片一致就算是成功。

不过效果图片的黑边应该切掉，考验切片是否 ...

好的，谢谢，我会再注意一下细节的

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