帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Div+CSS从入门到精通 >> 阅读文章

Div+CSS速成第四天:纵向导航菜单及二级弹出菜单

来源:远方教程 作者:远方教程 发布时间:2015-03-17 查看次数:14054 访问[新版]

  今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单,包含以下内容和知识点:

  1. 纵向列表
  2. 标签的默认样式
  3. css派生选择器
  4. css选择器的分组
  5. 纵向二级列表
  6. 相对定位和绝对定位

  一、纵向列表
  纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作
  先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,即会自动插入ul和li,然后修改文字内容为你需要的内容。

DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单
DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单

<div id="menu">
<ul>
<li>首页</li>
<li>网页版式布局</li>
<li>div+css教程</li>
<li>div+css实例</li>
<li>常用代码</li>
<li>站长杂谈</li>
<li>技术文档</li>
<li>资源下载</li>
<li>图片素材</li>
</ul>
</div>

DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单

从预览的效果上看,四周都有很大的空隙,而且每一行前边还有个点,这是因为标签的默认样式造成的,下面我们需要创建样式表把标签的默认样式给清除掉

DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单
DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单
DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单
DIV CSS教程——第4天_纵向导航菜单及二级弹出菜单

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部