1、单元5网页布局与制作商品筛选页面HTML5+CSS3网页设计与制作实用教程 CSS 样式能更加方便有效地布局网页结构、控制网页元素。创建CSS 样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。 使用HTML+CSS 进行网页布局，能够真正做到Web 标准所要求的网页内容与表现相分离，CSS 代码可以更好地控制元素定位，使用外边距、边框、颜色等属性可以设置格式，从而使网站的维护更加方便和快捷。网页整体的布局结构通常有两列式、三列式和多列式等多种形式。本章导读The chapters introduction 两列式网页布局是较常用的网
2、页整体布局方式，例如个人博客网页、电子商务网站经常使用这种布局方式。两列式布局可以使用浮动布局或者层布局实现，实现方式也多种多样。浮动布局可以设计成宽度固定，左、右两列都浮动，也可以使用百分比形式定义列自适应宽度。层布局可以采用绝对定位，把左、右列固定在左右两边。 三列式网页布局也是一种较常用的网页整体布局方式，使网站内容显得非常丰富，能充分利用网页空间。三列式布局相对复杂，可以使用嵌套浮动、并列浮动、并列层等多方式实现，宽度可以定义为固定值或自适应宽度。 多列式网页布局结构较复杂，其实现方法也是多种多样，可以采用嵌套结构、并列浮动结构和列表结构，其实现方法与两列式网页布局和三列式网页布局类似
3、。本章导读The chapters introduction目录导航渐进训练任务 5-1 设计与制作电脑版商品筛选页面0501.html探索训练任务 5-2 制作触屏版促销商品页面0502.html析疑解惑单元小结任务 5-1 设计与制作电脑版商品筛选页面0501.html任 务 描 述设计与制作电脑版商品筛选页面0501.html，其浏览效果如图5-1 所示。图5-1网页0501.html 的浏览效果【任务5-1-1】规划与设计商品筛选页面的布局结构任 务 描 述规划商品筛选页面0501.html 的布局结构，并绘制各组成部分的页面内容分布示意图。编写商品筛选页面0501.html 布局结构
4、对应的HTML 代码。定义商品筛选页面0501.html 布局结构对应的CSS 样式代码。【任务5-1-1】规划与设计商品筛选页面的布局结构1规划与设计商品筛选页面0501.html的布局结构商品筛选页面0501.html 的布局结构设计示意图如图5-3 所示，由图中可以看出左侧宽度为190px，右侧宽度为790px，两者之间的间距为10px。图5-3商品筛选页面0501.html 的布局结构设计示意图任 务 实 施商品筛选页面0501.html 内容分布示意图如图5-2 所示。图5-2商品筛选页面内容分布示意图【任务5-1-1】规划与设计商品筛选页面的布局结构 在站点“易购网”中创建文件夹“
5、05 网页布局与制作商品筛选页面”，在该文件夹中创建文件夹“0501”，并在文件夹“0501”中创建子文件夹“CSS”和“image”，将所需要的图片文件拷贝到“image”文件夹中。2创建所需的文件夹 在文件夹“0501”中创建网页文档0501.html，商品筛选页面0501.html 布局结构对应的HTML 代码如表5-1 所示。3创建网页文档0501.html【任务5-1-1】规划与设计商品筛选页面的布局结构表5-1商品筛选页面0501.html 布局结构的HTML 代码01 02 03 04 05 06 07 08 09 10 11 12 13 易购网 >>&nb
6、sp; 办公设备 >> 打印机HTML代码行号【任务5-1-1】规划与设计商品筛选页面的布局结构 在文件夹“CSS”中可以创建样式文件main.css，在该样式文件定义CSS 代码，商品筛选页面0501.html 布局结构对应的CSS 样式代码的定义如表5-2 所示。4创建样式文件与编写CSS样式代码表5-2商品筛选页面0501.html 布局结构对应的CSS 样式代码01 02 03 04 05 06 07 08 09 page_wrapper width:990px;margin:10px auto;#page_wrapper .pages_nav mar
7、gin-bottom:10px;margin-left: 20px;CSS代码行号10 1112131415161718#l_sidebar float:left;width:190px;#r_content float:right;width:790px;CSS代码行号【任务5-1-1】规划与设计商品筛选页面的布局结构表5-2商品筛选页面0501.html 布局结构对应的CSS 样式代码19202122232425262728#l_sidebar .pagesort border:1px solid #ccc;background:#f5f5f5;padding:0 4px 4px 4px;
8、margin-bottom:10px;#l_sidebar .recommend border:1px solid #a0dafe;CSS代码行号29303132333435363738background:#f3f8fe;padding:0 4px 4px 4px;margin-bottom:10px;#l_sidebar .myview border:1px solid #eeca9f;background:#fff6ed;padding:0 5px;margin-bottom:10px;CSS代码行号【任务5-1-1】规划与设计商品筛选页面的布局结构 在文件夹“CSS”中可以创建通用样式
9、文件base.css，在该样式文件定义CSS 代码，样式文件base.css 的CSS 代码如表5-3 所示。表5-3商品筛选页面0501.html 通用样式文件base.css 的CSS 代码01 02 03 04 05 06 07 08 09 body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd,ul, ol, li, form, button, input margin: 0;padding: 0;body, button, input, select font-family: 宋体,verdana, arial,helvetica, sans-seri
10、f;CSS代码行号101112131415161718font-size: 12px;line-height: 1.5em;button, input, select font-size: 100%;h1 CSS代码行号【任务5-1-1】规划与设计商品筛选页面的布局结构表5-3商品筛选页面0501.html 通用样式文件base.css 的CSS 代码19202122232425262728293031font-size: 18px;h2 font-size: 16px;h3 font-size: 14px;h4, h5, h6 font-size: 100%;CSS代码行号323334353
11、63738394041424344ul, ol list-style: none;em width: 100%;font-style: normal;i font-style: normal;CSS代码行号【任务5-1-1】规划与设计商品筛选页面的布局结构表5-3商品筛选页面0501.html 通用样式文件base.css 的CSS 代码45464748495051525354555657.red color: #c00;.clear clear: both;.block display: block;a CSS代码行号58596061626364656667686970text-decora
12、tion: none;color: #333;a:link,a:visited text-decoration: none;color: #666;a:hover color: #2b98db;font-weight: bold;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容任 务 描 述在样式文件main.css 中定义必要的CSS 代码，这些CSS 代码用于实现对商品筛选页面0501.html 的左侧列表内容的布局与美化。编写HTML 代码，输入文字与插入图片，应用CSS 样式实现对商品筛选页面0501.html 的左侧内容的布局与美化。网页0501.html 左侧列
13、表内容的浏览效果如图5-1 所示。1实现商品筛选页面0501.html左侧的“办公设备”列表任 务 实 施 在样式文件main.css 中添加必要的CSS 代码，实现对商品筛选页面0501.html 左侧“办公设备”列表内容的布局与美化，对应的CSS 样式代码如表5-4 所示。【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-4实现网页0501.html 左侧“办公设备”列表内容布局与美化的CSS 代码01 02 03 04 05 06 07 08 09 10 11 12 #l_sidebar float:left;width:190px;#l_sidebar .pagesort b
14、order:1px solid #ccc;background:#f5f5f5;padding:0 4px 4px 4px;margin-bottom:10px;CSS代码行号131415161718192021222324#l_sidebar .pagesort h2 background: url(./images/ig-li.gif)no-repeat scroll 3% 50%;height:38px;line-height:38px;padding-left:22px;font-size:14px;font-weight:bold;#l_sidebar .pagesort .cont
15、ent_box padding:5px;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-4实现网页0501.html 左侧“办公设备”列表内容布局与美化的CSS 代码252627282930313233343536border:1px solid #ccc;background:#fff;#l_sidebar .pagesort .content_box ul overflow:hidden;padding:0;#l_sidebar .pagesort .content_box li.first border-top:0;CSS代码行号3738394041424344
16、45464748#l_sidebar .pagesort .content_box li padding:5px 0;overflow:hidden;border-top:1px dotted #d1e2f3;height:1%;#l_sidebar .pagesort .content_box dl padding-bottom:8px;*padding-bottom:10px;overflow:hidden;clear:both;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-4实现网页0501.html 左侧“办公设备”列表内容布局与美化的CSS 代码49505
17、1525354555657585960margin:0;padding:0;#l_sidebar .pagesort .content_box dt text-align:left;font-size:12px;color: #c00;font-weight:bold;padding-bottom:9px;padding-left:10px;CSS代码行号616263646566676869707172#l_sidebar .pagesort .content_box dt a color:#c00;text-decoration:none;#l_sidebar .pagesort .cont
18、ent_box dd float:left;white-space:nowrap;width:65px;padding-bottom:4px;padding-left:15px;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容 在网页0501.html 中编写HTML 代码与输入文字，实现商品筛选页面0501.html 左侧“办公设备”列表，对应的HTML 代码如表5-5 所示。表5-5网页0503.html 左侧“办公设备”列表对应的HTML 代码01 02 03 04 05 06 07 08 09 10 11 12 办公设备 办公设备 打印机 一体机 收款机HTML代码
19、行号131415161718192021222324 办公耗材 墨盒 纸类HTML代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容 在样式文件main.css 中添加必要的CSS 代码，实现对商品筛选页面0501.html 左侧“同类推荐”列表内容的布局与美化，对应的CSS 样式代码如表5-6 所示。2实现商品筛选页面0501.html左侧的“同类推荐”列表表5-6实现网页0501.html 左侧“同类推荐”列表内容布局与美化的CSS 代码01 02 03 04 05 06 07 08 #l_sidebar .recommend border:1px solid #a0dafe;
20、background:#f3f8fe;padding:0 4px 4px 4px;margin-bottom:10px;#l_sidebar .recommend h2 background: url(./images/ig-li.gif)CSS代码行号0910111213141516no - repeat scroll 3% 50%;height:32px;line-height:32px;padding-left:22px;font-size:14px;font-weight:bold;#l_sidebar .recommend .content_box CSS代码行号【任务5-1-2】布
21、局与美化商品筛选页面的左侧列表内容表5-6实现网页0501.html 左侧“同类推荐”列表内容布局与美化的CSS 代码17181920212223242526272829padding:5px;border:1px solid #a0dafe;background:#fff;#l_sidebar .recommend.content_box ul.content_list overflow:hidden;padding:0;#l_sidebar .recommend.content_box ul.content_list li padding:6px 0;height:60px;CSS代码行号
22、30313233343536373839404142overflow:hidden;border-top:1px dotted #d1e2f3;#l_sidebar .recommend.content_box ul.content_list li.first border-top:0;#l_sidebar .recommend.content_box ul.content_list dl padding-bottom:6px;*padding-bottom:8px;clear:both;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-6实现网页0501.html 左
23、侧“同类推荐”列表内容布局与美化的CSS 代码4344454647484950515253overflow:hidden;#l_sidebar .recommend.content_box ul.content_list dt float:left;text-align:left;margin-right:5px;#l_sidebar .recommendCSS代码行号5455565758596061626364.content_box ul.content_list dd padding:0 5px;line-height:1.4;#l_sidebar .recommend.content_
24、box ul.content_list dd span.price font-weight:bold;color:#c00;font-family:arial;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容 在网页0501.html 中编写HTML 代码、输入文字与插入图片，实现商品筛选页面0501.html 左侧“同类推荐”列表，对应的HTML 代码如表5-7 所示。表5-7网页0503.html 左侧“同类推荐”列表对应的HTML 代码01 02 同类推荐03 04 05 06 07 08 09 10 11 HTML代码行号【任务5-1-2】布局与美化商品筛选页面的左
25、侧列表内容表5-7网页0503.html 左侧“同类推荐”列表对应的HTML 代码12 佳能打印机Canon 腾彩 13 14 15 ￥1189.0016 17 18 19 20 21 22 23 24 25 HTML代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容 在样式文件main.css 中添加必要的CSS 代码，实现对商品筛选页面0501.html 左侧“最近浏览的商品”列表内容的布局与美化，对应的CSS 样式代码如表5-8 所示。3实现商品筛选页面0501.html左侧的“最近浏览的商品”列表表5-8实现网页0501.html 左侧“最近浏览的商品”列表内容布局与美化的
26、CSS 代码01 02 03 04 05 06 07 08091011 #l_sidebar .myview border:1px solid #eeca9f;background:#fff6ed;padding:5px;margin-bottom:10px;#l_sidebar .myview h2 background: url(./images/ig-li.gif)n o -repeat scroll 3% 50%;height:32px;CSS代码行号1213141516171819202122line-height:32px;padding-left:22px;font-size:1
27、4px;font-weight:bold;#l_sidebar .myview .content_box padding:5px;border:1px solid #eeca9f;background:#fff;overflow:hidden;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-8实现网页0501.html 左侧“最近浏览的商品”列表内容布局与美化的CSS 代码23242526272829303132333435363738height:1%;#l_sidebar .myview .content_box ul.view_list overflow:hid
28、den;padding:0;text-align:center;#l_sidebar .myview .content_boxul.view_list li width:80px;overflow:hidden;float:left;text-align:center;margin-bottom:15px;CSS代码行号39404142434445464748495051525354#l_sidebar .recommend .content_boxul.content_list dl img,#l_sidebar .myview.content_box ul.view_list li img
29、 width:60px;height:45px;#l_sidebar .myview .content_box ul.view_listli span.price font-weight:bold;color:#c00;font-family:arial;CSS代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容 在网页0501.html 中编写HTML 代码、输入文字与插入图片，实现商品筛选页面0501.html 左侧“最近浏览的商品”列表，对应的HTML 代码如表5-9 所示。表5-9网页0503.html 左侧“最近浏览的商品”列表对应的HTML 代码01 02 最近浏览的商品
30、03 04 05 06 299.0007 08 1039.0009 10 1349.00HTML代码行号【任务5-1-2】布局与美化商品筛选页面的左侧列表内容表5-9网页0503.html 左侧“最近浏览的商品”列表对应的HTML 代码11 12 569.0013 14 2099.0015 16 999.0017 18 19 HTML代码行号4保存网页与浏览网页效果 保存网页0501.html，然后按快捷键【F12】浏览该网页，其左侧列表的浏览效果如图5-1 所示。【任务5-1-3】布局与美化商品筛选页面的右侧主体内容任 务 描 述在样式文件main.css 中定义必要的CSS 代码，这些CS
31、S 代码用于实现对商品筛选页面0501.html 的右侧主体内容的布局与美化。编写HTML 代码、输入文字与插入图片，应用CSS 样式实现对商品筛选页面0501.html 的右侧主体内容的布局与美化。网页0501.html 右侧主体内容的浏览效果如图5-1 所示。【任务5-1-3】布局与美化商品筛选页面的右侧主体内容1实现商品筛选页面0501.html右侧的“商品筛选”参数列表任 务 实 施 在样式文件main.css 中添加必要的CSS 代码，实现对商品筛选页面0501.html 右侧“商品筛选”参数列表内容的布局与美化，对应的CSS 样式代码如表5-10 所示。01 02 03 04 05
32、 06 07 #r_content .filter border:1px solid #eeca9f;margin-bottom:10px;#r_content .filter h2 background:url(./images/ig-li.gif)CSS代码行号08091011121314#fff6ed no-repeat scroll 9px 50%;height:32px;line-height:32px;padding-left:26px;font-size:14px;font-weight:bold;CSS代码行号表5-10实现网页0501.html 右侧“商品筛选”参数列表内容布
33、局与美化的CSS 代码【任务5-1-3】布局与美化商品筛选页面的右侧主体内容1516171819202122232425262728#r_content .filter .content_box padding:5px;background:#fff;overflow:hidden;#r_content .filter .content_box dl overflow:hidden;padding:2px 0;zoom:1;border-top:1px dashed #e7cdae;CSS代码行号2930313233343536373839404142#r_content .filter .c
34、ontent_box dl.first border-top:0;#r_content .filter .content_box dt,#r_content .filter .content_box dd line-height:25px;#r_content .filter .content_box dt float:left;width:80px;font-weight:bold;text-align:right;CSS代码行号表5-10实现网页0501.html 右侧“商品筛选”参数列表内容布局与美化的CSS 代码【任务5-1-3】布局与美化商品筛选页面的右侧主体内容4344454647
35、48495051525354555657#r_content .filter .content_box dd float:right;width:690px;overflow:hidden;#r_content .filter .content_box dd divheight:25px;float:left;margin-right:10px;margin-bottom:1px;overflow:hidden;border:1px solid #fff;color:#005aa0;CSS代码行号585960616263646566676869707172#r_content .filter
36、.content_box dd awhite-space:nowrap;display:block;text-decoration:none;#r_content .filter .content_box dd a.curr,#r_content .filter .content_box dd a:hoverline-height:15px;background: #c00;color:#fff;margin-top:4px;margin-bottom:4px;CSS代码行号表5-10实现网页0501.html 右侧“商品筛选”参数列表内容布局与美化的CSS 代码【任务5-1-3】布局与美化商
37、品筛选页面的右侧主体内容 在网页0501.html 中编写HTML 代码与输入文字，实现商品筛选页面0501.html 右侧“商品筛选”参数列表，对应的HTML 代码如表5-11 所示。表5-11网页0503.html 右侧“商品筛选”参数列表对应的HTML 代码01 02 商品筛选03 04 05 品牌：06 07 全部08 惠普09 佳能10 爱普生11 富士HTML代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-11网页0503.html 右侧“商品筛选”参数列表对应的HTML 代码12 佳博13 兄弟14 15 16 17 类型：18 19 全部20 针式打印机21
38、 激光打印机22 喷墨打印机23 条码打印机24 3D 打印机25 HTML代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-11网页0503.html 右侧“商品筛选”参数列表对应的HTML 代码26 27 28 价格：29 30 全部31 0-40032 400-99933 1000-149934 1500-199935 2000 以上36 37 38 39 幅面：HTML代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-11网页0503.html 右侧“商品筛选”参数列表对应的HTML 代码40 41 全部42 A643 A444 A345 A246
39、47 48 49 HTML代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容 在样式文件main.css 中添加必要的CSS 代码，实现对商品筛选页面0501.html 右侧“商品筛选”内容的布局与美化，对应的CSS 样式代码如表5-12 所示。2实现商品筛选页面0501.html右侧的“商品筛选”内容列表表5-12实现网页0501.html 右侧“商品筛选”内容布局与美化的CSS 代码01 02 03 04 05 06 07 08 09 10 #r_content .productlist margin-bottom:10px;border:1px solid #ccc;#r_c
40、ontent .productlist .view_toolbar height:35px;padding:2px 5px;background:#f0f0f0;overflow:hidden;CSS代码行号11 12 13 14 15 16 17 18 19 20 display:block;clear:both;#r_content .productlist .view_toolbar span float:left;color:#3d3d3d;margin-top:9px;CSS代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-12实现网页0501.html 右侧“商品
41、筛选”内容布局与美化的CSS 代码212223242526272829303132333435#r_content .productlist .view_toolbar a.s1_2 float:left; background:url(./images/p1.png) no-repeat; width:18px; height:15px; overflow:hidden; margin:8px 7px 0 0; #r_content .productlist .view_toolbar a.s2_2 float:left; background:url(./images/p2.png)no-
42、repeat;width:18px;CSS代码行号363738394041424344454647484950height:15px; overflow:hidden; margin:8px 7px 0 0;#r_content .productlist .view_toolbar span.s4 margin-top:5px; #page_wrapper input,#page_wrapper select vertical-align:middle;#page_wrapper select CSS代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-12实现网页0501.ht
43、ml 右侧“商品筛选”内容布局与美化的CSS 代码515253545556575859606162636465color:#666666; font-size:12px; margin:0 3px;font-family:tahoma, simsun, arial; #r_content .productlist .page-next float:right; margin-top:5px; #r_content .productlist .page-next a float:left; border:#cdcdcd 1px solid; padding:2px 5px;CSS代码行号6667
44、68697071727374757677787980margin:1px;color: #686868; text-decoration: none!important; background:#fff; display:block; #r_content .productlist .page-next a.next-page:hover color:#ff0000!important; #r_content .productlist.page-next a.next-page:visited color:#686868;CSS代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5
45、-12实现网页0501.html 右侧“商品筛选”内容布局与美化的CSS 代码818283848586878889909192939495#r_content .productlist .page-next a.no-previous img padding:4px 5px; #r_content .productlist .listbox2 overflow:hidden;clear:both;padding:5px 8px;height:1%; #r_content .productlist .listbox2 dl float:left;clear:both; width:768px;C
46、SS代码行号96979899100101102103104105106107108109110border-bottom:1px dotted #ccc; padding:10px 0; #r_content .productlist .listbox2 dl dt float:left;width:620px;#r_content .productlist .listbox2 dl dd float:right;width:140px;#r_content .productlist .listbox2 dl dt p color:#666;CSS代码行号【任务5-1-3】布局与美化商品筛选页
47、面的右侧主体内容表5-12实现网页0501.html 右侧“商品筛选”内容布局与美化的CSS 代码111112113114115116117118119120121122123124line-height:20px;#r_content .productlist .listbox2 dl dt img border:solid 1px #ddd;float:left;margin-right:8px;width:160px;height:120px;#r_content .productlist .listbox2 dl dt .dt_title color:#36c;font-size:14
48、px;CSS代码行号125126127128129130131132133134135136137138font-weight: bold;line-height:27px#r_content .productlist .listbox2 .text text-indent: 2em;#r_content .productlist .listbox2 dl dd span width:130px;display:block;clear:both;text-align:right;color:#000;CSS代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-12实现网页0501
49、.html 右侧“商品筛选”内容布局与美化的CSS 代码139140141142143144145146147148149150151152line-height:18px;#r_content .productlist .listbox2 dl dd span.pice font-size:14px;color:#c00;font-weight:bold;font-family:arial;#r_content .productlist .listbox2 dl ddspan.graycolor:#666;CSS代码行号153154155156157158159160161162163164
50、165166#r_content .productlist .listbox2 dl dd span em text-decoration:line-through;color:#666;line-height:18px;white-space:nowrap;padding-left:5px;#r_content .productlist .listbox2 dl ddspan.in_stockcolor: #090;CSS代码行号【任务5-1-3】布局与美化商品筛选页面的右侧主体内容表5-12实现网页0501.html 右侧“商品筛选”内容布局与美化的CSS 代码16716816917017
