你把我折磨的好惨，不用质疑说的就是你

最新推荐文章于 2024-08-29 20:46:53 发布
最新推荐文章于 2024-08-29 20:46:53 发布
阅读量640 收藏
点赞数 11
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chnnds/article/details/121299793
版权

吐槽话语：

最近小编被折磨够了，因为小编在制作一个生活资源网的学习项目！小编我只能说太折磨人了。在编写过程中遇到过许多的bug，虽然小编现在是做完了，但是我还是忍不住要吐槽一下，这个网站真的好麻烦，好几次改效果都快让我写不下去了，因为实在是太繁琐，经历了几天的战斗，最让我痛苦的莫过于导航栏的这一块的效果，气得我抓狂！虽然最后还是解决了，但是我也已经精疲力竭了。
其实问题的本身在于是否细心，很多样式都是小编我不细心导致！最后做完了我真的激动了！
心里狂喊：欧耶！ 欧耶！ 欧耶！
下面还是来说说我遇到的学习问题好了！再多吐槽的话也不能忘了正事！

问题内容：

第一个问题： 就是导航栏的问题，由于是响应式的页面，所以需要在不同的大小的窗口下显示不同的头部导航。
第二个问题： 在超小屏下鼠标放在a标签上时，从左侧滑出一个导航栏，同时滑出的导航栏是可以选中的。
就是这两个问题困扰我良久，今天给大家分享一下！

问题展示：

第一个问题：

响应式网站我们都知道有四个屏，超小屏，小屏，中屏，大屏，中屏和大屏的导航栏样式因为是一样的，所以小编写了三种屏幕下的导航栏。

  • 超小屏：

在这里插入图片描述

  • 小屏：
    在这里插入图片描述
    在这里小编解释一下哈！大家是不是觉得这个小屏下的导航栏有点丑，虽然我也这么觉得，但是他就是这样的，这个导航栏的字体样色设置的是白色，背景颜色也是白色，虽然我也不知道为什么要这么设置，但是他的要求就是这样的，当鼠标放上去字体样色就是黑色了。
  • 中屏和大屏：
    在这里插入图片描述

第二个问题：

  • 别人的效果是这样子的：

别人的效果

  • 我的却是这个样子的：

我的效果

解决方法：

第一个问题：

小编我比较笨，所以选择了比较麻烦的方法，直接制作了三个导航栏，给他们设置不同屏幕下的显示与隐藏。这个问题就完美的解决了。
代码展示：

<div class="header hidden-sm hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3 logo">
                    <img src="picture/logo.png" alt="">
                </div>
                <ul class="col-md-8 col-sm-8 col-xs-8 nav-one">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="news.html">新闻</a></li>
                    <li><a href="tuijian.html">推荐</a></li>
                    <li><a href="#">热榜</a></li>
                    <li><a href="yuer.html">育儿</a></li>
                    <li><a href="美容.html">美容</a></li>
                    <li><a href="整形.html">整形</a></li>
                    <li><a href="养生.html">养生</a></li>
                </ul>
                <div class="col-md-1 col-sm-1 col-xs-1 search">
                    <a href="" class="glyphicon glyphicon-search"></a>
                </div>

            </div>
        </div>
    </div>
    <div class="header-two visible-sm hidden-md">
        <div class="container">
            <div class="row">
                <ul class="header1-nav">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="news.html">新闻</a></li>
                    <li><a href="tuijian.html">推荐</a></li>
                    <li><a href="#">热榜</a></li>
                    <li><a href="yuer.html">育儿</a></li>
                    <li><a href="美容.html">美容</a></li>
                    <li><a href="整形.html">整形</a></li>
                    <li><a href="养生.html">养生</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="header-three visible-xs hidden-sm hidden-md">
        <div class="container">
            <div class="row">
                <a href="#" class="col-xs-2 first">
                    <span class="btn">
                    </span>
                </a>
                <div class="wai-nav">
                    <a href="#" class="glyphicon glyphicon-remove wai-a"></a>
                    <a href="#" class="wai-a">首页</a>
                    <a href="#" class="wai-a">新闻</a>
                    <a href="#" class="wai-a">推荐</a>
                    <a href="#" class="wai-a">热榜</a>
                    <a href="#" class="wai-a">育儿</a>
                    <a href="#" class="wai-a">美容</a>
                    <a href="#" class="wai-a">整形</a>
                    <a href="#" class="wai-a">养生</a>
                </div>
                <div class="col-xs-8 three-banner">
                    <img src="picture/logo.png" alt="">
                </div>
                <a href="#" class="col-xs-2 last"><span class="glyphicon glyphicon-search"></span></a>
            </div>
        </div>
    </div>

css代码：

// 超小屏
@media screen and (max-width:768px) {
    html{
        font-size:12px!important ;
        // font-size: (768px / 12);

    }
    .main{
        padding-top: 0 !important;
    }
    
    footer{
        text-align: center;
    }

}
// 小屏
@media screen and (min-width:768px) {

    html{
        font-size:14px!important ;
        // font-size: (750px / 12);
    }
    .main{
        padding-top: 0 !important;
    }
    footer{
        text-align: center;
    }
}
// 中屏
@media screen and (min-width:992px) {
    html{
        font-size:16px!important ;
        // font-size: (970px / 12);
    }
    .main{
        padding-top: 0 !important;
    }

    footer{
        text-align: center;
    }
}
// 大屏
@media screen and (min-width:1170px) {
    html{
        font-size:20px!important ;
        // font-size: (1170px / 12);
    }
    footer{
        text-align:left;
    }
}
body{
    background-color: #f6f6f6 !important;
}
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
// 头部导航栏
.header{
    width: 100%;
    height: 4.5rem;
    line-height: 4.5rem;
    background-color: green;
    z-index: 999;
    .logo{
        img{
            width: 100%;
        }
    }
    .nav-one{
        li{
            float: left;
            &:nth-child(8) a{
                color: black;
                border-left: 0;
            }
            a{
                font-size: 1rem;
                padding: 0 1rem;
                color: #fff;
                border-left: .05rem solid rgba(255, 255, 255, 0.1);
                &:hover{
                    color: black;
                    text-decoration: none;
                }
            }
        }
    }
    .search{
        height: 4.5rem;
        position: relative;
        a{
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            color: #fff;
            font-size: 1rem;
        }
    }
}
.header-two{
    padding-top: 4.5rem;
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 7rem;
    ul{
        li{
            // width: (100% / 8);
            float: left;
            &:nth-child(8) a{
                color: black;
                border-left: 0;
            }
            a{
                padding: 0.5rem 2rem;
                font-size: 1.3rem;
                border-left: 1px solid green;
                color: #fff;
                &:hover{
                    color: black;
                    text-decoration: none;
                }
            }
        }
    }
}
.header-three{
    background-color: green;
    width: 100%;
    border-bottom: 1px solid green;
    height: 4.5rem;
    line-height: 4.5rem;
    position: relative;
    text-align: center;
    .first{
        color: #fff;
        font-size: 1.5rem;
        text-decoration: none;
        // background-color: tomato;
        height: 4.5rem;
        display: block;
            span{
                display: block;
                margin-top: 1rem;
                width: 2rem;
                height: 2rem;
                border-top: 2px solid #fff;
                border-bottom: 2px solid #fff;
        }
        &:hover +.wai-nav{
           transform: translateX(0);
         
        }

    }
    .last{
        color: #fff;
        font-size: 1.5rem;
        text-decoration: none;
        display: block;
        &:hover{
            color: #fff;
        }
    }
    // 外部导航栏
.wai-nav{
    position: absolute;
    top: 4.5rem;
    left: 0;
    transform: translateX(-100%);
    width: 50%;
    height: 100rem;
    text-align: left !important;
    line-height: normal;
    // animation: move 3s forwards;
    transition: all 0.3s linear;
    background-color: #fff;
    z-index: 99;
    .wai-a{
        display: block;
        width: 100%;
        padding: 1rem 0 1rem 2rem;
        font-size: 1.5rem;
        color: black;
        &:nth-child(1){
            &:hover{
                color: black;
            }
        }
        &:nth-child(2){
            color: green;
        }
        &:hover{
            color: green;
            text-decoration: none;
        }
    }
    &:hover{
        transform: translateX(0);
     }
}
    .three-banner{
        img{
            width: 16rem;
            height: 4rem;
        }
    }


}

第二个问题：

这个问题困扰了我一天的时间，我好多次都想改的放弃了，最后的做法却让我吐血三升。其实只需要给滑出的导航添加一个：hover就可以了，让他滑出来的时候鼠标可以放上去。最后我改出来之后真的让我吐血三升！

代码展示：

<div class="header-three visible-xs hidden-sm hidden-md">
        <div class="container">
            <div class="row">
                <a href="#" class="col-xs-2 first">
                    <span class="btn">
                    </span>
                </a>
                <div class="wai-nav">
                    <a href="#" class="glyphicon glyphicon-remove wai-a"></a>
                    <a href="#" class="wai-a">首页</a>
                    <a href="#" class="wai-a">新闻</a>
                    <a href="#" class="wai-a">推荐</a>
                    <a href="#" class="wai-a">热榜</a>
                    <a href="#" class="wai-a">育儿</a>
                    <a href="#" class="wai-a">美容</a>
                    <a href="#" class="wai-a">整形</a>
                    <a href="#" class="wai-a">养生</a>
                </div>
                <div class="col-xs-8 three-banner">
                    <img src="picture/logo.png" alt="">
                </div>
                <a href="#" class="col-xs-2 last"><span class="glyphicon glyphicon-search"></span></a>
            </div>
        </div>
    </div>

css代码：

.header-three{
    background-color: green;
    width: 100%;
    border-bottom: 1px solid green;
    height: 4.5rem;
    line-height: 4.5rem;
    position: relative;
    text-align: center;
    .first{
        color: #fff;
        font-size: 1.5rem;
        text-decoration: none;
        // background-color: tomato;
        height: 4.5rem;
        display: block;
            span{
                display: block;
                margin-top: 1rem;
                width: 2rem;
                height: 2rem;
                border-top: 2px solid #fff;
                border-bottom: 2px solid #fff;
        }
        &:hover +.wai-nav{
           transform: translateX(0);
         
        }

    }
    .last{
        color: #fff;
        font-size: 1.5rem;
        text-decoration: none;
        display: block;
        &:hover{
            color: #fff;
        }
    }
    // 外部导航栏
.wai-nav{
    position: absolute;
    top: 4.5rem;
    left: 0;
    transform: translateX(-100%);
    width: 50%;
    height: 100rem;
    text-align: left !important;
    line-height: normal;
    // animation: move 3s forwards;
    transition: all 0.3s linear;
    background-color: #fff;
    z-index: 99;
    .wai-a{
        display: block;
        width: 100%;
        padding: 1rem 0 1rem 2rem;
        font-size: 1.5rem;
        color: black;
        &:nth-child(1){
            &:hover{
                color: black;
            }
        }
        &:nth-child(2){
            color: green;
        }
        &:hover{
            color: green;
            text-decoration: none;
        }
    }
    &:hover{
        transform: translateX(0);
     }
}
    .three-banner{
        img{
            width: 16rem;
            height: 4rem;
        }
    }


}

可恶啊！ 啊！啊！啊！啊！啊！

请添加图片描述

chnnds
关注
  • 11
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
初中语文文摘文苑我曾经爱过你
09-09
【标题】：“初中语文文摘文苑我曾经爱过你”——普希金诗歌解析 【描述】：这篇内容摘自初中语文教材，选用了俄国著名诗人亚历山大·谢尔盖耶维奇·普希金的诗作《我曾经爱过你》。通过这首诗，我们可以深入理解...
初中语文文摘人生你信仰死亡我信仰活着
09-09
2012年，作者亲身经历了疾病的折磨，这段经历让她深刻体会到生命的脆弱，但也让她明白，经历过痛苦后的坚韧才是真正的力量。在医院，她遇到了那位年轻姑娘，她因为病痛和感情的双重打击选择逃避，选择死亡作为信仰。...
折磨我致死的uni.createInnerAudioContext()
01-20
今天项目用到uni的音频播放功能 我脑海里第一印象就是audio 标签 有标签啊 然后我就看到了这样的一段话， 抱着学习的态度 我开始了万恶的旅程 需要的样式是这样的 给我的数据是这样的 一看就是v-for来进行展示的让...
感谢那些折磨我的学生班主任读后感.doc
09-16
《感谢那些折磨我的学生》这本书为新任班主任提供了一次宝贵的学习机会，它揭示了班主任工作的艺术性和策略性。在阅读这本书后，我深感启发，尤其是“和学生相处有艺术”这一章节，让我对班主任的角色有了全新的认识...
Drive Health(检测你硬盘寿命) 2.0.30 中文绿色版
06-03
　你的硬盘是不是每天都要“吞吐”大量的数据，每天都要面对你同时操作几个大型程序的“折磨”？它现在健康状况如何？Drive Health 就能解答你的谜团，它能帮你判断硬盘的“生命之火”到底燃烧得怎样。这个工具允许...
CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(二)
08-26 1060
CRUD中，如何做到全端通吃，基于ABP的Dto模块，通过对Dto的编辑，从而控制全部的前端内容，让数据的表格和数据的表单做到动态创建，动态验证等！
html文本文字中保留空格和换行
qq_41985405的博客
08-26 235
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
webpack打包html
svygh123的专栏
08-22 500
Webpack 是一个非常强大的模块打包器，它可以将各种资源（如 JavaScript、CSS、HTML 文件等）作为模块来处理和打包。对于模块化的 HTML 网站，Webpack 可以帮助你优化资源加载、管理依赖关系以及实现代码分割等功能。
html快速入门
m0_52049533的博客
08-22 656
/
【功能自动化】使用HTMLTestRunner生成测试报告
a272329874a的博客
08-29 132
1.部署webtours网站。
java一键生成数据库说明文档html格式
无极低码
08-26 327
要验收项目了，要写数据库文档，一大堆表太费劲了，直接生成一个吧，本来想用个别人的轮子，网上看了几个，感觉效果不怎么好，自己动手写一个吧。抽空再把字典表补充进去就OK了先看效果：目录快速导航生成效果。
深入源码，洞察迭代 8 年的 html 文本转换库
易迟的专栏
08-26 691
在前面RAG 项目结构化文件解析方案比较文章中对常见的 html 解析方案进行了比较，发现 html_text + python-readability 可以实现高质量的 html 内容提取。在前一篇文章迭代 14 年的高质量 html 提取方案中对 python-readability 库进行了介绍，这篇文章就对剩下的html_text库进行介绍。忽略内联样式、javascript、注释和其他用户通常不可见的文本；空白内容标准化，在内联元素周围添加空格分隔内容；
Java学习Day33：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 904
JS语句;
Html 添加音效音乐音频播放和震动效果
虎康的博客
08-29 37
此处如果表示音乐导入失败，可以使用 import 进行导入使用。点击指定点播放音乐，再次点击则停止音乐.给页面添加背景音乐和震动效果。
HTML实现俄罗斯方块
m0_65134936的博客
08-21 894
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
HTML 总结
最新发布
2301_77527830的博客
08-29 447
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签。网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。为了可以使用这些预留字符，我们必须在html中使用字符转义。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 3355
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
html table tbody deleteRow有残留?
C201008的专栏
08-29 77
table移除多行不彻底的问题。
HTML静态网页成品作业(HTML+CSS)——抗击疫情网页(4个页面)
2301_78945238的博客
08-29 163
HTML静态网页成品作业(HTML+CSS)——抗击疫情网页(4个页面)
idea折磨操作多行代码快捷键
09-05
您好！如果您正在使用IDE（集成开发环境），可能会有一些快捷键可以帮助您进行多行代码的折叠和展开操作。这些快捷键因IDE而异，以下是一些常见IDE中的示例： 1. Eclipse：在Eclipse中，可以使用以下组合键进行多行代码的折叠和展开操作： - 折叠：Ctrl + Shift + /（数字键盘上的） - 展开：Ctrl + Shift + *（数字键盘上的） 2. IntelliJ IDEA：在IntelliJ IDEA中，可以使用以下组合键进行多行代码的折叠和展开操作： - 折叠：Ctrl + -（减号键） - 展开：Ctrl + +（加号键） 3. Visual Studio：在Visual Studio中，可以使用以下组合键进行多行代码的折叠和展开操作： - 折叠：Ctrl + M，Ctrl + O - 展开：Ctrl + M，Ctrl + P 请注意，以上只是一些示例，具体的快捷键可能因IDE版本或设置而有所不同。建议您查阅相应IDE的文档或首选项设置，以获取更准确的信息。希望这些信息对您有所帮助！如果您还有其他问题，请随时提问。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值