瑞达医药公司divcss布局.ppt

瑞达医药公司divcss布局.ppt

ID:52329777

大小:784.56 KB

页数:11页

时间:2020-04-04

瑞达医药公司divcss布局.ppt_第1页
瑞达医药公司divcss布局.ppt_第2页
瑞达医药公司divcss布局.ppt_第3页
瑞达医药公司divcss布局.ppt_第4页
瑞达医药公司divcss布局.ppt_第5页
资源描述:

《瑞达医药公司divcss布局.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、本次课主题:利用DIV+CSS完成瑞达医药网站布局1课前提问操作题将上次课的竖向导航修改为横向导航,并且设置每个菜单项的宽度为100象素,文字居中显示。瑞达医药网站介绍练习1完成瑞达医药网站网页头部背景和左上角导航菜单设置练习1操作步骤提示1.将上次课完成的“2列固定宽度左窄右宽型+头部+导航+尾部”,这个文件夹,改名为“瑞达”,然后将images文件夹拷贝进去;在DW中打开index.html文件,修改标题为:瑞达医药—首页。2.将名为menu的DIV删除,将#menu这个样式也删除,将header这个div所在的文字内容删除,将

的结束标记通过回车移到下面,中间空出若干行

2、,用来编辑。3.在header这个div中增加如下的内容,划线部分的内容根据网页效果图来填充,注意每一项都是一个超链接,为了测试用,超链接都链接到本页。练习1操作步骤提示4.修改样式,需要修改和增加的样式文件如下所示,若设置完后效果有误,请根据实际情况自已再进行修改:#header:高168象素;下边距5象素;背景图像:header-back.png。#header.inner:清除两边;高35象素;宽100%;溢出部分隐藏;边距0象素#header.menu1:上边距5象素;左边距:10象素;清除两边。#header.menu1li:背景图片li.gif,背景图片不重复,背景图片位置

3、水平100%,垂直1象素;右边距8象素;右边填充4象素;浮动左;文字大小12象素;颜色白色;上边距0象素。#header.menu1lia:文字颜色白色;文字修饰无。#header.menu1.end:背景无(仔细考虑这是干什么用的)。练习2完成瑞达医药网站网页头部logo图片练习2操作步骤提示1.在名为“header”的DIV标签内,类为“inner”的DIV标签下面,添加如下的代码,划线部分自己填上。2.自已来为图片设置相应的样式,实现图片的排版,注意人看显微镜的这张图片的样式设置是要设置成绝对,坐标为靠右0,靠下0,设置Z轴为8,并且在header中增加一个样式:position

4、:relative;练习3完成瑞达医药网站网页头部练习3操作步骤提示在名为“header”的DIV标签内,类为“inner”的DIV标签下面,添加如下的代码,划线部分自己填上。样式参照练习1自已设置。作业解释瑞达医药网页练习1样式表中每一行的作用。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签