《电子商务网站运营与管理》课件项目4电子商务静态网站设计18.pptx

1、目目 录录项目介绍1学习目标2学习指南3任务实施4 项目介绍项目介绍v 电子商务通常是指在全球各地广泛的商业贸易活动中，在互联网开放的网络环境下，基于浏览器/服务器应用方式，买卖双方不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种新型的商业运营模式。本项目以IT产业生产线对岗位人才的需求，介绍网页元素的制作与搜集、网页布局和规划、网站开发的基本流程等知识。v 通过本项目的学习，要求学生掌握网页设计的基本概念，掌握DIV和CSS概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态网页，

2、同时通过本项目的学习，培养学生的综合职业能力、创新精神和良好的职业道德。学习目标学习目标v 1项目知识目标v 项目知识目标包括基本知识和拓展知识两类，具体如下所示。v（1）基本知识v 掌握网页布局与定位的基本概念；v 掌握DIV与CSS的概念；v 了解网站建设流程；v 掌握网站设计技术。v（2）拓展知识v 了解页面中不同内容的切换；v 了解公共类的设计。v 2项目技能目标v 项目技能目标包括基本技能和拓展技能两类，具体如下所示。v（1）基本技能v 学会CSS对各元素背景的控制设计能力；v 学会典型商城网页的设计能力。v（2）拓展技能v 了解大型商城网站的结构与规模；v 了解大型商城网站导航系统

3、的设计。学习指南学习指南v4.1 网页布局与定位l 4.1.1 认识和理解DIVl 1什么是DIV DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。l 2DIV标签 可定义文档中的分区或节（division/section）。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。l 3块状

4、元素 块状元素，自己占据一行且无法与其它元素相容，这里也包括两相同的块状也是无法相容的。也就是说块状元素一般是其他元素的一个容器，可容纳行内元素或其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（Width）和高度（height）属性起作用。常见的块状元素有“div”和“P”。学习指南学习指南 下面让我们看一个例子。左侧部分 右侧部分 运行以上程序后看到两行文字并不是并排放置的，而是上下放置。这说明div对象本身是占有一行的对象，而不准许其他元素与他处在同一行，这就是块状元素的特点。l4内联元素 内联元素，只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度（Width

5、）和高度（height）属性不起作用。常见内联元素有“a”。表5-1所示的是块状元素与内联元素对比。表5-1 块状元素与内联元素对比表 学习指南学习指南l5实例 【例题4.1】要求，ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。CSS代码如下：#div1width:300px;height:300px;background:#900;#div2width:100px;height:100px;background:#090;HTML代码如下：学习指南学习指南 为了方便初学者更好的学习，把完整的代码打出来：

6、CSS学习-“可容纳内联元素和其他块状元素”#div1width:300px;height:300px;background:#900;#div2width:100px;height:100px;background:#090;学习指南学习指南 运行结果如图4-1所示。如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联元素和其他块状元素”颜色为白色。CSS代码如下：#div1width:300px;height:300px;background:#900;#div2width:100px;height:100px;background:#

7、090;acolor:#fff;学习指南学习指南 HTML代码如下：可容纳内联元素和其他块状元素 运行结果如图4-2所示。图4-2 可容纳内联元素 到这里，我们可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应等。好，我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)

8、区域块，代码如下 学习指南学习指南 CSS代码如下：#div1width:300px;height:300px;background:#900;#div2width:100px;height:100px;background:#090;#div3width:100px;height:100px;background:#009;acolor:#fff;HTML代码如下：可容纳内联元素和其他块状元素 运行结果如图4-3所示。图4-3 三个块状元素 学习指南学习指南l4.1.2 认识和理解CSSl1什么是CSS CSS是“Cascading style sheet”的缩写,称“级联样式表”。是对HT

9、ML语法的革新。样式表是动态网页的一部分，建立样式表的意义在于把对象引入到HTML中，使其可以使用脚本程序调用和改变对象属性，从而使网页中的对象产生动态的效果。简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。（1）浏览器支持完善（有兼容性问题）；（2）表现与结构分离（HTML也有部分默认样式）；（3）样式控制功能强大（样式也混乱）；（4）继承性能优越 （继承重叠混乱）。CSS在当前WEB应用上面确实强大，可应用在HTML、XML，甚至FLEX、SilverLight中。学习指南学习指南l2CSS 基本语法 CSS基本语句的结构如下：HTML选择符属性1：值1；

10、属性2：值2；属性n：值n；选择符是要对它应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。如：p font-size:12pt；color:bluel3什么是CSS 样式【例题4.2】先看下面一段语句。设置属性 学习指南学习指南 这个段落应用了样式 这个段落按默认样式显示 运行结果如图4-4所示。以上程序中使用了 行内样式语句，其中style就是样式；color、font-size、font-family是样式属性。CSS常见的样式属性如表4-2所示。学习指南学习指南l4CSS 样式分类 加载cs

11、s样式有以下几种。（1）行内样式 如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的style 属性定义，其语法如下所示。h2 color:#f00;这种形式是行内样式表，它是以和结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。学习指南学习指南【例题4.3】运行以下程序。P /*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;h2 background-color:#CCFF33;text-align:center;学习指南学习指南 品种特征

12、方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。运行结果如图4-5所示。（2）内嵌样式 行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式，其语法如下所示。P font-size:20px;color:blue;text-align:center 学习指南学习指南（3）元素选择器 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置html 的样式，选择器通常将是某个html 元素，比如 p、h1、em、a，甚至可以是 html 本身。其语法如下所示。元素名 样式规则（属性名：属性值）例如：html colo

13、r:black;h1 color:blue;p color:silver;学习指南学习指南（4）class类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。要注意的是只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。修改 HTML 代码在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。其语法如下所示。.类名 样式规则（属性名：属性值）例如：.imp

14、ortant color:red;应用类选择器时class=”类名”即可。学习指南学习指南（5）ID选择器 id 选择器以#来定义，其语法如下所示。#ID名 样式规则（属性名：属性值）例如：#important color:red;应用ID选择器时ID=”ID名”即可。（6）ID与class的区别 在CSS文件里书写时，ID加前缀#；CLASS用.；ID一个页面只可以使用一次；class可以多次引用；ID是一个标签，用于区分不同的结构和内容；class是一个样式，可以套在任何结构和内容上；从概念上说就是不一样的：ID是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结

15、构/内容。学习指南学习指南（7）链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，其语法如下所示。上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。学习指南学习指南（8）导入外部样式表 导入外部样式表是指在内部样式表的里导入一个外

16、部样式表，导入时用import，看下面这个实例：例中import“mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，实质上它相当于存在内部样式表中的。要注意的是，导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。学习指南学习指南l4.1.3 认识和理解CSS盒子模型l1认识CSS 盒子模型 在网页设计中常听的属性名：内容(content)、填充/内边距(padding)、边框(border)、外边距(margin)，CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生

17、活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型，如图4-8所示。可以把它当成日常中的一个盒子去理解。content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。学习指南学习指南 padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。而再外一层就是border边框，因为边框有大小

18、和颜色的属性，相当于盒子的厚度和它的颜色或者材料。margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子堆码直接的距离，可以通风，也美观同时方便取出。我们理解了盒子模型，有助于我们了解一个元素的最终尺寸是怎么样决定的，同时也帮助我们理解元素在网页上是如何定位的。盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。即：宽度=margin-left+border-lef

19、t+padding-left+width+padding-right+border-right+margin-right,如图4-9所示。学习指南学习指南【例题4.6】CSS的盒子模型。div width:200px;padding:20px;border:1px solid red;margin:10px;盒子里面文本内容 以上程序显示了CSS盒子模型其尺寸如图4-10所示。学习指南学习指南l4.1.4 浮动与定位l1什么是文档流 （1）普通文档流 Html代码中先写的标签先显示，后写的标签后显示，整个过程好像瀑布的水从上流到下，因此命名为普通文档流。（2）特殊文档流 所谓特殊文档流就是指那

20、些在页面被载入浏览器的时候，不按照前面所讲的顺序，脱离普通文档流而单独显示的标签。浏览器在显示一个网页的时候，总是先显示文档流，再显示特殊文档流的。l2CSS浮动定位 浮动定位float是CSS的定位属性，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。学习指南学习指南【例题4.7】运行以下程序。#box_a background-color:#ccc;height:200px;width:240px;margin:5px;border:1px solid#333;float:left;#box_b backgro

21、und-color:#ccc;height:200px;width:600px;margin:5px;border:1px solid#333;学习指南学习指南 float:left;#box_c background-color:#ccc;height:200px;width:220px;margin:5px;border:1px solid#333;float:left;盒子模型A 盒子模型B 盒子模型C 运行结果如图4-11所示。学习指南学习指南l4.1.5 网页布局l1网页布局步骤 （1）构思（结构的搭建）在构思之前需要了解客户的需求、网站的定位、受众群等很多方面的事情等，也就是说需要

22、了解策划方案。（2）粗略布局 这个阶段是个试用期，只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求等。（3）完善布局 当已经有一个很好的框架时，根据客户的要求将其所需的内容有条理的融入于整个的框架中，这里就进入了网页布局的阶段了，需要通过对图片的处理、空间的合理利用进行编排了。学习指南学习指南（4）深入优化 这个阶段主要是针对些细节的更改和优化了，比如说一些颜色饱和度、一些字体、间距的调整呀。最后客户反馈过来的东西根据现有的界面进行适当的调整，直至客户满意。l2网页布局设计 【例题4.8】请设计图4-12所示某网页结构图。Layout body margin:0;paddin

23、g:0;.Header,.Footer height:100px;background-color:#369;.Left,.Right position:absolute;学习指南学习指南 top:100px;width:100px;height:300px;background-color:pink;.Left left:0;.Right right:0;.Cont margin:0 100px;.con1,.con2 height:150px;.con1 background-color:silver;.con2 background-color:slateGrey;Header Left

24、 con1 con2 Right Footer 运行结果如图4-13所示。学习指南学习指南v4.2 CSS对元素背景的控制l4.2.1 背景控制l1CSS背景属性 背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。表4-3所示的是CSS背景提供的属性和描述。表4-3 CSS常用的背景属性表l2背景颜色(background-color)background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。background-color:blue;background-color:rgb(0,0,255);backg

25、round-color:#0000ff;background-color 也可被设置为透明（transparent），这会使得其下的元素可见。学习指南学习指南l3背景图片(background-image)background-image 属性允许指定一个图片展示在背景中。background-image:url(image.jpg);但是如果图片在一个名为 images 的子目录中，就应该是：background-image:url(images/image.jpg)。【例题4.9】背景图片设置的程序代码。荷花 学习指南学习指南.zz width:290px;height:300px;bac

26、kground:#00FF33;margin:5px;padding:5px;background:url(127.JPG)no-repeat;荷花 运行结果如图4-14所示。学习指南学习指南l4背景平铺(background-repeat)设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：（1）background-repeat:repeat;（默认值，在水平和垂直方向平铺。）；（2）background-repeat:no-repeat;（不平铺，图片只展示一次。）（3）backgr

27、ound-repeat:repeat-x;（水平方向平铺(沿 x 轴)）（4）background-repeat:repeat-y;（垂直方向平铺(沿 y 轴)）（5）background-repeat:inherit;（继承父元素的 background-repeat 属性）学习指南学习指南l5背景定位(background-position)background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 bac

28、kground-repeat 为 no-repeat，计量单位是像素。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直)位置。（1）background-position:0 0;（默认值，元素的左上角。）；（2）background-position:75px 0;（把图片向右移动。）；（3）background-position:-75px 0;（把图片向左移动。）；（4）background-position:0 100px;（把图片向下移动。）。如图4-14所示。学习指南学习指南l4.2.2 文本格式控制l1网页的基本构成元素（1）文本 一般情况下，网页中最多的内容是文本，可

29、以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可。（2）图像 丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。（3）超级链接 超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。学习指南学习指南（4）导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。（5）动画

30、 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。（6）表格 表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。（7）框架 框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。（8）表单 表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。学习指南学习指南l2CSS对文本控制 文字是网页中不可缺少的部分，在每一个页面中，文字所占比例平均在90%以上，CSS中文本的控制包括两个方面的内

31、容，一方面控制文本中字体的各种显示效果,另一方面控制文本的显示效果。l3字体样式设计 CSS所支持的字体样式主要包含，字体、字号、颜色、文字样式、加粗样式、文字线条描述、英文字母大小写等如表4-4所示。表4-4 CSS字体样式（1）字体样式（font）语法：font:font-style font-variant font-weight font-size font-family|?/?功能：简写属性，提供了对字体所有属性进行设置的快捷方法。学习指南学习指南（2）字体类型（font-family）语法：font-family:字体1,字体2,字体3,.功能：调用客户端字体（3）字体大小（fon

32、t-size）语法：font-size:数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small。功能：设定文字大小。（4）字体风格（font-style）语法：font-style:inherit|italic|normal|oblique；功能：使文本显示为扁斜体或斜体等表示强调；（5）字体粗细（font-weight）语法：font-weight:100-900|bold|bolder|lighter|normal;；功能：设定文字的粗细；学习指南学习指南（6）字体颜色（color）语法：

33、color:数值；功能：字体颜色；（7）字体行高（line-height）语法：line-height:数值|inherit|normal；功能：行与行之间的距离；（8）字间距（letter-spacing）语法：letter-spacing:数值|inherit|normal；功能：控制文本元素字母间的间距，所设置的距离适用于整个元素；（9）字母大小写转换（text-transform）语法：text-transform:inherit|none|capitalize|uppercase|lowercase；功能：设置一个或几个字母的大小写标准；学习指南学习指南l4.2.3 图片控制l1图片

34、的CSS样式（1）在网页中插入图片 使用img标签嵌入图片的语法：其中，src属性是指要插入的图片所在文件夹的位置，可以是相对地址，也可以是绝对地址。控制图片的大小：CSS提供的width和height属性用于控制图片的宽度和高度。使用width和height属性的语法：width:picwidth;height:picheigth;其中，picwidth和picheight可以用任何长度单位进行设置。通常情况下使用像素为单位。学习指南学习指南（2）给图片添加边框 为放置在网页上的图片增加边框可以使图片的边界清晰，排布整齐，也可使图片更美观。CSS提供的border属性为图片添加边框。使用bo

35、rder属性的语法：border-width:width;/*设置边框的宽度*/border-style:style;/*设置边框的样式*/border-color:color;/*设置边框的颜色*/其中border-width是指边框的宽度，width可以用任何长度单位设置；border-style是指边框的样式，style指的是设置边框样式；border-color是指边框的颜色，color可以用任何颜色单位设置。学习指南学习指南l2实例演练 利用文本排版和图文混排的方法，制作出图4-15所示的页面。（1）div 本例中设计了2个盒子，一个是“title”放标题，即“五迪介绍”；另一个是“

36、content”放文字内容。（2）CSS样式 在“title”中设置了字号、粗体、居中；在“content”设置了字号和斜体。（3）源代码 图文混排#title font-size:19px;font-weight:bold;text-align:center;学习指南学习指南#content font-size:12px;font-style:italic;img float:left;五迪介绍 学习指南学习指南 杭州五迪科技有限公司成立于2004年4月，公司现在有员工130人，其中技术部人员30人，客服人员10人，给客户提供强有力的技术支持和服务保障。公司以技术研发与技术创新为战略出发点，

37、其核心技术人员以美院及计算机专业相关名校毕业。公司的战略发展致力于中国互联网产业信息化建设，帮助企业实现电子商务、协助政府实现电子政务。五迪科技的业务涵盖：域名、主机、邮局的?昵耄窘瑁阉饕嬗呕教擞确瘛宓峡萍挤窨突校赫憬锪何锿咳砑啊憬琅拧贾荼贝笄嗄瘛贾葜参镌啊憬识酝饨涣餍岬取?学习指南学习指南l4.2.4 导航条设计 下面我们将要介绍设计图4-16所示的导航条。l1导航长条设计 我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的，代码如下：HTML代码：CSS代码：#navwidth:96

38、0px;height:80px;background:#000;/*为了便于查看区域范围大小，故而加个背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*顶部30px*/学习指南学习指南 还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码。代码：body,divpadding:0;margin:0;通过以上代码的设计，运行后将在屏幕上出现一条黑色的长条，这个长条就是用来放入导航条的内容的。l2图片控制 导航条最左面有一张图片，是五迪科技有限公司的logo标志。CSS代码：#logo width:280px;float:

39、left;display:inline;margin-left:1px;HTML代码：学习指南学习指南 全代码如下：导航条#navwidth:960px;height:80px;background:#000;margin:0 auto;margin-top:30px;body,divpadding:0;margin:0;#logo width:280px;float:left;display:inline;margin-left:1px;运行以上代码程序后出现如图4-17的图。学习指南学习指南l3导航条设计 HTML代码 首页关于我们 我们的技术案例展示 联系我们 CSS代码：#nav ul

40、 width:960px;height:35px;学习指南学习指南 效果作出来了没有，效果可能不一样吧。没关系，我们的“酒杯”出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列。我们知道标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共五个,所以他们五个就像台阶似的纵向排列起来了。那么我们怎样做才能让这些“酒杯”横向排列呢？我们可以用浮动Float，可是让谁浮动呢，当然是标签，代码如下：CSS代码：#nav ul li width:100px;float:left;list-style:none;学习指南学习指南 最后导航加链接，HTML代码如下：首页 关

41、于我们 我们的技术 安例展示 联系我们l4完整的代码 完整的代码如下：.clr clear:both;#top width:100%;height:81px;ackground:url(top_bg.jpg);#top_in width:990px;margin:0 auto;height:81px;#logo width:280px;float:left;display:inline;margin-left:1px;学习指南学习指南#nav width:550px;float:right;display:inline;height:45px;margin-top:36px;line-heig

42、ht:45px;#nav li width:100px;height:45px;float:left;display:inline;list-style:none#nav a width:100px;height:45px;display:block;text-align:center;color:#FFF;text-decoration:none#nav a:hover background:#999;color:#000;首页 关于我们 学习指南学习指南 我们的技术 案例展示 联系我们 需要注意的是：（1）背景颜色用top_bg.jpg（黑色竖直线）代替；（2）图片文件名为logo.jpg

43、。学习指南学习指南v4.3 电子商务网页设计l4.3.1 网页结构 图4-18所示的是五迪科技有限公司的网页，整个网页分为上、中、下三层，上层左方是该公司的logo标志，右方是导航条；中间部分是用图片控制；下层分为左、中右三部分，左部分是关于我们的信息，中部分是案例展示信息，右部分是联系我们信息。底部是五迪公司的版权所有信息。结构代码如下所示。网页的结构如图4-19所示。学习指南学习指南l4.3.2 图片广告设计 在导航条的基础上，图片广告插入在#contaienr盒子里，使用#head,那么CSS代码如下：#head width:990px;height:327px;background:#

44、CCC url(./images/head.jpg);margin:10px 0;html代码如下：运行代码的结果如图4-20所示。学习指南学习指南l4.3.3 公司简介设计l1公司简介设计模块（1）设置标题背景（关于我们）在相关位置设置div标签，类名为title，内容为“关于我们”，写出相关语句；关于我们 设置title样式：高度为30px、文字颜色#666、背景色#dfdfdf、背景图片page_bottom_bg.jpg底部平铺、行高30px、文字缩进10px、文字大小14px；写出相关样式设置语句；学习指南学习指南.title height:30px;color:#666;backg

45、round:#dfdfdf url(./images/page_bottom_bg.jpg)bottom left repeat-x;line-height:30px;text-indent:10px;font-size:14px;设置标题宽度为313px，并把宽度应用到标题（关于我们）部分，写出相关语句；关于我们（2）设置公司简介文字介绍 在相关位置设置div标签，类名为about，内容为公司简介图片（img_about.jpg）和公司简介文字（文字内容参看效果图，公司简介文字放入一个段落标记中），写出相关语句；学习指南学习指南l2制作联系我们模块（1）设置标题背景（联系我们）在相关位置设置

46、div标签，类名为title，内容为“联系我们”，写出相关语句；联系我们 设置标题宽度为275px，并把宽度应用到标题（联系我们）部分，写出相关语句；联系我们 Title_rwidth:275Px;（2）设置联系我们文字介绍 在相关位置设置div标签，类名为contact，内容为联系我们图片（contact_title.jpg）和联系我们文字（文字内容参看效果图，联系我们文字放入一个段落标记中），写出相关语句；学习指南学习指南 地址：杭州富阳高桥路XXX号 邮编：32000 邮箱： 电话号码：1368575xxxx 设置contact样式：宽度225px、上外边距25px、左外边距25px、字

47、体大小12px、行高28px，写出相关语句。.contact width:225px;margin-top:25px;margin-left:25px;font-size:12px;line-height:28px;运行结果如图4-21所示。学习指南学习指南l4.3.4 公司案例展示设计l1案例展示效果图 公司案例效果如图4-22所示。l2制作案例展示模块的标题区域 案例展示 l3案例展示模块结构图 案例展示模块结构如图4-23所示。学习指南学习指南l4对案例展示区域布局 案例展示区域布局代码如下：案例展示 （1）anli样式设置：宽度368px；距离父级边框左边框16px，上边框16px；C

48、SS代码如下：.anli width:26px;margin_top:16px;margin_left:16px;学习指南学习指南（2）a_top_l区域制作 文本制作。有一个二级标题和一段文字。临时会员卡专区 临时会员卡免费活动曼约纪一次 a_top_l区域样式设置。区域宽度130px，右外边距15px，下外边距8px，左浮动，设置对象作为行内元素显示；CSS代码如下：.a_top_l display:inline;float:left;width:130px;margin-right:15px;margin-bottom:8px;a_top_l文本区域样式设置（h2和p样式设置）制作后的效

49、果如图4-24所示。学习指南学习指南（3）a_top_r区域制作 设置a_top_r的样式：区域宽度223px；设置对象作为行内元素显示；设置内边距(padding)2px;CSS代码如下：.a_top_rdisplay:inline;width:223px;图片列表制作。设置图片列表项样式：宽度64px；高度84px（高度在图片高度的基础上加20px，用于存放图片文字）；左外边距7px；左浮动；设置对象作为行内元素显示；CSS代码如下：.a_top_r li width:64px;height:84px;margin-left:7px;overflow:hidden;学习指南学习指南 flo

50、at:left;display:inline html代码如下：第一试镜 生命的礼赞 阳光沐浴下的少女div class=“clr”调查称五四青年节多数单位不 放假 原信访官员因女儿坠亡上访：没有其他出路 卫生部调查称2/3城乡居民满意医疗服务仅10%不满意 学习指南学习指南 CSS代码如下：.a_top_r h3 font-size:12px;height:20px;line-height:20px;text-align:center;font-weight:normal （4）news区域制作 新闻列表项制作 调查称五四青年节多数单位不 放假 原信访官员因女儿坠亡上访：没有其他出路 学习指