《网站设计与制作》-项目4

４.１情境描述在建设网站的过程中，经常会遇到“选择什么样的网页布局方式”的问题，网页布局方式从早期的表格布局，演变到ＤＩＶ＋ＣＳＳ布局。由于过多使用表格布局会影响页面下载速度，本书中大部分页面采用ＤＩＶ＋ＣＳＳ布局方式，其中部分页面采用ＣＳＳ与表格相互交叉的布局方式。返回４.２项目实施任务１“健雄书屋”网站首页布局【任务需求】根据网站首页的Ｐｈｏｔｏｓｈｏｐ效果图，利用ＨＴＭＬ５和ＣＳＳ３在ＤｒｅａｍｗｅａｖｅｒＣＳ６软件中完成网站首页页面布局。【任务分析】在网页布局中利用ＨＴＭＬ５完成页面结构设计，利用ＣＳＳ３完成页面样式设计。下一页返回４.２项目实施【任务实现】“健雄书屋”网站首页布局的实现步骤如下。１.整体布局步骤１:文件夹及文件的创建。启动ＤｒｅａｍｗｅａｖｅｒＣＳ６，在站点文件夹下新建“ｃｓｓ”“ｂｏｏｋ”“ｉｍａｇｅｓ”和“ｊｓ”４个文件夹，在“ｂｏｏｋ”文件夹下再新建“ｉｍａｇｅｓ”文件夹(“ｃｓｓ”文件夹用来存储样式文件，“ｂｏｏｋ＼ｉｍａｇｅｓ”文件夹用来存储新书上架中的图书图像，“ｉｍａｇｅｓ”文件夹用来存储首页中除了新书上架图书图像外的所有图像，“ｊｓ”文件夹用来存储整个站点的所有ＪａｖａＳｃｒｉｐｔ脚本文件)及１个主页文件“ｉｎｄｅｘ.ｐｈｐ”，再在“ｃｓｓ”文件夹下新建“ｓｔｙｌｅ.ｃｓｓ”文件。上一页下一页返回４.２项目实施步骤２:分析页面的分块结构，形成ＨＴＭＬ组织结构。网站首页页面整体分为ｈｅａｄｅｒ(头部)、ｓｅｃｔｉｏｎ(内容)和ｆｏｏｔｅｒ(底部)三块，如图４－１所示。步骤３:书写三块区域的ＨＴＭＬ代码。打开“ｉｎｄｅｘ.ｐｈｐ”文件，进入代码区域，书写ＨＴＭＬ代码如下:

<!ｄｏｃｔｙｐｅｈｔｍｌ><ｈｔｍｌ><ｈｅａｄ><ｍｅｔａｃｈａｒｓｅｔ＝"ｕｔｆ－８">上一页下一页返回４.２项目实施<ｔｉｔｌｅ>健雄书屋欢迎您!</ｔｉｔｌｅ></ｈｅａｄ>

<ｂｏｄｙ><ｈｅａｄｅｒ><!－－头部区域－－></ｈｅａｄｅｒ><ｓｅｃｔｉｏｎ><!－－内容区域－－></ｓｅｃｔｉｏｎ><ｆｏｏｔｅｒ>上一页下一页返回４.２项目实施<!－－底部区域－－></ｆｏｏｔｅｒ></ｂｏｄｙ></ｈｔｍｌ>步骤４:编写三块区域的ＣＳＳ控制定位。打开“ｃｓｓ”文件夹下的“ｓｔｙｌｅ.ｃｓｓ”文件，书写ＣＳＳ代码，完成三块区域的大小及背景设置(其中背景色和高度在后续制作中将去除，在Ｐｈｏｔｏｓｈｏｐ中利用选区，在“信息”面板中查看各块的大小，查看时需要把单位设置为像素)。各区域大小如下:(１)ｈｅａｄｅｒ部分高:１６０ｐｘ①；上一页下一页返回４.２项目实施(２)ｓｅｃｔｉｏｎ部分高:１０８２ｐｘ；(３)ｆｏｏｔｅｒ部分高:２２２ｐｘ；(４)ｈｅａｄｅｒ与ｓｅｃｔｉｏｎ部分间距:１０ｐｘ；(５)ｓｅｃｔｉｏｎ与ｆｏｏｔｅｒ部分间距:１２ｐｘ。依据各大小书写后的ＣＳＳ代码如下:ｈｅａｄｅｒ{ｈｅｉｇｈｔ:１６０ｐｘ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；/∗用来设置与ｓｅｃｔｉｏｎ部分的间距∗/}上一页下一页返回４.２项目实施ｓｅｃｔｉｏｎ{ｈｅｉｇｈｔ:１０８２ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃３ＣＦ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１２ｐｘ；/∗用来设置与ｆｏｏｔｅｒ部分的间距∗/}ｆｏｏｔｅｒ{ｈｅｉｇｈｔ:２２２ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃ＦＣ０；}上一页下一页返回４.２项目实施步骤５:在“ｉｎｄｅｘ.ｐｈｐ”文件中将“ｓｔｙｌｅ.ｃｓｓ”文件以外部样式表的形式链接进来。①ｐｘ是ｐｉｘｅｌ的缩写，表示像素。网站设计与制作———ＨＴＭＬ５/ＣＳＳ３＋ｊＱｕｅｒｙ/ＰＨＰ/ＭｙＳＱＬ入样式表的“ｉｎｄｅｘ.ｐｈｐ”文件的效果如图４－２所示。其中三块区域的背景色是用来占据位置的，后续将在效果制作中去除。代码如下:

<ｈｅａｄ><ｍｅｔａｃｈａｒｓｅｔ＝"ｕｔｆ－８"><ｔｉｔｌｅ>健雄书屋欢迎您!</ｔｉｔｌｅ>上一页下一页返回４.２项目实施<ｌｉｎｋｈｒｅｆ＝"ｃｓｓ/ｓｔｙｌｅ.ｃｓｓ"ｒｅｌ＝"ｓｔｙｌｅｓｈｅｅｔ"ｔｙｐｅ＝"ｔｅｘｔ/ｃｓｓ"></ｈｅａｄ>步骤６:在浏览器中观察整体布局效果，发现网页的布局与浏览器窗体的上、下、左、右都有一段距离，其原因是各元素本身就具有内、外边距，为此，需要采用ＣＳＳ代码完成初始化清除边距工作。进入“ｓｔｇｌｅ.ｃｓｓ”代码文件，在ｈｅａｄｅｒ的上方加入代码，代码如下:∗{ｍａｒｇｉｎ:０ｐｘ；ｐａｄｄｉｎｇ:０ｐｘ；上一页下一页返回４.２项目实施

}ｈｅａｄｅｒ整体布局２.局部布局———ｈｅａｄｅｒ部分步骤１:ｈｅａｄｅｒ区域整体布局。依据ｐｈｏｔｏｓｈｏｐ效果图，ｈｅａｄｅｒ区域又分为三个区域，如图４－３所示。(１)头部区域划分的ＨＴＭＬ代码如下:

<ｈｅａｄｅｒ><!－－头部区域开始－－><ｄｉｖｉｄ＝"ｔｏｐｂａｒ"></ｄｉｖ><ｄｉｖｉｄ＝"ｓｅａｒｃｈｂａｒ"></ｄｉｖ>上一页下一页返回４.２项目实施<ｎａｖｉｄ＝"ｊｘｎａｖ"></ｎａｖ><!－－头部区域结束－－></ｈｅａｄｅｒ>(２)各区域大小如下:①ｔｏｐｂａｒ部分高:３０ｐｘ；②ｓｅａｒｃｈｂａｒ部分高:７０ｐｘ；③ｊｘｎａｖ部分高:６０ｐｘ。(３)由于三块区域分别添加了背景色，可以把ｈｅａｄｅｒ部分的背景色去除，将高度去除，ＣＳＳ代码如下:ｈｅａｄｅｒ{上一页下一页返回４.２项目实施ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；/∗用来设置与ｓｅｃｔｉｏｎ部分的间距∗/}ｈｅａｄｅｒ＃ｔｏｐｂａｒ{ｈｅｉｇｈｔ:３０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃ｆ０ｆ６ｆ６；}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ{ｈｅｉｇｈｔ:７０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃Ｃ６９；上一页下一页返回４.２项目实施}ｈｅａｄｅｒ＃ｊｘｎａｖ{ｈｅｉｇｈｔ:６０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃６Ｆ６；}(４)加入ＣＳＳ样式后的ｈｅａｄｅｒ区域整体布局效果如图４－４所示。步骤２:ｈｅａｄｅｒ区域局部布局———ｔｏｐｂａｒ部分布局。(１)由于内部的文字内容限定于一定范围内，为此，采用类名为“ｔｘｔｂｏｘ”的ｄｉｖ标签来进行限定，并输入文字内容。上一页下一页返回４.２项目实施代码如下:

<ｄｉｖｉｄ＝"ｔｏｐｂａｒ">

<ｄｉｖｃｌａｓｓ＝"ｔｘｔｂｏｘ">

<ｐ>您好，欢迎光临健雄书屋![<ａｈｒｅｆ＝"＃">登录</ａ><ｓｐａｎ>｜</ｓｐａｎ><ａｈｒｅｆ＝"＃">免费注册</ａ>]</ｐ>

<ｕｌ>

<ｌｉ>购物车总计:元</ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">去结算</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">我的订单<ｓｐａｎ>｜上一页下一页返回４.２项目实施</ｓｐａｎ></ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">我的书屋</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">网站导航</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">帮助中心</ａ><ｓｐａｎ>｜</ｓｐａｎ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">手机书屋</ａ><ｓｐａｎ>｜</ｓｐａｎ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">收藏书屋</ａ></ｌｉ>上一页下一页返回４.２项目实施

</ｕｌ>

</ｄｉｖ>

</ｄｉｖ>(２)在ＣＳＳ中书写代码设置整个网页默认字体大小为１２ｐｘ，字体为Ａｒｉａｌ、Ｈｅｌｖｅｔｉｃａ、ｓａｎｓ－ｓｅｒｉｆ、"宋体"；去除所有的ｕｌ标签的项目符号小圆点；为所有的超链接ａ标签设置无下划线，字体颜色为＃６ａ６ａ７８；鼠标划过超链接时有下划线。代码如下:

/∗公用部分初始化样式∗{上一页下一页返回４.２项目实施ｍａｒｇｉｎ:０ｐｘ；ｐａｄｄｉｎｇ:０ｐｘ；}ｂｏｄｙ{ｆｏｎｔ－ｆａｍｉｌｙ:Ａｒｉａｌ，Ｈｅｌｖｅｔｉｃａ，ｓａｎｓ－ｓｅｒｉｆ，"宋体"；ｆｏｎｔ－ｓｉｚｅ:１２ｐｘ；}ｕｌ{ｌｉｓｔ－ｓｔｙｌｅ:ｎｏｎｅ；/∗去除小圆点∗/上一页下一页返回４.２项目实施}ａ{ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｎｏｎｅ；/∗不加下划线∗/ｃｏｌｏｒ:＃６ａ６ａ７８；}ａ:ｈｏｖｅｒ{ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｕｎｄｅｒｌｉｎｅ；/∗鼠标划过时，加下划线∗/}(３)设置“ｔｏｐｂａｒ”的ｄｉｖ标签加１像素实心颜色为＃ｄｄｅ３ｅ３的下边框线。上一页下一页返回４.２项目实施设置“ｔｘｔｂｏｘ”的ｄｉｖ标签的宽度，文字限定在该范围内，并实现居中。代码如下:ｈｅａｄｅｒ＃ｔｏｐｂａｒ{ｈｅｉｇｈｔ:３０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃ｆ０ｆ６ｆ６；ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:１ｐｘｓｏｌｉｄ＃ｄｄｅ３ｅ３；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘ{ｗｉｄｔｈ:９８２ｐｘ；上一页下一页返回４.２项目实施ｍａｒｇｉｎ:０ａｕｔｏ；}(４)设置“ｔｘｔｂｏｘ”的ｄｉｖ标签内ｐ标签的内容位于左侧，ｕｌ标签的内容位于右侧，ｕｌ内文字水平排列，调整各ｌｉ的间距，使文字垂直居中。代码如下:ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘ{ｗｉｄｔｈ:９８２ｐｘ；ｍａｒｇｉｎ:０ａｕｔｏ；ｈｅｉｇｈｔ:３０ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:３０ｐｘ；/∗设置ｐ和ｕｌ标签内的文字均垂直居中:行高与高度相等∗/上一页下一页返回４.２项目实施}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｐ{ｆｌｏａｔ:ｌｅｆｔ；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌ{ｆｌｏａｔ:ｒｉｇｈｔ；ｗｉｄｔｈ:５２０ｐｘ；/∗不加此宽度，在设计模式下观察会比较乱∗/}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉ{上一页下一页返回４.２项目实施ｆｌｏａｔ:ｌｅｆｔ；ｐａｄｄｉｎｇ:０４ｐｘ；/∗调整各ｌｉ间左右间距∗/}(５)设置ｐ标签内字体颜色、登录与注册间的分隔符和超链接的颜色；设置ｕｌ、ｌｉ标签内超链接的样式，及菜单项间分隔符的样式。代码如下:ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｐ{ｆｌｏａｔ:ｌｅｆｔ；ｃｏｌｏｒ:＃ａ９ｂ５ｂ７；}上一页下一页返回４.２项目实施ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｐｓｐａｎ，.ｔｘｔｂｏｘｐａ{ｃｏｌｏｒ:＃１ｆ０６ｂ５；ｍａｒｇｉｎ:０３ｐｘ；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌ{

......}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉ{

......上一页下一页返回４.２项目实施}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉａ{ｃｏｌｏｒ:＃６ａ６ａ７８；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉｓｐａｎ{ｃｏｌｏｒ:＃ｄｄｅ３ｅ４；ｍａｒｇｉｎ－ｌｅｆｔ:４ｐｘ；ｆｏｎｔ－ｆａｍｉｌｙ:Ａｒｉａｌ；}上一页下一页返回４.２项目实施(６)在“我的书屋”“网站导航”后加入小图像；在“去结算”中加入蓝色背景图像，需在对应处加入类。ＨＴＭＬ代码如下:

<ｕｌ>

<ｌｉ>购物车总计:元</ｌｉ>

<ｌｉ

ｃｌａｓｓ＝"ｃａｓｈ"><ａｈｒｅｆ＝"＃">去结算</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">我的订单<ｓｐａｎ>｜</ｓｐａｎ></ａ></ｌｉ>上一页下一页返回４.２项目实施

<ｌｉｃｌａｓｓ＝"ｓｕｂｍｅｎｕ"><ａｈｒｅｆ＝"＃">我的书屋</ａ></ｌｉ>

<ｌｉｃｌａｓｓ＝"ｓｕｂｍｅｎｕ"><ａｈｒｅｆ＝"＃">网站导航</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">帮助中心</ａ><ｓｐａｎ>｜</ｓｐａｎ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">手机书屋</ａ><ｓｐａｎ>｜</ｓｐａｎ></ｌｉ>上一页下一页返回４.２项目实施

<ｌｉ><ａｈｒｅｆ＝"＃">收藏书屋</ａ></ｌｉ></ｕｌ>相应的ＣＳＳ代码如下:ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉｓｐａｎ{......}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉ.ｃａｓｈ{ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｂｌｕｅ＿ｂｔｎ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；上一页下一页返回４.２项目实施ｈｅｉｇｈｔ:１８ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:１８ｐｘ；/∗文字位于图片中间∗/ｍａｒｇｉｎ:７ｐｘ６ｐｘ０；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｕｌｌｉ.ｃａｓｈａ{ｃｏｌｏｒ:＃ｆｆｆ；}ｈｅａｄｅｒ＃ｔｏｐｂａｒ.ｔｘｔｂｏｘｌｉ.ｓｕｂｍｅｎｕ{ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｔｏｐ＿ｍｅｎｕ＿ｉｃｏｎ.ｇｉｆ)５２ｐｘ１０ｐｘｎｏ－ｒｅｐｅａｔ；上一页下一页返回４.２项目实施ｗｉｄｔｈ:６５ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:３０ｐｘ；}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ{......}步骤３:ｈｅａｄｅｒ区域局部布局———ｓｅａｒｃｈｂａｒ部分布局。(１)ｓｅａｒｃｈｂａｒ区域整体布局。其分为三块区域，如图４－５所示。对应的ＨＴＭＬ代码如下:上一页下一页返回４.２项目实施

<ｄｉｖｉｄ＝"ｓｅａｒｃｈｂａｒ"><ｄｉｖｃｌａｓｓ＝"ｌｏｇｏ"></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｓｅｒｖｉｃｅｂａｒ"></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｓｅａｒｃｈ"></ｄｉｖ><!－－ｓｅａｒｃｈｂａｒ结束－－></ｄｉｖ>(２)在ｓｅａｒｃｈ区域内加入表单、文本框及按钮，ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｓｅａｒｃｈ">上一页下一页返回４.２项目实施

<ｆｏｒｍｎａｍｅ＝"ｆｏｒｍ１"ｍｅｔｈｏｄ＝"ｐｏｓｔ"ａｃｔｉｏｎ＝"">

<ｓｅｌｅｃｔｎａｍｅ＝"ｓｅａｒｃｈｉｔｅｍ"ｉｄ＝"ｓｅａｒｃｈｉｔｅｍ"ｃｌａｓｓ＝"ｓｅａｒｃｈｓｅｌｅｃｔ">

<ｏｐｔｉｏｎｖａｌｕｅ＝"ｂｎａｍｅ">书名</ｏｐｔｉｏｎ>

<ｏｐｔｉｏｎｖａｌｕｅ＝"ｂｉｓｂｎ">ＩＳＢＮ</ｏｐｔｉｏｎ>上一页下一页返回４.２项目实施

<ｏｐｔｉｏｎｖａｌｕｅ＝"ｂｐｒｅｓｓ">出版社</ｏｐｔｉｏｎ>

<ｏｐｔｉｏｎｖａｌｕｅ＝"ｂａｕｔｈｏｒ">作者</ｏｐｔｉｏｎ>

</ｓｅｌｅｃｔ>

<ｉｎｐｕｔｔｙｐｅ＝"ｔｅｘｔ"ｎａｍｅ＝"ｔｅｘｔｆｉｅｌｄ"ｉｄ＝"ｔｅｘｔｆｉｅｌｄ"ｃｌａｓｓ＝"ｓｅａｒｃｈｉｎｐｕｔ">

<ｉｎｐｕｔｔｙｐｅ＝"ｓｕｂｍｉｔ"ｖａｌｕｅ＝""ｃｌａｓｓ＝"ｓｅａｒｃｈｂｔｎ">上一页下一页返回４.２项目实施

</ｆｏｒｍ></ｄｉｖ>(３)删除ｓｅａｒｃｈｂａｒ区域的背景颜色，设置该区域的宽度为９８２ｐｘ，设置其在窗体中水平居中；为ｌｏｇｏ、ｓｅｒｖｉｃｅｂａｒ、ｓｅａｒｃｈ类以及子类类标签加入背景图，并设置位置，ＣＳＳ代码如下:ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ{ｈｅｉｇｈｔ:７０ｐｘ；ｗｉｄｔｈ:９８２ｐｘ；/∗要使ｍａｒｇｉｎ:０ａｕｔｏ；起作用，必须加入宽度值∗/ｍａｒｇｉｎ:０ａｕｔｏ；上一页下一页返回４.２项目实施}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ.ｌｏｇｏ{ｗｉｄｔｈ:２０３ｐｘ；ｈｅｉｇｈｔ:７０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｌｏｇｏ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；ｆｌｏａｔ:ｌｅｆｔ；ｍａｒｇｉｎ－ｌｅｆｔ:２０ｐｘ；}上一页下一页返回４.２项目实施ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ.ｓｅｒｖｉｃｅｂａｒ{ｗｉｄｔｈ:２１４ｐｘ；ｈｅｉｇｈｔ:４４ｐｘ；ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｔｏｐ＿ｓｅｒ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；ｆｌｏａｔ:ｌｅｆｔ；ｍａｒｇｉｎ:２０ｐｘ００３０ｐｘ；}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ.ｓｅａｒｃｈ{ｆｌｏａｔ:ｒｉｇｈｔ；上一页下一页返回４.２项目实施ｍａｒｇｉｎ－ｔｏｐ:３０ｐｘ；ｐｏｓｉｔｉｏｎ:ｒｅｌａｔｉｖｅ；/∗ｓｅａｒｃｈｓｅｌｅｃｔ类根据该类的位置进行定位∗/}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ.ｓｅａｒｃｈ.ｓｅａｒｃｈｉｎｐｕｔ{/∗设置文本框样式∗/ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｓｅａｒｃｈ＿ｉｎｐｕｔ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；ｗｉｄｔｈ:２９３ｐｘ；ｈｅｉｇｈｔ:３１ｐｘ；上一页下一页返回４.２项目实施ｂｏｒｄｅｒ:ｎｏｎｅ；ｆｌｏａｔ:ｌｅｆｔ；}.ｓｅａｒｃｈｓｅｌｅｃｔ{ｐｏｓｉｔｉｏｎ:ａｂｓｏｌｕｔｅ；ｔｏｐ:５ｐｘ；ｌｅｆｔ:２３０ｐｘ；}ｈｅａｄｅｒ＃ｓｅａｒｃｈｂａｒ.ｓｅａｒｃｈ.ｓｅａｒｃｈｂｔｎ{上一页下一页返回４.２项目实施ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｓｅａｒｃｈ＿ｂｔｎ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；ｗｉｄｔｈ:８３ｐｘ；ｈｅｉｇｈｔ:３１ｐｘ；ｆｌｏａｔ:ｌｅｆｔ；ｂｏｒｄｅｒ:ｎｏｎｅ；}步骤４:ｈｅａｄｅｒ区域局部布局———导航栏ｊｘｎａｖ部分布局。上一页下一页返回４.２项目实施(１)ｊｘｎａｖ区域整体布局。其分为上、下两块区域，对应的ＨＴＭＬ代码如下:

<ｎａｖｉｄ＝"ｊｘｎａｖ"><ｄｉｖｃｌａｓｓ＝"ｆｉｒｓｔｎａｖ"></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｓｅｃｏｎｄｎａｖ"></ｄｉｖ></ｎａｖ>(２)去除ｊｘｎａｖ原来设置的高度和占位时的背景色，加入宽度，并设置其在窗体中水平居中；为主导航区ｆｉｒｓｔｎａｖ和副导航区ｓｅｃｏｎｄｎａｖ加入背景图，ＣＳＳ代码如下:ｈｅａｄｅｒ＃ｊｘｎａｖ{上一页下一页返回４.２项目实施ｗｉｄｔｈ:９８２ｐｘ；ｍａｒｇｉｎ:０ａｕｔｏ；}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｆｉｒｓｔｎａｖ{ｈｅｉｇｈｔ:３８ｐｘ；ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｎａｖ＿ｂｇ.ｇｉｆ)００ｒｅｐｅａｔ－ｘ；}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｓｅｃｏｎｄｎａｖ{ｈｅｉｇｈｔ:２６ｐｘ；/∗高度为给出的背景图的一半∗/上一页下一页返回４.２项目实施ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｋｅｙｗｏｒｄｓ＿ｂｇ.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；}(３)为主导航区ｆｉｒｓｔｎａｖ和副导航区ｓｅｃｏｎｄｎａｖ加入文字内容，ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｆｉｒｓｔｎａｖ"><ｕｌ>

<ｌｉ><ａｈｒｅｆ＝"＃">首页</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">特卖场</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">电子书</ａ></ｌｉ>上一页下一页返回４.２项目实施

<ｌｉ><ａｈｒｅｆ＝"＃">最新特价</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">原创文学</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">特价精选</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">１０元包邮区</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">最新图书</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">限时抢</ａ></ｌｉ>

</ｕｌ></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｓｅｃｏｎｄｎａｖ">上一页下一页返回４.２项目实施

<ｕｌ>

<ｌｉ><ａｈｒｅｆ＝"＃">文学</ａ>｜<ａｈｒｅｆ＝"＃">小说</ａ>｜<ａｈｒｅｆ＝"＃">传记</ａ>｜<ａｈｒｅｆ＝"＃">青春文学</ａ>｜<ａｈｒｅｆ＝"＃">艺术</ａ>｜<ａｈｒｅｆ＝"＃">散文随笔</ａ>｜<ａｈｒｅｆ＝"＃">人文社科</ａ>｜<ａｈｒｅｆ＝"＃">经济管理</ａ>｜<ａｈｒｅｆ＝"＃">生活时尚</ａ>｜<ａｈｒｅｆ＝"＃">教育/教材</ａ>｜<ａｈｒｅｆ＝"＃">考试</ａ>｜<ａ上一页下一页返回４.２项目实施ｈｒｅｆ＝"＃">少儿/儿童</ａ>｜<ａｈｒｅｆ＝"＃">收藏/鉴赏</ａ>｜<ａｈｒｅｆ＝"＃">哲学宗教</ａ>｜<ａｈｒｅｆ＝"＃">保健</ａ></ｌｉ>

</ｕｌ></ｄｉｖ>(４)分别设置两个区域的字体、位置，ＣＳＳ代码如下:ｈｅａｄｅｒ＃ｊｘｎａｖ.ｆｉｒｓｔｎａｖ{......}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｆｉｒｓｔｎａｖｕｌｌｉ{ｆｌｏａｔ:ｌｅｆｔ；上一页下一页返回４.２项目实施ｍａｒｇｉｎ－ｌｅｆｔ:３０ｐｘ；}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｆｉｒｓｔｎａｖｕｌｌｉａ{ｆｏｎｔ－ｓｉｚｅ:１４ｐｘ；ｃｏｌｏｒ:＃ｆｆｆ；ｆｏｎｔ－ｗｅｉｇｈｔ:ｂｏｌｄ；ｌｉｎｅ－ｈｅｉｇｈｔ:３８ｐｘ；}上一页下一页返回４.２项目实施ｈｅａｄｅｒ＃ｊｘｎａｖ.ｓｅｃｏｎｄｎａｖ{......}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｓｅｃｏｎｄｎａｖｕｌｌｉ{ｐａｄｄｉｎｇ－ｌｅｆｔ:３０ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:２６ｐｘ；ｃｏｌｏｒ:＃ｄ４ｄ４ｄ８；}ｈｅａｄｅｒ＃ｊｘｎａｖ.ｓｅｃｏｎｄｎａｖｕｌｌｉａ{ｐａｄｄｉｎｇ:０８ｐｘ；上一页下一页返回４.２项目实施ｃｏｌｏｒ:＃６６６；}至此，ｈｅａｄｅｒ区域布局完成。３.局部布局———ｓｅｃｔｉｏｎ部分步骤１:ｓｅｃｔｉｏｎ区域整体布局。ｓｅｃｔｉｏｎ区域又分为三个区域，如图４－６所示。(１)ｓｅｃｔｉｏｎ区域划分的ＨＴＭＬ代码如下:

<ｓｅｃｔｉｏｎ><!－－内容区域开始－－>上一页下一页返回４.２项目实施

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ"></ｄｉｖ>

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ"></ｄｉｖ>

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ"></ｄｉｖ>

<!－－内容区域结束－－></ｓｅｃｔｉｏｎ>上一页下一页返回４.２项目实施(２)各区域大小如下:①ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ部分高:１９０ｐｘ；②ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ部分高:４４８ｐｘ；③ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ部分高:４２４ｐｘ；④两部分间的间距:１０ｐｘ。(３)由于对三块区域分别加了背景色并设置了高度，去除ｓｅｃｔｉｏｎ部分的高度值和背景色，加入宽度，并设置其水平居中；设置划分的三部分的大小并用背景色来占位。ＣＳＳ代码如下:ｓｅｃｔｉｏｎ{上一页下一页返回４.２项目实施ｗｉｄｔｈ:９８２ｐｘ；ｍａｒｇｉｎ:０ａｕｔｏ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１２ｐｘ；/∗用来设置与ｆｏｏｔｅｒ部分的间距∗/

}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ{ｈｅｉｇｈｔ:１９０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃ＣＣＣ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；上一页下一页返回４.２项目实施}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ{ｈｅｉｇｈｔ:４４８ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃６ＣＦ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ{ｈｅｉｇｈｔ:４２４ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃９６Ｆ；上一页下一页返回４.２项目实施}(４)加入ＣＳＳ样式后的ｓｅｃｔｉｏｎ区域整体布局效果如图４－７所示。步骤２:ｓｅｃｔｉｏｎ区域局部布局———ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ部分布局。(１)ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ区域整体布局。其分为两块区域，如图４－８所示。ｂｏｏｋ＿ｐｉｃ区域加入图片，用来完成后续轮番滚动效果。对应的ＨＴＭＬ代码如下:

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ"><ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｐｉｃ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ａｄ＿１.ｐｎｇ"></ｄｉｖ>上一页下一页返回４.２项目实施<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｎｏｔｉｃｅ"></ｄｉｖ></ｄｉｖ>(２)去除ｃｏｎｔｅｎｔｎｏｃｉｃｅ部分的高度和背景色；设置ｂｏｏｋｐｉｃ部分左浮动；设置右侧ｂｏｏｋｎｏｔｉｃｅ的宽、高及背景色，右浮动，ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ{ｈｅｉｇｈｔ:１９０ｐｘ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；}上一页下一页返回４.２项目实施ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ.ｂｏｏｋ＿ｐｉｃ{ｆｌｏａｔ:ｌｅｆｔ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ.ｂｏｏｋ＿ｎｏｔｉｃｅ{ｗｉｄｔｈ:２２０ｐｘ；ｈｅｉｇｈｔ:１９０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃Ｆ９６；ｆｌｏａｔ:ｒｉｇｈｔ；上一页下一页返回４.２项目实施}(３)在ｂｏｏｋ＿ｎｏｔｉｃｅ部分加入相应的内容，ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｎｏｔｉｃｅ"><ｈ２>最新动态</ｈ２><ｕｌ>

<ｌｉ><ａｈｒｅｆ＝"＃">客服中心防诈骗重要提示</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">３０万图书满３００减１００</ａ></ｌｉ>上一页下一页返回４.２项目实施

<ｌｉ><ａｈｒｅｆ＝"＃">货到付款业务暂停通知</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">健雄书屋运费调整通知</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">健雄书屋举办读书之星活动</ａ></ｌｉ>

<ｌｉ><ａｈｒｅｆ＝"＃">电子书直降４０％</ａ></ｌｉ>

</ｕｌ>

</ｄｉｖ>上一页下一页返回４.２项目实施(４)去除ｂｏｏｋ＿ｎｏｔｉｃｅ占位的背景色，添加１ｐｘ实心＃ｅ２ｅ２ｅ２色边框，设置ｂｏｏｋ＿ｎｏｔｉｃｅ内ｈ２标题及ｕｌ、ｌｉ样式，ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｏｔｉｃｅ.ｂｏｏｋ＿ｎｏｔｉｃｅ{ｗｉｄｔｈ:２２０ｐｘ；ｈｅｉｇｈｔ:１９０ｐｘ；ｆｌｏａｔ:ｒｉｇｈｔ；

上一页下一页返回４.２项目实施ｍａｒｇｉｎ:０１０ｐｘ；}步骤３:ｓｅｃｔｉｏｎ区域局部布局———ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ部分布局。(１)ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ区域整体布局。其分为左、右两块区域。对应的ＨＴＭＬ代码如下:

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ"><ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｅｄｉｔｏｒ"></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｎｅｗ"></ｄｉｖ></ｄｉｖ>上一页下一页返回４.２项目实施(２)去除ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ占位的背景色，设置ｂｏｏｋ＿ｅｄｉｔｏｒ、ｂｏｏｋ＿ｎｅｗ两块区域对应的大小及占位背景，对应的ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ{ｈｅｉｇｈｔ:４４８ｐｘ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒ{ｈｅｉｇｈｔ:４４８ｐｘ；上一页下一页返回４.２项目实施ｗｉｄｔｈ:２５８ｐｘ；ｆｌｏａｔ:ｌｅｆｔ；ｂａｃｋｇｒｏｕｎｄ:＃Ｃ９０；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗ{ｈｅｉｇｈｔ:４４８ｐｘ；ｗｉｄｔｈ:７１２ｐｘ；ｆｌｏａｔ:ｒｉｇｈｔ；ｂａｃｋｇｒｏｕｎｄ:＃０Ｃ９；上一页下一页返回４.２项目实施}(３)ｂｏｏｋ＿ｅｄｉｔｏｒ区域布局。①在ｂｏｏｋ＿ｅｄｉｔｏｒ区域内加入文字内容，对应的ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｅｄｉｔｏｒ">

<ｐｃｌａｓｓ＝"ｔｉｔｌｅ">编辑推荐</ｐ>

<ｕｌ>

<ｌｉ><ａｈｒｅｆ＝"＃"><ｓｐａｎ>１</ｓｐａｎ><ｅｍ>二十四节气养生经</ｅｍ>上一页下一页返回４.２项目实施

<ｄｉｖ><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｉｃｏｎ－１.ｊｐｇ"ａｌｔ＝"二十四节气养生经"/>

<ｐ>现价:￥１７.５原价:￥３５.００</ｐ></ｄｉｖ></ａ>

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>２</ｓｐａｎ><ｅｍ>咬牙坚持，你终将成就无与伦比自己</ｅｍ></ａ>上一页下一页返回４.２项目实施

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>３</ｓｐａｎ><ｅｍ>学会自己长大</ｅｍ></ａ>

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>４</ｓｐａｎ><ｅｍ>新媒体营销圣经</ｅｍ></ａ>

</ｌｉ>

<ｌｉ>上一页下一页返回４.２项目实施

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>５</ｓｐａｎ><ｅｍ>华为工作法</ｅｍ></ａ>

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>６</ｓｐａｎ><ｅｍ>股市天经</ｅｍ></ａ>

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>７</ｓｐａｎ><ｅｍ>为什么有钱人都用长钱包</ｅｍ></ａ>上一页下一页返回４.２项目实施

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>８</ｓｐａｎ><ｅｍ>谁偷走了我的客户</ｅｍ></ａ>

</ｌｉ>

<ｌｉ>

<ａｈｒｅｆ＝"＃"><ｓｐａｎ>９</ｓｐａｎ><ｅｍ>迪士尼大电影双语阅读海底总动员</ｅｍ></ａ>

</ｌｉ>上一页下一页返回４.２项目实施

</ｕｌ></ｄｉｖ>②去除ｂｏｏｋ＿ｅｄｉｔｏｒ占位的背景色，加入１ｐｘ实心＃ｅ２ｅ２ｅ２边框；设置“编辑推荐”处的字体样式，加下边框；设置ｕｌ、ｌｉ标签及其内容的样式，ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒ{ｈｅｉｇｈｔ:４４６ｐｘ；/∗因边框占据了２像素，所以大小为４４８－２，此高度值也可去除∗/ｗｉｄｔｈ:２５８ｐｘ；上一页下一页返回４.２项目实施ｂｏｒｄｅｒ:１ｐｘｓｏｌｉｄ＃ｅ２ｅ２ｅ２；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒ.ｔｉｔｌｅ{ｆｏｎｔ:１６ｐｘ"ＭｉｃｒｏｓｏｆｔＹａｈｅｉ"；ｆｏｎｔ－ｗｅｉｇｈｔ:ｂｏｌｄ；ｃｏｌｏｒ:＃３３９；ｈｅｉｇｈｔ:３５ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:３５ｐｘ；上一页下一页返回４.２项目实施ｐａｄｄｉｎｇ－ｌｅｆｔ:１０ｐｘ；ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:１ｐｘｓｏｌｉｄ＃ｅ２ｅ２ｅ２；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒｕｌｌｉ{ｌｉｎｅ－ｈｅｉｇｈｔ:２５ｐｘ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒｕｌｌｉａｓｐａｎ{上一页下一页返回４.２项目实施ｐａｄｄｉｎｇ:０１０ｐｘ；ｄｉｓｐｌａｙ:ｂｌｏｃｋ；/∗必须将行标签转换为块标签，才能加上背景图，加上后导致书名称换行，所以需左浮动∗/ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｄｏｔ＿０１.ｇｉｆ)００ｎｏ－ｒｅｐｅａｔ；ｆｌｏａｔ:ｌｅｆｔ；ｃｏｌｏｒ:＃ｆｆｆ；上一页下一页返回４.２项目实施}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒｕｌｌｉｄｉｖ{ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ；/∗图片和文字水平居中∗/}(４)ｂｏｏｋ＿ｎｅｗ区域布局。①在ｂｏｏｋ＿ｎｅｗ区域内加入文字内容，对应的ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｎｅｗ">上一页下一页返回４.２项目实施

<ｐｃｌａｓｓ＝"ｔｉｔｌｅ">新书上架</ｐ><ｓｐａｎｃｌａｓｓ＝"ｍｏｒｅｂｏｏｋ"><ａｈｒｅｆ＝"＃">更多新书</ａ></ｓｐａｎ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０１.ｐｎｇ"ａｌｔ＝"Ｊａｖａ核心技术卷２"/></ａ></ｄｔ>

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">Ｊａｖａ核心技术卷２</ａ></ｐ>上一页下一页返回４.２项目实施ＣａｙＳ.Ｈｏｒｓｔｍａｎｎ著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥３９.８０</ｓｐａｎ><ｓｐａｎ>￥２４.８０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０２.ｐｎｇ"ａｌｔ＝"互联网思维"/></ａ></ｄｔ>

<ｄｄ>上一页下一页返回４.２项目实施

<ｐ><ａｈｒｅｆ＝"＃">互联网思维</ａ></ｐ>陈杰著<ｂｒ>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥３８</ｓｐａｎ><ｓｐａｎ>￥２３.８０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０３.ｐｎｇ"ａｌｔ＝"马云创业启示录"ｗｉｄｔｈ＝"１２０ｐｘ"ｈｅｉｇｈｔ＝"１２０ｐｘ"/></ａ></ｄｔ>上一页下一页返回４.２项目实施

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">马云创业启示录</ａ></ｐ>朱乘尧著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥２７.００</ｓｐａｎ><ｓｐａｎ>￥２０.２０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>上一页下一页返回４.２项目实施

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０４.ｐｎｇ"ａｌｔ＝"电子商务网页设计"ｗｉｄｔｈ＝"１２０ｐｘ"ｈｅｉｇｈｔ＝"１２０ｐｘ"/></ａ></ｄｔ>

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">电子商务网页设计</ａ></ｐ>安妮宝贝著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥２９.００</ｓｐａｎ><ｓｐａｎ>￥２２.８０</ｓｐａｎ>上一页下一页返回４.２项目实施

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０５.ｐｎｇ"ａｌｔ＝"计算机等级考试"ｗｉｄｔｈ＝"１２０ｐｘ"ｈｅｉｇｈｔ＝"１２０ｐｘ"/></ａ></ｄｔ>

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">计算机等级考试</ａ></ｐ>上一页下一页返回４.２项目实施安妮宝贝著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥１６.００</ｓｐａｎ><ｓｐａｎ>￥９.８０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０６.ｐｎｇ"ａｌｔ＝"且以永安"/></ａ></ｄｔ>

<ｄｄ>上一页下一页返回４.２项目实施

<ｐ><ａｈｒｅｆ＝"＃">自动控制原理.</ａ></ｐ>唐山宇著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥３５.００</ｓｐａｎ><ｓｐａｎ>￥２６</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０７.ｐｎｇ"ａｌｔ＝"电子基础"/></ａ></ｄｔ>上一页下一页返回４.２项目实施

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">快速改善课堂纪律</ａ></ｐ>陆荣著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥３６.００</ｓｐａｎ><ｓｐａｎ>￥２４.８０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>上一页下一页返回４.２项目实施

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０８.ｐｎｇ"ａｌｔ＝"且以永安"/></ａ></ｄｔ>

<ｄｄ>

<ｐ><ａｈｒｅｆ＝"＃">Ｃ＋＋教程</ａ></ｐ>郑莉，李宁著<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">:￥３６.００</ｓｐａｎ><ｓｐａｎ>￥２４.８０</ｓｐａｎ>

</ｄｄ>上一页下一页返回４.２项目实施

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿０９.ｐｎｇ"ａｌｔ＝"且以永安"/></ａ></ｄｔ>

<ｄｄ>

<ａｈｒｅｆ＝"＃"><ｐ>鬼吹灯</ｐ></ａ>张敏，周敢飞著<ｂｒ/>上一页下一页返回４.２项目实施

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥３６.００</ｓｐａｎ><ｓｐａｎ>￥２４.８０</ｓｐａｎ>

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ><ａｈｒｅｆ＝"＃"><ｉｍｇｓｒｃ＝"ｂｏｏｋ/ｉｍａｇｅｓ/ｎｂ＿１０.ｐｎｇ"ａｌｔ＝"祖传救命老偏方"/></ａ></ｄｔ>

<ｄｄ>上一页下一页返回４.２项目实施

<ｐ><ａｈｒｅｆ＝"＃">祖传救命老偏方</ａ></ｐ>吴晓青编<ｂｒ/>

<ｓｐａｎｃｌａｓｓ＝"ｏｌｄ－ｐｒｉｃｅ">￥２８.００</ｓｐａｎ><ｓｐａｎ>￥１７.５０</ｓｐａｎ>

</ｄｄ>

</ｄｌ></ｄｉｖ>②去除ｂｏｏｋ＿ｎｅｗ的占位背景，加入１ｐｘ实心＃ｅ２ｅ２ｅ２边框，调整其高度值；上一页下一页返回４.２项目实施设置“新书上架”处的字体样式(由于样式与“编辑推荐”的样式完全相同，为此，两者共用一个样式)；设置ｄｌ、ｄｔ、ｄｄ标签及其内容、超链接的样式；设置“更多图书”的样式，ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗ{ｈｅｉｇｈｔ:４４６ｐｘ；/∗因加了上、下两像素的边框，在原高度值４４８ｐｘ上减去２像素∗/ｗｉｄｔｈ:７１２ｐｘ；ｆｌｏａｔ:ｒｉｇｈｔ；上一页下一页返回４.２项目实施ｂｏｒｄｅｒ:１ｐｘｓｏｌｉｄ＃ｅ２ｅ２ｅ２；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｅｄｉｔｏｒ.ｔｉｔｌｅ，ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗ.ｔｉｔｌｅ{ｆｏｎｔ:１６ｐｘ"ＭｉｃｒｏｓｏｆｔＹａｈｅｉ"；ｆｏｎｔ－ｗｅｉｇｈｔ:ｂｏｌｄ；ｃｏｌｏｒ:＃３３９；ｈｅｉｇｈｔ:３５ｐｘ；上一页下一页返回４.２项目实施ｌｉｎｅ－ｈｅｉｇｈｔ:３５ｐｘ；ｐａｄｄｉｎｇ－ｌｅｆｔ:１０ｐｘ；ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:１ｐｘｓｏｌｉｄ＃ｅ２ｅ２ｅ２；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌ{ｆｌｏａｔ:ｌｅｆｔ；ｗｉｄｔｈ:１３０ｐｘ；ｍａｒｇｉｎ:０ｐｘ５ｐｘ１０ｐｘ５ｐｘ；上一页下一页返回４.２项目实施}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌｄｔ{ｍａｒｇｉｎ－ｔｏｐ:５ｐｘ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌｄｄ{ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ；ｗｉｄｔｈ:１３０ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ:２０ｐｘ；上一页下一页返回４.２项目实施ｍａｒｇｉｎ－ｔｏｐ:２ｐｘ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌｄｄｓｐａｎ{ｃｏｌｏｒ:＃Ｄ９００００；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌｄｄａ{ｃｏｌｏｒ:＃０Ｄ５Ｂ９５；上一页下一页返回４.２项目实施}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｄｌｄｄａ:ｈｏｖｅｒ{ｃｏｌｏｒ:＃０Ｄ５Ｂ９５；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｎｅｗｂｏｏｋ.ｂｏｏｋ＿ｎｅｗｓｐａｎ.ｍｏｒｅｂｏｏｋ{ｄｉｓｐｌａｙ:ｂｌｏｃｋ；ｍａｒｇｉｎ:－２５ｐｘ０ｐｘ１５ｐｘ６００ｐｘ；ｆｏｎｔ:１４ｐｘ"ＭｉｃｒｏｓｏｆｔＹａｈｅｉ"；上一页下一页返回４.２项目实施ｆｏｎｔ－ｗｅｉｇｈｔ:ｂｏｌｄ；ｃｏｌｏｒ:＃３３９；}③预览效果，在其他浏览器中没有问题，但在ＩＥ浏览器中发现加入超链接后的图片出现了边框，为了在各类浏览器中实现一致效果，在公用初始化样式中设置超链接后的图像无边框，代码如下:

/∗公用部分初始化样式∗/∗{......}上一页下一页返回４.２项目实施......ａ:ｈｏｖｅｒ{ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｕｎｄｅｒｌｉｎｅ；}ａｉｍｇ{ｂｏｒｄｅｒ:ｎｏｎｅ；/∗去除超链接图像的边框∗/}步骤４:ｓｅｃｔｉｏｎ区域局部布局———ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ部分布局。上一页下一页返回４.２项目实施(１)ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ区域整体布局。其分为左、右两块区域，其中右侧区域又可分为上、下两块区域，如图４－９所示。对应的ＨＴＭＬ代码如下:

<ｄｉｖｉｄ＝"ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ">

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｓｏｒｔ"></ｄｉｖ>

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ"><!－－下面又分为上、下两个区域－－>

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｓｐｅｃ"></ｄｉｖ>

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ａｕｔｈｏｒ"></ｄｉｖ>上一页下一页返回４.２项目实施

</ｄｉｖ>

</ｄｉｖ>(２)去除ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ占位的背景色；设置ｂｏｏｋ＿ｓｏｒｔ、ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ两块区域对应的大小及占位背景；设置ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ内两块区域的大小及占位背景，对应的ＣＳＳ代码如下:ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ{ｈｅｉｇｈｔ:４２４ｐｘ；}上一页下一页返回４.２项目实施ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ.ｂｏｏｋ＿ｓｏｒｔ{ｈｅｉｇｈｔ:４２４ｐｘ；ｗｉｄｔｈ:２５８ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃９Ｃ６；ｆｌｏａｔ:ｌｅｆｔ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ.ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ{ｈｅｉｇｈｔ:４２４ｐｘ；上一页下一页返回４.２项目实施ｗｉｄｔｈ:７１２ｐｘ；ｆｌｏａｔ:ｒｉｇｈｔ；}ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ.ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ.ｂｏｏｋ＿ｓｐｅｃ{ｈｅｉｇｈｔ:２５０ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃６９Ｃ；ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ；}上一页下一页返回４.２项目实施ｓｅｃｔｉｏｎ＃ｃｏｎｔｅｎｔ＿ｓｐｅｃｂｏｏｋ.ｂｏｏｋ＿ｓｐｅｃ＿ａｕｔｈｏｒ.ｂｏｏｋ＿ａｕｔｈｏｒ{ｈｅｉｇｈｔ:１６４ｐｘ；ｂａｃｋｇｒｏｕｎｄ:＃９ＦＦ；}(３)ｂｏｏｋ＿ｓｏｒｔ区域布局。①在ｂｏｏｋ＿ｓｏｒｔ区域内加入文字内容，对应的ＨＴＭＬ代码如下:

<ｄｉｖｃｌａｓｓ＝"ｂｏｏｋ＿ｓｏｒｔ">上一页下一页返回４.２项目实施

<ｐｃｌａｓｓ＝"ｔｉｔｌｅ">图书分类</ｐ>

<ｄｌ>

<ｄｔ>教育</ｄｔ>

<ｄｄ>

<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">教材</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">外语</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">考试</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">中小学教辅</ａ>上一页下一页返回４.２项目实施

</ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ>文学</ｄｔ>

<ｄｄ>

<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">小说</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">青春文学</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">世界名著</ａ>｜<ａｈｒｅｆ＝"＃"上一页下一页返回４.２项目实施ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">传记</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">纪实文学</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">诗词</ａ></ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ>人文社科</ｄｔ>

<ｄｄ>

<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">哲学</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿上一页下一页返回４.２项目实施ｂｌａｎｋ">社会科学</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">政治</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">法律</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">军事</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">历史</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">地理</ａ></ｄｄ>

</ｄｌ>

<ｄｌ>

<ｄｔ>生活时尚</ｄｔ>上一页下一页返回４.２项目实施

<ｄｄ>

<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">健康</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">娱乐时尚</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">育儿/成长</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">旅游</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">美容美体</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">美食</ａ>｜<ａｈｒｅｆ＝"＃"ｔａｒｇｅｔ＝"＿ｂｌａｎｋ">家居</ａ></ｄｄ>上一页下一页