教学课件 《电子商务网页设计与制作（第二版）》.ppt

项目任务实施—任务一DIV网页整体布局 具体操作中在index.html文件的div id=container位置插入如下代码： div id=headerHeader/div div id=bannerBanner/div div id=sidebarSide Bar/div div id=contentContent/div div id=footerFooter/div （2）为了将五个部分区分开来，这五个部分用不同的背景颜色标示出来。 在page.css文件中注释掉container的背景颜色，并写入： #header{ background:#00FF33; height:90px; } #banner{ background:#FFFF00; height:150px; } #sidebar { background:#00FFFF; } #content { background:#FF0000; } #footer { background:#FF00FF; height: 66px; } 项目任务实施—任务一DIV网页整体布局 项目任务实施—任务一DIV网页整体布局 3.调整各DIV分块到合理位置 （1）浮动DIV分块 首先让Side Bar块浮动到Content块的右边，用css控制浮动。在page.css文件中更新#sidebar，代码如下（黑体为新加入的代码，以下同）： #sidebar { background:#00FFFF; float:right; } 项目任务实施—任务一DIV网页整体布局 （2）填充内容，调整块的大小 往放置主要内容的盒子中写入一些文字。在index.html文件中更新 div id= content位置的内容，代码如下： div id=content 浙江内利信息技术有限公司成立于2008年，是一家专业从事现代电子服务业的高科技企业，公司主营线上线下的多元化产品及服务，打造实体商户加盟的内利商城，自主创新研发支持线下电子支付的终端POS机，发行集支付、储值、积分、打折优惠于一体的内利卡，实现落地电子商务的新模式。 内利突破传统的消费模式的框架束缚，将线上线下的消费支付缴费活动融为一体，为多元化、多渠道、多方位服务的第三方电子支付运营商。致力将全新的消费支付理念通过智能交换的电子商务平台的普及到每个人的日常生活中！ /div 项目任务实施—任务一DIV网页整体布局 可以看到Content块占据了整个container的宽度，因此需要将#content的右边界设为200px，以使其不和Side Bar块发生冲突。在page.css文件中更新#content的样式，代码如下： #content {?? background:#FF0000; margin-right: 200px;}? 项目任务实施—任务一DIV网页整体布局 同时往边框里写入一些文字。在index.html文件中，更新 div id= sidebar 位置的内容，代码如下： div id=sidebar 内利信息技术有限公司作为一家滨江区典型的大学生创业企业，迅速地在滨江高新技术开发区发展起来，在自身企业的快速成长过程中，也为杭州及外地的大学生创造了很多合适的工作机会及优秀的工作环境。 /div 项目任务引导—任务一DIV网页整体布局 同样道理，调整Side Bar的宽度。在page.css文件中更新#sidebar的样式，代码如下： #sidebar { background:#00FFFF; float:right; width:200px; } 项目任务引导—任务一DIV网页整体布局 这时网站的Footer块跑到Content的下边去了。这是由于将Side Bar块向右浮动，由于是浮动，所以可以理解为它位于整个大块之上的另一层。因此，Footer和Content块对齐了。因此可以在page.css文件中更新#sidebar的样式，代码如下： #footer { background:#FF00FF; height: 66px; clear:both; } clear：both的作用是去除浮动，使后面的元素在新行中呈现。 项目任务分析—任务一DIV网页整体布局 1.DIV概述 DIV(division)标记可以看作是一个区块盒子，即div与/div之间相当于一个盒子，它可以容纳文字、段落、图像等各种网页元素。它也是为HTML文档中大块的内容提供结构与背景的元素。div与/div之间的这些元素都是用来构成这个区块的，所