菜单栏

自己练了一个菜单栏，讲真，做的很一般，就当是先做个铺垫了。

样式如下：

 

代码实现：

1.HTML部分：

    <div id="nav">
        <button id="total">新闻</button>
        <div id="list">
            <a href="#home">新闻1</a>
            <a href="#home">新闻2</a>
            <a href="#home">新闻3</a>
        </div>
    </div>

2.总菜单样式：

       #total{
            border:none;
            width:150px;
            text-align:center;
            padding:12px 15px;
            background-color:666699;
            color:CC6633;
            font-size:20px;
            font-weight:bold;
        }

3.子菜单样式：

        #list{
            display:none;
            position:absolute;
            min-width:200px;
            background-color:white;
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
        }
        #list a{
            display:block;
            color:black;
            padding:14px 16px;
        }　

4.鼠标经过时显示出子菜单及样式变化：

        #nav:hover #list{
            display:block;
        }
        #nav:hover #total{
            background-color:663399;
        }
        a:hover{
            background-color:#B0B0B0;
        }

 

完整代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            text-decoration:none;
        }
        #total{
            border:none;
            width:150px;
            text-align:center;
            padding:12px 15px;
            background-color:666699;
            color:CC6633;
            font-size:20px;
            font-weight:bold;
        }
        #list{
            display:none;
            position:absolute;
            min-width:200px;
            background-color:white;
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
        }
        #list a{
            display:block;
            color:black;
            padding:14px 16px;
        }
        #nav:hover #list{
            display:block;
        }
        #nav:hover #total{
            background-color:663399;
        }
        a:hover{
            background-color:#B0B0B0;
        }
    </style>
</head>


<body>
    <div id="nav">
        <button id="total">新闻</button>
        <div id="list">
            <a href="#home">新闻1</a>
            <a href="#home">新闻2</a>
            <a href="#home">新闻3</a>
        </div>
    </div>
</body>
</html>
View Code

 

注意：

给下面子菜单（父元素）设置“绝对定位”很重要。似乎也没有那么重要 ，奇怪，

position：absolute；//不要这个

min-width：200p；//替换成width:200px;

好像也没有什么影响。

总结：

1.对于定位相关的知识，了解了绝对定位以及相对定位，上面的注意就没什么意思了。

2.学习网站：菜鸟教程-http://www.runoob.com/css/css-tutorial.html

 

posted @ 2018-09-18 14:44  苏小落  阅读(248)  评论(0)  编辑  收藏  举报