返回下拉菜单的案例...登陆

下拉菜单的案例

阿涛2019-06-28 16:23:26120

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style3.css">
    <title>下拉菜单案例</title>
</head>
<body>
<div class="header">

    <div class="nav">
        <a class="qnzx" href="#">千牛卖家中心
        <ul>
            <li>免费开店</li>
            <li>已卖出的宝贝</li>
            <li>出售中的宝贝</li>
            <li>体检中心</li>
            <li>问商友</li>
        </ul>
        </a>
    </div>
</div>

</body>
</html>

css代码:

*{
    margin: 0;
    padding: 0;
}

.header {
    height: 35px;
    width: 100%;
    background-color: #F5F5F5;
    border-bottom: 1px solid #EEEEEE;
}

.nav {
    height: 36px;
    width: 200px;
    margin: 0 auto;
    /*background-color: palevioletred;*/
}

a {
    text-align: center;
    line-height: 36px;
    text-decoration: none;
    color: #6C6C6C;
    display: inline-block;
    width: 200px;
    height: 36px;
    /*margin: auto;*/
}

a:hover{
    color: #FF4400;
    background-color: white;
}

.nav:hover {
    background-color: white;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    padding-left: 1px;

}

.nav:hover ul{
    display: block;
}

ul li:hover{
    background-color: #F5F5F5;
}

ul li {
    list-style: none;
    text-align: left;
    padding: 8px;

}

ul {

    width: 201px;
    border: 1px solid #cccccc;
    border-top: none;
    display: none;
    position: relative;
    right: 2px;
}

效果图:

QQ截图20190628155653.png

总结:

1、首先清空浏览器自带的边距。

2、css盒模型熟悉掌握后,对元素的微调能很好把握。

3、案例中使用相对定位对其了下拉菜单上下的边框线。

4、下拉菜单的实现原理和实现过程从案例中都有很好的体现。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网