瑞达医药公司divcss布局1.ppt

本次课主题：利用DIV+CSS完成瑞达医药网站布局1,课前提问操作题,将上次课的竖向导航修改为横向导航，并且设置每个菜单项的宽度为100象素，文字居中显示。,瑞达医药网站介绍,练习1 完成瑞达医药网站网页头部背景和左上角导航菜单设置,练习1 操作步骤提示,1.将上次课完成的“2列固定宽度左窄右宽型+头部+导航+尾部”，这个文件夹，改名为“瑞达”，然后将images文件夹拷贝进去；在DW中打开index.html文件，修改标题为：瑞达医药首页。2.将名为menu的DIV删除，将#menu这个样式也删除，将header这个div所在的文字内容删除，将的结束标记通过回车移到下面，中间空出若干行，用来编辑。3.在header这个div中增加如下的内容，划线部分的内容根据网页效果图来填充，注意每一项都是一个超链接，为了测试用，超链接都链接到本页。,练习1 操作步骤提示,4.修改样式，需要修改和增加的样式文件如下所示，若设置完后效果有误，请根据实际情况自已再进行修改：#header:高168象素；下边距5象素；背景图像：header-back.png。#header.inner：清除两边；高35象素；宽100%；溢出部分隐藏；边距0象素#header.menu1：上边距5象素；左边距：10象素；清除两边。#header.menu1 li：背景图片li.gif，背景图片不重复，背景图片位置水平100%，垂直1象素;右边距8象素；右边填充4象素；浮动左；文字大小12象素；颜色白色；上边距0象素。#header.menu1 li a：文字颜色白色；文字修饰无。#header.menu1.end：背景无（仔细考虑这是干什么用的）。,练习2 完成瑞达医药网站网页头部logo图片,练习2 操作步骤提示,1.在名为“header”的DIV标签内，类为“inner”的DIV标签下面，添加如下的代码，划线部分自己填上。2.自已来为图片设置相应的样式，实现图片的排版，注意人看显微镜的这张图片的样式设置是要设置成绝对，坐标为靠右0，靠下0，设置Z轴为8，并且在header中增加一个样式：position:relative;,练习3 完成瑞达医药网站网页头部,练习3 操作步骤提示,在名为“header”的DIV标签内，类为“inner”的DIV标签下面，添加如下的代码，划线部分自己填上。样式参照练习1自已设置。,作业,解释瑞达医药网页练习1样式表中每一行的作用。,