div css之纵向导航菜单及二级弹出菜单PPT课件

5 1Div Css网页设计 1 纵向导航菜单及二级弹出菜单 知识点纵向列表标签的默认样式css派生选择器css选择器的分组纵向二级列表相对定位和绝对定位 2 网页设计 纵向导航菜单及二级弹出菜单 纵向列表纵向列表或称为纵向导航 在网站的产品列表中应用比较广泛 如淘宝网左侧的淘宝服务等 视图制作 新建一个页面插入ID为menu的div中文字 点击文本工具栏的ul图标修改文字内容 3 网页设计 纵向导航菜单及二级弹出菜单 html代码解密 首页网页版式布局div css教程div css实例常用代码站长杂谈技术文档资源下载图片素材 4 网页设计 纵向导航菜单及二级弹出菜单 清除标签的默认样式视图操作 5 网页设计 纵向导航菜单及二级弹出菜单 6 网页设计 纵向导航菜单及二级弹出菜单 CSS代码解密 menuul list style none margin 0px padding 0px 7 网页设计 纵向导航菜单及二级弹出菜单 定义全局的字体 字号 行距 8 网页设计 纵向导航菜单及二级弹出菜单 定义 menu 边框 灰色1px menuli定义背景色 下边框 内边距 9 网页设计 纵向导航菜单及二级弹出菜单 定义li的背景色 下边框 内边距 10 网页设计 纵向导航菜单及二级弹出菜单 11 网页设计 纵向导航菜单及二级弹出菜单 把这些导航加上链接 然后在定义a的状态和鼠标划过状态a color 000 text decoration none a hover color F00 12 网页设计 纵向导航菜单及二级弹出菜单 13 网页设计 纵向导航菜单及二级弹出菜单 整体css解密 body font family Verdana font size 12px line height 1 5 a color 000 text decoration none a hover color F00 menu width 100px border 1pxsolid CCC menuul list style none margin 0px padding 0px menuulli background eee padding 0px8px height 26px line height 26px border bottom 1pxsolid CCC 14 网页设计 纵向导航菜单及二级弹出菜单 练习制作一个层 写css让层内文字垂直居中 15 网页设计 纵向导航菜单及二级弹出菜单 标签的默认样式大多数标签都有自己的默认样式 例如 body默认外边距ul前的圆点及左侧的内边距h1 h6字体大小各不相同em默认为斜体strong表示粗体Img的链接边框有时这些默认样式没用 需要清除掉 重定义标签方式可以很简单地统一全局的样式 16 网页设计 纵向导航菜单及二级弹出菜单 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 17 网页设计 纵向导航菜单及二级弹出菜单 18 网页设计 纵向导航菜单及二级弹出菜单 19 网页设计 纵向导航菜单及二级弹出菜单 20 网页设计 纵向导航菜单及二级弹出菜单 21 网页设计 纵向导航菜单及二级弹出菜单 经过重定义标签样式 清除掉默认数据后 避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题 22 网页设计 纵向导航菜单及二级弹出菜单 css派生选择器派生选择器的例子 menuul list style none margin 0px padding 0px menuulli background eee padding 0px8px height 26px line height 26px border bottom 1pxsolid CCC menuul和 menuulli即为派生选择器 如果把前边的 menu去掉 那么将是对ul标签重定义 重定义的属性将应用到全局 而前边加上 menu后 将是定义ID为menu元素内ul的样式 设置它的样式只对 menu下的ul生效 不对它之后的ul生效 23 网页设计 纵向导航菜单及二级弹出菜单 练习 新建一个页面 包含main层 在层内和层外分别放一个ul 试试用css分别定义样式 24 网页设计 纵向导航菜单及二级弹出菜单 css选择器的分组选择器可以分组 用逗号将需要分组的选择器分开 被分组的选择器可以分享相同的声明 例 所有的标题元素都是绿色 p段落 div分区 span都是20像素字体 h1 h2 h3 h4 h5 h6 color green p div span font size 20px 25 网页设计 纵向导航菜单及二级弹出菜单 纵向二级列表二级菜单即指当鼠标放到一级菜单上后 会弹出相应的二级菜单 移去鼠标后自动消失 打开4 2 html 另存为4 3 html 增加li的内容 代码如右 26 网页设计 纵向导航菜单及二级弹出菜单 效果如右图 修改css样式表修改 menuulli 增加position relative 属性 相对定位 定义ID为menu下ul下里内的ul样式如下 27 网页设计 纵向导航菜单及二级弹出菜单 定义display none后 默认状态下将隐藏 28 网页设计 纵向导航菜单及二级弹出菜单 定义 menuulliul的position absolute left 100px top 0px 那么它将以相对于它父元素li的上为0 左为100的位置显示定义 menuulliul宽度为100设置鼠标划过显示下级菜单 29 网页设计 纵向导航菜单及二级弹出菜单 30 网页设计 纵向导航菜单及二级弹出菜单 menuulli hoverul 定义ID为menu下ul下li 当鼠标划过时ul的样式 display block鼠标划过时显示输入完毕后 在各浏览器预览结果 Ie6不能正常显示IE6只支持a的伪类 其它标签的伪类不支持 要想在IE6下显示正确 需要借助js来实现 31 网页设计 纵向导航菜单及二级弹出菜单 定义一个类 current 自己命名 需和JS中相同 的属性为display block 当鼠标划过后 用JS给当前li添加上这个样式 根据css的优先级 指定的高于继承的原则 就实现了IE6下的正确显示 加上样式 menuulli currentul display block 32 网页设计 纵向导航菜单及二级弹出菜单 加上js 33 网页设计 纵向导航菜单及二级弹出菜单 在浏览器中预览效果 34 网页设计 纵向导航菜单及二级弹出菜单 相对定位和绝对定位 position relative 如果对一个元素进行相对定位 首先它将出现在它所在的位置上 然后通过设置垂直或水平位置 让这个元素 相对于 它的原始起点进行移动 再一点 相对定位时 无论是否进行移动 元素仍然占据原来的空间 因此 移动元素会导致它覆盖其他框position absolute 表示绝对定位 位置将依据浏览器左上角开始计算 绝对定位使元素脱离文档流 因此不占据空间 普通文档流中元素的布局就像绝对定位的元素不存在时一样 因为绝对定位的框与文档流无关 所以它们可以覆盖页面上的其他元素并可以通过z index来控制它层级次序 z index的值越高 它显示的越在上层 35 网页设计 纵向导航菜单及二级弹出菜单 父容器使用相对定位 子元素使用绝对定位后 这样子元素的位置不再相对于浏览器左上角 而是相对于父容器左上角相对定位和绝对定位需要配合top right bottom left使用来定位具体位置 这四个属性只有在该元素使用定位后才生效 其它情况下无效 另外这四个属性同时只能使用相邻的两个 不能即使用上又使用下 或即使用左 又使用右 36 网页设计 纵向导航菜单及二级弹出菜单 CSS的Position属性static 无特殊定位 对象遵循HTML定位规则absolute 绝对 将对象从