- 1、本文档共27页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第四天 纵向导航菜单及二级弹出菜单 ????
今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单,包含以下内容和知识点:
纵向列表
标签的默认样式
css派生选择器
css选择器的分组
纵向二级列表
相对定位和绝对定位
一、纵向列表
纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作
先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,即会自动插入ul和li,然后修改文字内容为你需要的内容。
div id=menuulli首页/lili网页版式布局/lilidiv+css教程/lilidiv+css实例/lili常用代码/lili站长杂谈/lili技术文档/lili资源下载/lili图片素材/li/ul/div
从预览的效果上看,四周都有很大的空隙,而且每一行前边还有个点,这是因为标签的默认样式造成的,下面我们需要创建样式表把标签的默认样式给清除掉
生成的css代码如下:
style type=text/css#menu ul { list-style: none; margin: 0px; padding: 0px; }/style
下面我们定义一下全局的字体,字号,行距等,点击css样式面板上的新建按钮,在弹出的窗口中选择器类型选择标签,名称选择body,然后在css编辑器中设置如下图所示属性
body全局样式定义后,下面我们给#menu定义一个灰色的1px边框及宽度,然后把li定义下背景色和下边框及内边距等
接下来定义li的背景色为浅灰色及下边框和内边距
这些属性设置完后,一个简单的纵向列表菜单初具模型了。因为导航菜单,需要链接到其它页面,下边把这些导航加上链接,然后在定义a的状态和鼠标划过状态。
要添加链接,先选择要添加链接的文字,然后在属性页面链接上输入要链接的页面址,我这里输入个#,是个虚拟链接,不指向任何页面。
创建a的样式后,下面我们增加个交互效果,当鼠标划过链接文字时,让文字颜色变成红色,这时就需要用到a:hover这个伪类了
这里的a:hover属于伪类,在下一章节时会详细讲解,或者参看 /div_css/882.shtml,这里只要知道这个写法是定义鼠标划过时的样式就可以了
源代码如下:
??提示:可以先修改部分代码后再运行
?
二、标签的默认样式
大多数标签都有自己的默认样式,比如第二天课程中遇到的body默认外边距,另外本例中ul前的圆点及左侧的内边距,另h1-h6字体大小各不相同,em默认为斜体,strong表示粗体。正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读。但此时这些默认样式对我们没用,所以需要清除掉,为了方便,建议用标签重定义方式,这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框,ul默认情况下会在列表前添加圆点,这些都是需要去掉的。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }ul { list-style: none; }img { border-style: none; }
这里选择器类型选择复合内容,我用的是dw最新cs5版本,比之前章节用的cs3版本中更合理了,把ID和伪类分开了。然后在选择器名称中输入我们常用的带默认样式的标签,中间以英文逗号分隔
下面对img标签进行重定义,清除图片有链接时默认的边框
下边设置全局ul标签默认的圆点为无
这样就很简单把常用标签的默认样式给清除掉了,如果需要边距的话再重新定义,也避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题。有关标签的默认样式更详细的讲解,请参看/div_css/881.shtml
三、css派生选择器
CSS初学者不知道使用子选择器是影响他们效率的原因之一。派生选择器可以帮助你节约大量的class定义。我上边的例子中应用了些派生选择器如下的css代码
#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
#menu ul和#menu ul li即为派生选择器,如果我们把前边
您可能关注的文档
- 东北大学大学物理上附加题4和14参考 答案.ppt
- 第七章 超声波传感器.ppt
- 风冷模块机组推介.ppt
- 风能在船舶上的应用.doc
- 第七章 连铸用耐火材料.ppt
- 风湿免疫科考试试卷.doc
- 风险计算工具.ppt
- 东南大学传热学对流换热总结.ppt
- 第七章 泌尿系统.ppt
- 第七章 土地可持续利用.ppt
- 选择性必修2《法律与生活》 选择题专练50题 (含答案)-备战2024年高考政治考试易错题(新高考专用).docx
- 易错点14 就业与创业 社会争议解决含答案-备战2024年高考政治易错题(新教材新高考).docx
- 2023年浙江大学强基计划数学测试题含答案.pdf
- 2020-2021学年河南省郑州市惠济区陈中实验学校八年级(上)第一次月考数学试卷含答案.doc
- 湖南省长沙市长郡中学2025届高三第一次调研考试语文试题及答案解析.docx
- 2025千题百炼——高考数学100个热点问题(一):第24炼 恒成立问题——最值分析法(含恒成立综合习题)含答案.doc
- 2023年南京大学强基计划数学试题.pdf
- 2025千题百炼——高考数学100个热点问题(一):第1炼 命题形式变化及真假判定含答案.doc
- 2025千题百炼——高中数学100个热点问题(三):第75炼 几何问题的转换含答案.doc
- 2023年清华大学自强计划数学试题含答案.pdf
文档评论(0)