HTML5+CSS3网页的设计与制作单元5 网页布局与制作商品筛选页面.pptx

工业和信息化人才培养规划教材单元5高职高专计算机系列网页布局与制作商品筛选页面HTML5+CSS3网页设计与制作实用教程国家精品资源共享课程配套教材人 民 邮 电 出 版 社本章导读The chapter’s introduction CSS 样式能更加方便有效地布局网页结构、控制网页元素。创建CSS 样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。 使用HTML+CSS 进行网页布局，能够真正做到Web 标准所要求的网页内容与表现相分离，CSS 代码可以更好地控制元素定位，使用外边距、边框、颜色等属性可以设置格式，从而使网站的维护更加方便和快捷。网页整体的布局结构通常有两列式、三列式和多列式等多种形式。本章导读The chapter’s introduction 两列式网页布局是较常用的网页整体布局方式，例如个人博客网页、电子商务网站经常使用这种布局方式。两列式布局可以使用浮动布局或者层布局实现，实现方式也多种多样。浮动布局可以设计成宽度固定，左、右两列都浮动，也可以使用百分比形式定义列自适应宽度。层布局可以采用绝对定位，把左、右列固定在左右两边。 三列式网页布局也是一种较常用的网页整体布局方式，使网站内容显得非常丰富，能充分利用网页空间。三列式布局相对复杂，可以使用嵌套浮动、并列浮动、并列层等多方式实现，宽度可以定义为固定值或自适应宽度。 多列式网页布局结构较复杂，其实现方法也是多种多样，可以采用嵌套结构、并列浮动结构和列表结构，其实现方法与两列式网页布局和三列式网页布局类似。目录导航渐进训练任务 5-1 设计与制作电脑版商品筛选页面0501.html探索训练任务 5-2 制作触屏版促销商品页面0502.html析疑解惑单元小结任务 5-1 设计与制作电脑版商品筛选页面0501.html任务描述设计与制作电脑版商品筛选页面0501.html，其浏览效果如图5-1 所示。▲▲▲图5-1　网页0501.html 的浏览效果【任务5-1-1】规划与设计商品筛选页面的布局结构2．创建所需的文件夹 在站点“易购网”中创建文件夹“05 网页布局与制作商品筛选页面”，在该文件夹中创建文件夹“0501”，并在文件夹“0501”中创建子文件夹“CSS”和“image”，将所需要的图片文件拷贝到“image”文件夹中。3．创建网页文档0501.html 在文件夹“0501”中创建网页文档0501.html，商品筛选页面0501.html 布局结构对应的HTML 代码如表5-1 所示。【任务5-1-1】规划与设计商品筛选页面的布局结构表5-1　商品筛选页面0501.html 布局结构的HTML 代码行号HTML代码 div id=page_wrapperdiv class=pages_nava href=# 易购网/anbsp;gt;gt;nbsp;a href=# 办公设备/anbsp;gt;gt;nbsp;a href=# 打印机/a/divdiv id=l_sidebardiv class=pagesort/divdiv class=recommend/divdiv class=myview/div/divdiv id=r_content/div/div01 02 03 04 05 06 07 08 09 10 11 12 13 【任务5-1-1】规划与设计商品筛选页面的布局结构 在文件夹“CSS”中可以创建样式文件main.css，在该样式文件定义CSS 代码，商品筛选页面0501.html 布局结构对应的CSS 样式代码的定义如表5-2 所示。表5-2　商品筛选页面0501.html 布局结构对应的CSS 样式代码行号CSS代码 行号CSS代码 page_wrapper {width:990px;margin:10px auto;}#page_wrapper .pages_nav {margin-bottom:10px;margin-left: 20px;}#l_sidebar {float:left;width:190px;}##r_content {float:right;width:790px;01 02 03 04 05 06 07 08 09 10 11121314151617184．创建样式文件与编写CSS样式代码【任务5-1-1】规划与设计商品筛选页面的布局结构表5-2　商品筛选页面0501.html 布局结构对应的CSS 样式代码行号CSS代码 行号CSS代码 #l_sidebar .pagesort {border:1px solid #ccc;background:#f5f5f5;padding:0 4px 4px 4px;margin-bottom