垂直菜单学习css

来源：互联网发布：备案域名交易淘宝编辑：程序博客网时间：2024/06/06 18:20

meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

content（内容类型）：重要！！这个网页的格式是文本的，网页模式
charset（编码）：特别重要！！！这个网页的编码是utf-8，中文编码，需要注意的是这个是网页内容的编码，而不是文件本身的，其他类型的编码中文可能会出现乱码。

本文学习自慕课网http://www.imooc.com/learn/6

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

一般使用无序列表构建导航菜单即：ul/li
```
<ul class="nav">    <li><a href="#">首　　页</a></li>    <li><a href="#">新闻快讯</a></li></ul>
```
- 1〉居中可以用text-align:center；
- 2〉a里面的width应该不用设，因为ul已经设了宽度，不设的话，是100%继承你类宽度；
- 3〉首页中的空格应该用“ ”代替，要多少个空格就打多少个，代码里无论打多少个空格，都只显示一个，应该打字符编码。
- 4〉当被设置元素为块状元素时用 text-align：center 就不起作用了！
小窍门：全角输入法状态下可以打出空格。不用&nbsp；
小注意：li浮动后，ul将失去宽高度，如要设置ul整体背景需要定义好ul宽高
先来个贼骚的js轻松一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航菜单</title><style type="text/css">* { margin: 0; padding: 0; font-size: 14px; }a { color: #333; text-decoration: none }ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }//垂直变水平只需一句话ul li { float: left }ul li a { display: block; height: 30px; text-align: center; line-height: 30px;width:120px; background: #efefef; margin-left: 1px; }a.on, a:hover { background: #F60; color: #fff; }</style><script>window.onload=function(){    var aA=document.getElementsByTagName('a');    for(var i=0; i<aA.length; i++){        aA[i].onmouseover=function(){            var This=this;            clearInterval(This.time);            This.time=setInterval(function(){                    This.style.width=This.offsetWidth+8+"px";                    //if(This.offsetWidth>=160)                    //clearInterval(This.time);                },30)        }        aA[i].onmouseout=function(){                clearInterval(this.time);                var This=this;                this.time=setInterval(function(){                    This.style.width=This.offsetWidth-8+"px";                    if(This.offsetWidth<=120){                        This.style.width='120px';                        clearInterval(This.time);                    }                },30)        }    }}</script></head><body><ul>    <li><a class="on" href="#">首　　页</a></li>    <li><a href="#">新闻快讯</a></li><li><a href="#">产品展示</a></li>    <li><a href="#">售后服务</a></li>    <li><a href="#">联系我们</a></li></ul></body></html>

修改一下，制作个下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>动画菜单</title><style type="text/css">* { margin: 0; padding: 0; font-size: 14px; }a { color: #333; text-decoration: none }ul{ list-style: none; }.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}.nav li { float: left; position:relative; height:30px; width:120px }.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}.subNav li a{ background:#ddd }.subNav li a:hover{ background:#efefef}</style><script>window.onload=function(){    var aLi=document.getElementsByTagName('li');    for(var i=0; i<aLi.length; i++){       aLi[i].onmouseover=function(){            var oSubNav=this.getElementsByTagName('ul')[0];            if(oSubNav){            var This=oSubNav;            clearInterval(This.time);            This.time=setInterval(function(){                    This.style.height=This.offsetHeight+16+"px";                    if(This.offsetHeight>=120)                    clearInterval(This.time);                },30)             }          }        //鼠标离开菜单，二级菜单动画收缩起来。             aLi[i].onmouseout=function(){            var oSubNav=this.getElementsByTagName('ul')[0];            if(oSubNav){            var This=oSubNav;            clearInterval(This.time);            This.time=setInterval(function(){                    This.style.height=This.offsetHeight-16+"px";                    if(This.offsetHeight<=0)                    clearInterval(This.time);                },30)             }          }    }}</script></head><body><ul class="nav">    <li><a href="#">一级菜单</a>        <ul class="subNav">            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>        </ul>    </li>    <li><a href="#">一级菜单</a>        <ul class="subNav">            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>            <li><a href="#">二级菜单</a></li>        </ul>    </li>    <li><a href="#">一级菜单</a></li>    <li><a href="#">一级菜单</a></li>    <li><a href="#">一级菜单</a></li></ul></body></html>

0 0