




已阅读5页,还剩6页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
本次课主题:利用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. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 本科html考试试题及答案
- 北京高中数学考试卷子及答案
- N6-Allylamino-carbonothioyl-lysine-13C6-15N2-生命科学试剂-MCE
- 电焊工焊接知识培训总结课件
- hu3S193-生命科学试剂-MCE
- 保险金融资格考试题库及答案
- 新解读《GB-T 2999-2016耐火材料 颗粒体积密度试验方法》
- 高楼居民安全知识培训课件
- 电炉操作知识培训课件
- 电源线缆安全知识培训课件
- 学校家庭教育指导(班主任培训班) 课件
- 骨关节结核教案
- 部编版一年级上册语文研课标说教材课件
- 楼板厚度检测报告
- 纳米材料ppt课件精品课件
- 精神发育迟滞课件
- 最新VTE指南解读(静脉血栓栓塞症的临床护理指南解读)
- 旅行社计调实务课件完整版电子教案
- 乌有先生传(原文+注释+译文)精编版
- DB53∕T 1022-2021 三七栽培技术规程
- 【老师必备】部编版三年级语文上册第一单元【集体备课】
评论
0/150
提交评论