当前位置:绿色下载绿色下载文章资讯网页设计HTML/CSS

十天学会div+css 第四天 纵向导航菜单及二级弹出菜单

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2016-09-05 11:01:25

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

  • 纵向列表
  • 标签的默认样式
  • css派生选择器
  • css选择器的分组
  • 纵向二级列表
  • 相对定位和绝对定位

一、纵向列表

纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作

先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,即会自动插入ul和li,然后修改文字内容为你需要的内容。

<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>

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

生成的css代码如下:

[1] [2] [3] [4] [5] [6] [7]  下一页

Tags:div+css 导航 菜单 二级 弹出菜单

作者:佚名
0 0

文章评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论