项目八 CSS的美化设计.pptVIP

3、制作步骤 ： （1）用DIV进行网页的布局 预览设计的网页布局文件，如图8-31所示的效果图基本上和我们设计的网页结构图相同 图8－31 网页预览效果 3、制作步骤 ： （2）创建CSS样式代码文件DIV.CSS 新建CSS，保存文件为DIV.CSS。并设置全局的CSS样式 ，全局样式为HTML中常用的标签设置属性。效果图如图8-32所示： 为了控制网页的整体布局，通过设置父标签#container的CSS样式代码使网页的宽度为900px;边界为0px，设置的CSS代码如图8-33所示： 图8－33 网页预览效果 图8－32 全局样式代码 3、制作步骤 ： （3）应用DIV.CSS到HTML网页中 在HTML代码的head/head之间编写link href=“div.css” rel=“stylesheet” type=“text/css” /应用CSS文件 。我们也可以在“CSS样式”面板中单击链接（ ）按钮,在打开如图8-34所示的窗口中选择需要的CSS文件进行链接或导入。 图8－34 链接外部样式窗口 3、制作步骤 ： （4）.布局网页—头部和导航 网页的头部分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示 。在布局时插入两个“login”和“search”两DIV标签，一个向左浮动，一个向右浮动的方式来完成 。 导航分为一级导航和二级导航，所以需要在nav下再插入 nav_main 和nav_son两个块元素 ， 设置nav的高度及背景图片样式和一级菜单和二级菜单的样式还要用样式表定义一个左侧的圆角，一个右侧的圆角。完成后效果如图8-35所示 图8－35 头部和导航的预览效果 3、制作步骤 ： （4）.布局网页—侧边栏 侧边栏可以共用一个通用样式side_box，其代码如图8-36所示。此处用h2h2/、strong/strong等属性修饰文本。 设计侧边栏的CSS样式代码，代码如图8-37所示。 图8－37 侧边栏的CSS代码 3、制作步骤 ： （5）.设计并制作“产品导购”“使用问答”“联系我们”三部分 “产品导购”内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片。 “使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。 “联系我们”更简单，直接插入图片就行了，然后调整一下位置。完成后的效果如图8-38所示： 图8－38侧边栏效果图 3、制作步骤 ： （6）.网页布局—主体部分 主体部分可以分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块。 顶部实际上还是个左右两列布局；热点新闻列表中的日期，是用一个span标签写在了内容的前边，然后把span向右浮动就实现了，“个人登录”和“商户登录”的实现方法也是如此。 幻灯部分是一段js代码 ，直接把这部分代码插入到网站相应位置，修改参数中的大小、图片地址等 。 中间部分图片列表中“热门产品”的图标采用了背景图片 。 主体部分还有“企业历史”和“招商加盟”两块。这两块也是应用左右浮动的方式实现 。 3、制作步骤 ： （6）.网页布局—主体部分 编写主体部分的CSS代码，完成后的预览效果图如图8-39所示 8-39主体部分的预览效果图 3、制作步骤 ： （7）.网页布局—底部信息 底部信息比较简单，灰色背景部分可以用dl、dt、dd来完成，其CSS样式代码和效果图如图8-40和8-41所示： 8-40 底部的CSS代码 图8-41 底部的效果图 挑战任务：班级主页的设计和制作 班级是我们的家园，这里有我们尊敬的老师和亲爱的同学；这里是我们学习的课堂，更是我们成长的社会；这里有我们的欢笑和泪水，更有我们的付出和收获。每位同学都有浓厚的班级情结。请你们设计和制作一个班级主页，规划导航栏目，设计网页布局，用DIV和CSS结合制作一个班级主页。 五、挑战自我 项目八 CSS的美化设计 全胜 一、CSS的基本语法 二、在HTML中应用CSS 三、动感十足的导航栏 四、个性十足的登录表单 五、魅力十足的网站布局 六、挑战自我 项目八 CSS的美化设计 一、 CSS的基本语法 级联样式表（Cascading Style Sheet）简称“CSS” ，它由“选择器”和“声明”两部分组成 。 1. CSS样式表中的选择器有以下三种 ： 标签选择器（Type Selectors）：HTML文档中的各标签。例：p 类选择器（Class Select