侧边固定栏的制作

最新推荐文章于 2023-06-15 11:17:42 发布
最新推荐文章于 2023-06-15 11:17:42 发布
阅读量867 收藏 3
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cody0622/article/details/107431609
版权

#在网页中经常可以看见固定侧边栏，下面就介绍一下他们的实现过程：
首先用html写需要定位的文字及结构，一般用无序列表写：

<body>
    <ul class="fixul">
        <li class="fixli">
            <a href="#"></a>
            <p class="p">
                <span>400-888-1234</span>
                <span>7x24小时为您服务</span>
            </p>
        </li>
        <li class="fixli">
            <a href="#"></a>
            <p class="p">
                <span>联系客服</span>
                <span>CUSTOMER SERVICE</span>
            </p>
        </li>
        <li class="fixli">
            <a href="javascript:void()"></a>
            <div>
                <i></i>
                <span>扫码关注百度一下</span>
            </div>
        </li>
        <li class="fixli">
            <a href="#"></a>
        </li>
    </ul>
</body>

在这里插入图片描述

再次用css设置样式，首先把ul固定定位到屏幕右下方；然后再一步步设置效果，代码如下：

        .fixul li {
            list-style: none;
        }
        /* 将ul固定定位到屏幕右下方 */
        
        .fixul {
            position: fixed;
            height: 240px;
            width: 190px;
            bottom: 10px;
            right: 10px;
            text-align: right;
        }
        
        .fixul .fixli {
            height: 60px;
            position: relative;
        }
        
        .fixul .fixli a {
            display: inline-block;
            height: 50px;
            width: 50px;
        }
        
        .fixul .fixli:nth-of-type(3) div {
            height: 140px;
            width: 123px;
            position: relative;
            position: absolute;
            top: 0;
            left: 0;
            display: none
        }
        /* 给a标签添加背景图片 */
        
        .fixul .fixli:nth-of-type(1) a {
            background: url('../img/Tel.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(2) a {
            background: url('../img/QQ.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(3) a {
            background: url('../img/WeChat.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(3) i {
            position: absolute;
            left: 0px;
            height: 140px;
            width: 123px;
            border: 1px solid #15aafb;
            border-radius: 3px;
            background: url('../img/erweima.png') no-repeat;
            background-position: center 4px;
        }
        
        .fixul .fixli:nth-of-type(3) span {
            position: absolute;
            bottom: 9px;
            left: 9px;
            color: #15aafb;
        }
        
        .fixul .fixli:nth-of-type(4) a {
            background: url('../img/Top.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(1) p span:nth-of-type(1) {
            font-size: 14px;
            display: block;
        }
        /* 隐藏文字 */
        
        .fixul .fixli .p {
            position: absolute;
            top: -13px;
            left: 5px;
            display: none;
            text-align: center;
        }
        /* 文字换行 */
        
        .fixul .fixli .p span:nth-of-type(1) {
            font-size: 14px;
            display: block;
            color: #fff;
        }
        
        .fixul .fixli .p span:nth-of-type(2) {
            color: #c0e9ff;
        }
        /* 设置hover效果 */
        
        .fixul .fixli:nth-of-type(1) a:hover {
            width: 190px;
            background: url('../img/Tel1.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(1) a:hover+p {
            display: inline-block;
        }
        
        .fixul .fixli:nth-of-type(2) a:hover {
            width: 190px;
            background: url('../img/QQ1.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(2) a:hover+p {
            display: inline-block;
        }
        
        .fixul .fixli:nth-of-type(3) a:hover {
            background: url('../img/WeChat1.png') no-repeat;
        }
        
        .fixul .fixli:nth-of-type(3) a:hover+div {
            display: inline-block;
        }
        
        .fixul .fixli:nth-of-type(4) a:hover {
            background: url('../img/Top1.png') no-repeat;
        }

这是文字没有隐藏的效果
在这里插入图片描述
这是文字隐藏后的效果，也就是最终呈现效果
在这里插入图片描述

cody0622
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript - 固定的侧边栏（附效果动图）
Codefreyy
03-23 1157
效果 侧边栏始终和上面隔着固定距离 核心代码 <script> //获取元素 var side = document.querySelector('.side'); var banner = document.querySelector('.banner'); var goBack = document.querySelector('.goBack'); var main = document.q..
固定侧边栏
qq_52138438的博客
03-20 683
固定侧边栏 – 实现当滚动条下滑到某个位置时 侧边栏绝对固定 并显示相应文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
Vue中如何进行滚动吸顶与侧边栏固定
u013749113的博客
06-15 2286
在Vue中实现滚动吸顶和侧边栏固定效果，可以通过CSS和JavaScript来实现。我们可以利用Vue组件的生命周期钩子和滚动事件监听器来实现这些效果。通过这些技术，我们可以为用户提供更好的用户体验，使页面更加美观和易用。
html底部固定菜单栏,HTML+CSS底部footer两种固定方式
weixin_39702479的博客
06-25 5305
网页常见的底部栏(footer)目前有两种：一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;body {padding-bottom: 50px;}.footer {position: fixed;left: 0px;bottom: 0px;width: 100%;height: 50px;background-color: #eee;z...
html固定顶部导航栏和底部导航栏
qwqc262的博客
08-21 5178
固定顶部导航栏，在样式(css)中加入以下代码 position: fixed; z-index: 1000; right: 0; bottom: 0; left: 0px; top: 0px; width: 100%; background: #eaeaea 固定底部导航栏，在样式(css)中加入以下代码 position:fixed; left:0; bottom:0; width: 100%; z-index: 1000; background
折叠式侧边栏
qq_52683824的博客
12-16 1029
折叠式侧边栏 折叠式侧边栏：主要使用HTML+CSS有些许的JS 先是效果图，点击图标 HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>side menu</t
HTML侧边浮动/固定栏
09-10
HTML侧边浮动栏，已经有了基本的样式，直接放入代码即可
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
折叠侧边导航栏
09-22
折叠侧边导航栏 折叠侧边导航栏
jQuery侧边固定悬浮导航
02-03
jQuery侧边固定悬浮导航，在页面侧边的导航栏固定，中间为代码数据区，非常好用
基于html和CSS3制作简单侧边导航栏
09-24
本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
学习笔记 · 固定侧边栏（JS - BOM - scroll）
ABU_ablm的博客
07-17 426
固定侧边栏（JS - BOM - scroll）
html 左侧固定导航栏,前端布局-固定导航栏与侧边栏
热门推荐
weixin_39653717的博客
06-03 1万+
这篇博客介绍一下我个人是如何实现固定导航栏与侧边栏这一前端布局。下面一个图就是我最近刚实现的这一布局的截图，可以注意到，在顶部与左侧分别有导航栏与侧边栏用于网站的导航，下面就来介绍我在这种布局的写法。页面结构整体页面可以大体上分为导航栏，侧边栏以及内容板块(这里不讨论导航栏及侧边栏内部布局及特效，以后会讲)。因此，我们可以先用html首先对页面进行划分。12345CSS使用原理先简单说一下原理，我...
html中关于侧边导航栏和导航栏的编写
xxxmou的博客
02-04 7505
关于侧边导航栏和下拉菜单纯css编写
js+css+html实现固定侧边栏效果
橘猫吃不胖的博客
12-11 6654
js+css+html实现固定侧边栏效果1 案例描述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码部分5 全部代码6 position:fixed;说明 1 案例描述 我们在很多网站都看到过，当页面向下滚动时，侧边的导航栏并没有发生位置的改变，而是一直在侧边显示，具体可以参考CSDN个人主页效果，向下翻博客时，左边的导航栏没有发生变动，而且当下拉到一定的程度时，侧面会出现“返回顶部”的标识，点击即可立即回到顶部。本篇博客主要讲述如何实现这个功能。 案例分析： 当页面在最顶上时，侧边
JS 仿淘宝固定右侧侧边栏(可返回顶部)案例
qq_49900295的博客
03-25 1897
我们先看一下淘宝的侧边栏： 功能需求 1.原先侧边栏是绝对定位 2.当页面滚动到一定位置，侧边栏改为固定定位 3.页面继续滚动，会让返回顶部显示出来 比如说这是我们的页面： 当被页面卷去的部分刚好为header高度时，我们就将右侧侧边栏改为固定定位 当页面滚动到main主体部分时，让侧边栏显示返回顶部字样，点击返回顶部可以通过缓动动画滑到顶部 案例分析： 1.需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document 2.滚动到某个位置，就是判断页面被卷去的上部值。 3.页面被卷去的头
JS固定侧边栏教程总结
souzy的博客
02-12 2942
JS固定侧边栏教程总结 教程来自慕课网http://www.imooc.com/video/1019 固定侧边栏的基本思路： 计算侧边栏的实际高度，当滚动高度+可视页面高度大于侧边栏实际高度时，用JS的CSS文档化改变侧边栏的position为fixed scrollHeight+screenHeight > sideHeight /** * Created b
JavaScript 返回顶部效果
火星基地
10-27 318
实现效果： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
侧边栏的固定与自适应原来是这样实现的（持续更新）
weixin_33693070的博客
03-04 2287
摘要 刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。 正文 行内元素的高 众所周知，行内元素是无法通过直接设置height样式来设置高度的，我们常用的方法是设置 line-height, font-size 来撑高。可是不知道道友们有...
css侧边导航栏固定定位
最新发布
07-07
要实现固定定位的侧边导航栏，你可以使用CSS中的`position`属性来控制元素的定位方式。下面是一个简单的示例代码： ```html <!DOCTYPE html> /* 设置侧边导航栏的样式 */ .sidebar { position: fixed; /* 将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值