百度知道导航栏菜单练习及思路

最新推荐文章于 2022-09-28 19:24:52 发布

iuukai

最新推荐文章于 2022-09-28 19:24:52 发布

阅读量204

点赞数

分类专栏： html+css入门学习过程 CSS

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104107031

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html+css入门学习过程

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="=utf-8" />
<title>仿百度菜单练习</title>
<style type="text/css">

/*reset.css*/
/*去除元素默认css样式，内外边距、默认点、下划线等，设置万能清楚浮动类*/
    body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, textarea {
        padding: 0;
        margin: 0;
        font-size: 18px;
    }
    
    ol, ul, li {
        list-style: none;
    }
    
    img {
        display: block;
        border: none;
    }
    
    a {
        display: block;
        text-decoration: none;
    }
    
    .clearfloat {
        zoom: 1;	/*触发 haslayout 属性*/
    }
    
    .clearfloat:after {		/*万能清除float样式，不过官网还加上了 overflow: hidden; 这个也是清除浮动的*/
        display: block;
        content: '';
        clear: both;
        visibility: hidden;
        height: 0;
    }
    
/*index.css*/
	/*
	类名含义
	1.nav 导航
	2.menu-wrap 菜单的包装容器
	3.menu-item 菜单的项（我这里分三部分，没有下拉内容的两端为两部分，中间下拉内容为一部分）
	4.item-index 左边无下拉的部分，“首页”
	5.item-user-center 右边无下拉的部分，“我的知道”
	6.item-box 中间部分，给个容器就行了，下面会再分
	7.item-box-a 中间第一个下拉部分，“问题分类”
	8.item-box-b 中间第二个下拉部分，“用户”
	9.item-box-c 中间第三个下拉部分，“知道日报”
	10.menu-title 菜单标题，也就是“首页”、“问题分类”、“用户”、“知道日报”、“我的知道”
	11.menu-content 菜单内容，指的是下拉内容部分
	12.menu-content-category 菜单内容类别，我这里是区分第一个下拉和后面的下拉，因为第一个下拉的宽度不一样
	13.item-box-a-sub 中间第一个部分的子分类。因为第一个部分的下拉的内容与另外两个不一样，所以单独设置
	14.menu-sub-list 菜单子分类的列表，也就是<ul>，不设属性，只命名
	15.menu-sub-item-wrap 菜单子分类的项的包装容器，也就是<li>，设置浮动用
	16.menu-sub-item 菜单子分类的项，就是下拉部分的文字和链接，<a>里的内容
	*/
    .nav {
        background: #666;
        min-width: 800px;	/*设置容器最小宽值，防止浏览器缩小，超出浏览器部分无背景色的尴尬，因为不设宽，那它就是浏览器的宽度*/
        margin-top: 180px;
    }
    
    .nav .menu-wrap {
        width: 800px;
        height: 48px;
        margin: 0 auto;
    }
    
    .menu-wrap .menu-item {
        float: left;
    }
    
    .menu-wrap .item-index, .menu-wrap .item-user-center {
        width: 160px;
        text-align: center;
    }
    
    .menu-wrap .item-box {
        text-align: center;
    }
    
    .menu-wrap .item-box-a, .menu-wrap .item-box-b, .menu-wrap .item-box-c {
        width: 160px;
    }
    
    .menu-wrap .item-box-b .menu-title {	/*因为鼠标经过“用户”是指针形式，所以单独给它设置鼠标类型*/
        cursor: default;
    }
    
    .menu-wrap .item-box-a:hover .menu-title, .menu-wrap .item-box-b:hover .menu-title, .menu-wrap .item-box-c:hover .menu-title {
        background: #555;
    }
    
    .menu-wrap .menu-title {
        color: #fff;
        line-height: 48px;
    }
    
    .item-box .menu-content {
        display: none;
        background: #ddd;
        border-radius: 0 0 10px 10px;
        padding-top: 18px;
        padding-bottom: 6px;
    }
    
    .item-box-a:hover .menu-content, .item-box-b:hover .menu-content, .item-box-c:hover .menu-content {
        display: block;
    }
    
    .menu-content-category {
        position:absolute;      /*加上定位，是把背景色拉到宽度大小，否则就按照父元素的宽度*/
    }
    
    .item-box-a-sub {
        width: 360px;
    }
    
    .menu-sub-list .menu-sub-item-wrap {
        margin-bottom: 18px;
    }
    
    .item-box-a-sub .menu-sub-item-wrap {
        float: left;
    }
    
    .menu-sub-list .menu-sub-item {
        font-size: 15px;
        line-height: 15px;
        color: #666;
    }
    
    .item-box-a-sub .menu-sub-item {
        width: 120px;
    }
    
    .menu-sub-list .menu-sub-item:hover {
        color: #fff;
    }

</style>
</head>

<body>
    <div class="nav">
        <div class="menu-wrap clearfloat">
            <div class="menu-item item-index">
                <a class="menu-title" href="#"><span>首页</span></a>
            </div>
            <div class="item-box">
                <div class="menu-item item-box-a">
                    <a class="menu-title" href="#"><span>问题分类</span></a>
                    <div class="menu-content menu-content-category">
                        <ul class="item-box-a-sub menu-sub-list clearfloat"><!--只要子元素有float时，那么父元素就加上清除浮动的类-->
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">全部问题</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">娱乐休闲</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">游戏</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">旅游</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">教育培训</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">金融财经</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">医疗健康</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">科技</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">家电数码</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">政策法规</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">文化历史</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">时尚美容</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">情感心理</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">汽车</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">生活</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">职业</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">母婴</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">三农</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">互联网</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">生产制造</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">其他</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu-item item-box-b">
                    <a class="menu-title"><span>用户</span></a>
                    <div class="menu-content">
                        <ul class="menu-sub-list clearfloat">
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">认证用户</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报作者</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">芝麻团</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">认证团队</a></li>
                        </ul>
                    </div>
                </div>
                <div class="menu-item item-box-c">
                    <a class="menu-title" href="#"><span>知道日报</span></a>
                    <div class="menu-content">
                        <ul class="menu-sub-list clearfloat">
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报精选</a></li>
                            <li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报广场</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="menu-item item-user-center">
                <a class="menu-title" href="#"><span>我的主页</span></a>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

思路

首先无论开发什么页面，都必须先写个清除默认样式的css，避免因默认值带来的诸多不便：距离px超出或者缺少等等、序列的点不好看、下划线不需要等等，需要了再单独设置就行；
敲码写项目时，都会用到float，但是float肯定是会导致父元素高度塌陷的，所以再定义一个万能清除修复的类，当子元素出现float时，给父元素套上清除浮动的类就好了；
我这里的导航条是深灰色的背景色，因为希望宽度随着浏览器改变，不想定死宽，所以没给值。但是我必须给最小的宽值，否则当浏览器缩小，出现水平滚动条时，拉到右边后，背景色是没有的，因为超出了浏览器大小，如下：
在准备写内容部分前，先给一个容器wrap，设置宽高。用margin: 0 auto;来使定宽块级居中。
因为导航两端都没下拉，只有中间部分存在下拉，所以无法共用ul-li来完成，那么我就分了三部分：
因为中间部分有下拉内容，所以先定义一个容器，item-box，然后再写所包含的东西；
先把两端不需要下拉且相同的部分完成：
①类：menu-item，共用的样式类
②类：item-index，item-user-center，独立的类名，独立样式用
然后，因为中间下拉部分，我这给的是三个标题，为了方便，直接命名a、b、c，（注意宽度算好，我这里菜单一共5个标题，容器宽800px，也就是平均每个160px）
因为鼠标经过“用户”只出现下拉，鼠标不改变还是箭头，且点用户也不会跳转链接，所以不需要给“用户”href，同时独立设置鼠标指针样式：
再来给这三个含下拉的标题设置鼠标经过的样式：（因为“首页”和“我的知道”无下拉内容，所以不设:hover伪类，当然你喜欢也可以加）

Q：为何:hover不跟.menu-title呢？
A：如果写成.menu-title:hover，那么鼠标离开该元素就立马恢复颜色，但我希望鼠标在该下拉内容里（该父元素内），还是不变的。

Q：既然需要.item-box-a:hover，那为何后面还加子类.menu-title？去掉不行吗？
A：这个不能去掉，这个是给后面子类设圆角的步骤定义的。
菜单的标题写好了，然后就是下拉部分的css了：

①display: none;是元素不可见，且不会占空间。你想想，下拉菜单，不就是鼠标经过后，显示的东西吗，所以这个属性很合适，而至于visibility: hidden;这个虽然也是隐藏，但是会占据空间，所以不合适。
②border-radius: ;设置边的弧度，也就是圆角，顺序是逆时针，左上，右上，右下，左下。
③padding: ;填充，撑开文本内容与上下边的距离。
注意一下“问题分类”的单独css样式：position: absolute;：
【之前练习时是配合top/bottom、left/right来达到定位效果的，但是这里并不需要top/bottom、left/right，因为该元素没有定义width和height，所以这里的absolute是拉伸作用。】
当操作完以上步骤后，发现，除了第一个下拉，其它两个下拉完成了，第一个却出现了下面的情况，为什么？这是因为，<ul>没有设置宽，这些<li>子元素在父元素中按照文档流排列，当该行挤不下时，才自动换行。所以，如果希望美观点，就给<ul>宽值，我这里360px，是分三列，每列120px。
剩下的也就是关于下拉子类标题的一些css样式了，无非就是通常ul-li导航需要的 li float，和鼠标经过字体颜色改变等等，就不多说了。

ps：

有一点缺陷，关于鼠标经过子类的标题，官网是只对文字有效，移出文字是没有手指鼠标的，也就是不会打开链接。而我这里，因为定宽，所以块化了，移出字体还是能够触发。以后再看看怎么回事。

另：当然不是百分百copy官网的啦，先做参考，然后以自己的思路和所学的知识写的。因为还没学到css3，所以css3阴影透明等我都没用到。

iuukai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度知道导航栏菜单练习及思路

<!DOCTYPE HTML><html><head><meta charset="=utf-8" /><title>仿百度菜单练习</title><style type="text/css">/*reset.css*//*去除元素默认css样式，内外边距、默认点、下划线等，设置万能清楚浮动类*/...
复制链接

扫一扫

专栏目录