垂直菜单学习css

最新推荐文章于 2022-12-20 09:18:47 发布

ReZerou

最新推荐文章于 2022-12-20 09:18:47 发布

阅读量379

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/github_35957188/article/details/53143496

版权

Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

ReZerou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直菜单学习css

meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。 HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。 content（内容类型）：重要！！这个网页的格式是文本的，网页模式 charset（编码）：特别重要！！！这个网页的编码是utf-8，中文编码，需要注
复制链接

扫一扫

专栏目录