<ruby id="zruOg"><table id="zruOg"></table></ruby>

<video id="zruOg"></video>
    • 想自学教程的朋友,就来微帮教程网。
      微帮教程网
      当前位置: 主页 > 图文 > 网页制作教程 >

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

      发布时间:2020-11-25 21:30 点击:
      分享到:
      【评论本教程】 【挑错本教程】
      ------分隔线----------------------------

      今天我们开始学习《十天学会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代码如下:

      <style type="text/css">
      #menu ul { list-style: none; margin: 0px; padding: 0px; }
      </style>

      下面我们定义一下全局的字体,字号,行距等,点击css样式面板上的新建按钮,在弹出的窗口中选择器类型选择标签,名称选择body,然后在css编辑器中设置如下图所示属性

      body全局样式定义后,下面我们给#menu定义一个灰色的1px边框及宽度,然后把li定义下背景色和下边框及内边距等

      接下来定义li的背景色为浅灰色及下边框和内边距

      这些属性设置完后,一个简单的纵向列表菜单初具模型了。因为导航菜单,需要链接到其它页面,下边把这些导航加上链接,然后在定义a的状态和鼠标划过状态。

      要添加链接,先选择要添加链接的文字,然后在属性页面链接上输入要链接的页面址,我这里输入个#,是个虚拟链接,不指向任何页面。