导航菜单的制作

原创 2016年05月30日 16:44:05

学完html\css一些基础知识后,制作导航菜单总结

         首先要说的是,在网页布局中html是结构,css是表现,JavaScript是行为。

用无序列表构建菜单

    <ul>

         <li><a></a></li>

          <li><a></a></li>

    </ul>

ul li a{display:block;}   定义的关键是将<a>标签设置成块元素,这样就可以设置导航栏的宽度,高度。

.通过设置float属性(float:left;),能将垂直菜单转换成水平菜单

.制作圆角菜单时,背景图片是贴在哪个标签上的?

      <a>标签

.制作改变高度的伸缩菜单时用什么技巧实现高度向上延伸

      margin-top用负值。向相反方向移动

.用JavaScript代码实现菜单的水平伸缩效果时this的含义是什么?

    <script>
       window.onload=function(){
     
      var aA=document.getElementsByTagName("a");
      for(var i=0;i<aA.length;i++){
      aA[i].onmouseover=function(){
       var This=this;
       setInterval(function(){
        This.style.width=This.offsetWidth+8+"px";
       },30)
      }
     }
    }
  </script>

this代表当前<a>标签

 

 

块级元素是不是都可以设计它的padding,margn,border

1.如果要给水平菜单增加整体背景,需要对()进行哪些CSS设置?

  菜单<li>浮动后,<li>脱离文档流,导致<ul>将失去高度和宽度;如果需要对<ul>进行整体背景设置

,首先要给<ul>定义宽、高。

在设置px时,-px是什么意思

setInterval方法的用法

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

flash 制作导航菜单

  • 2013年04月07日 01:42
  • 132KB
  • 下载

div+css 制作横向导航菜单

好,开始上课!                前三节课,我们知道了什么是“块状元素和内联元素”,以及xHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮...

CSS制作的文字加框的导航菜单

  • 2010年05月29日 14:42
  • 2KB
  • 下载

flash导航菜单制作软件

  • 2010年04月01日 19:29
  • 9.54MB
  • 下载

HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作 1、基本的样式清除: *{margin:0;padding:0} 2、无序列表圆点去除: ul{list-style:none} 3、下划线去除: a{text-deco...
  • mqy1023
  • mqy1023
  • 2016年03月14日 22:34
  • 6052

css 制作导航菜单 工具

  • 2013年04月07日 01:45
  • 1.52MB
  • 下载

WordPress主题导航菜单制作的几种方法(一)

WordPress主题导航菜单制作的几种方法(一) 2011年04月14日 人气: 1,376 文章目录 WP 3.0自定义菜单的制作 使用分类和页面...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航菜单的制作
举报原因:
原因补充:

(最多只允许输入30个字)