css定位+侧边栏代码

最新推荐文章于 2024-05-31 14:44:29 发布
最新推荐文章于 2024-05-31 14:44:29 发布
阅读量206 收藏 1
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wpxhjl/article/details/131790668
版权

 定位:position

        1 position:relative:相对定位

        在使用相对定位的情况下，不添加偏移量定位元素部发生变化且根据自身定位

        相对定位会占据原来位置不脱离文档流和文本流

        2 绝对定位 position:absolute

        绝对定位脱离文本 文档流

        当没有父级或且父级没有定位，则根据窗口定位

        当父级有定位，则根据父级定位

        3 固定定位 fixed

        根据窗口定位 定位后就固定不动了

        固定定位脱离位文本文档流

        4 粘性定位position:sticky

        粘性定位刚开始没达到阀值之前，在自己原来位置类似相对定位

        当阀值达到时，变成固定定位，根据父元素定位

        z-index调层级  元素必须有定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

#box1{

    width: 200px;

    height: 510px;

    background-color: rgb(61, 164, 17);

    margin: 20px 50px;

}

#box1>ul>li{

    list-style: none;

    width: 200px;

    height: 85px;

    line-height: 85px;

    text-align: center;

    font-size: 25px;

    font-family: "黑体";

}

#box1>ul>li:hover{

    background-color:gray;

}

#box2{

    width: 800px;

    height: 510px;

    background-color: rgba(250, 246, 246, 0.5);

    /* display: none; */

    position: absolute;

    top: 0px;

    left: 200px;

    display: none;

}

#box1>ul>li:nth-child(1):hover #box2{

    display: block;

}

.box1{

    position: relative;

}

.box3{

    position: relative;

}

.box2{

    margin: 0px 0px;

    position: absolute;

    width: 800px;

    height: 510px;

    border: 1px solid black;

    display: none;

   top: -85px;

    left: 200px;

    background-color: rgba(255,255,25,0.5);

}

#box1>ul>li:nth-child(2):hover .box2{

    display: block;

}

#box2>ul>li{

    list-style: none;

    height: 30px;

    line-height: 30px;

    text-align: center;

    width: 150px;

    float: left;

    font-size: 14px;

    font-family: "楷体";

}

#box2>ul{

    float: left;

    width: 800px;

    height: 50px;

}

    </style>

</head>

<body>

   <div id="box1">

        <ul>

             <li class="box1">全部商品分类

                <div id="box2">

                  <ul>

                    <li>绿茶</li>

                    <li>西湖龙井</li>

                    <li>黄山毛峰</li>

                    <li>安吉白茶</li>

                    <li>3151351</li>

                  </ul>

                  <ul>

                    <li>乌龙茶</li>

                    <li>铁观音</li>

                    <li>大红袍</li>

                    <li>水仙</li>

                    <li>肉桂</li>

                  </ul>

                  <ul>

                    <li>红茶</li>

                    <li>正山小种</li>

                    <li>祁门红茶</li>

                    <li>金骏眉</li>

                    <li>坦洋工夫</li>

                  </ul>

                  <ul>

                    <li>黑茶</li>

                    <li>白沙溪黑茶</li>

                    <li>普洱茶饼</li>

                    <li>普尔砖茶</li>

                    <li>普洱沱茶</li>

                  </ul>

                  <ul>

                    <li>品牌</li>

                    <li>元戎</li>

                    <li>顶峰</li>

                    <li>公孡</li>

                    <li>一品堂</li>

                  </ul>

                  <ul>

                    <li>价格</li>

                    <li>100元以下</li>

                    <li>100-300元</li>

                    <li>300元以上</li>

                  </ul>

                  <ul>

                    <li>净含量</li>

                    <li>50g以下</li>

                    <li>51-100g</li>

                    <li>101-250g</li>

                    <li>250g以上</li>

                  </ul>

                  <ul>

                    <li>包装</li>

                    <li>经济自饮装</li>

                    <li>精品礼盒装</li>

                  </ul>

                  <ul>

                    <li><img src="../img/5.jpg" alt="" width="800px"></li>

                  </ul>

                </div>

             </li>

            <li class="box3">商店

                <div class="box2">

                </div>

            </li>

             <li>咨询</li>

             <li>联系方式</li>

             <li>关于我们</li>

             <li>帮助</li>

        </ul>

</div>

</body>

</html>

大大大大大猩猩
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
9种html5+css3隐藏侧边栏导航菜单动画效果.rar
04-10
9种html5+css3隐藏侧边栏导航菜单动画效果;有波浪形、滑动形、角落隐藏形，方便用于模板，可直接使用，快速建网
通用的企业微信多租户SaaS管理系统源码，得益于 Swoole 和 Hyperf 框架的优秀，超高性能灵活的可扩展性。
03-13
开源的企业微信应用开发框架&引擎，是一套通用的企业微信多租户SaaS管理系统，得益于 Swoole 和 Hyperf 框架的优秀，可提供超高性能的同时，也保持着极其灵活的可扩展性。 应用场景 可用于电商、金融、零售、餐饮服装等服务行业的企业微信用户，通过简单的分流、引流转化微信客户为企业客户，结合强大的后台支持，灵活的运营模式，建立企业与客户的强联系，让企业的盈利模式有了多种不同的选择。 功能特性 六大模块助力企业营销能力升级： 引流获取：通过多渠道活码获取客户，条理有序分类 客户转化：素材库、欢迎语互动客户，加强与客户联系 客户管理：精准定位客户，一对一标签编辑，自定义跟踪轨迹，流失客户提醒与反馈 客户群管理：于客户的基础，进一步获取客户裂变，自动拉群。集中管理，快速群发 聊天侧边栏：提高企业员工沟通效率，精准服务 企业风控：客户聊天记录存档，并设立敏感词库、敏感词报警，多方位跟进管理员工服务
JS+CSS实现侧边栏跟随浏览器滚动效果
09-22
看月光博客，卢松松博客，文章页的侧边栏都可以随着浏览器滚动而停留在页面，羡慕了吧。其实我们也可以用这种特效的呢。下面，就讲讲如何实现这个效果吧~这个是卢松松博客原创的，我稍稍介绍了一下而已哈！
CSS3 实现侧边栏展开收起动画
09-25
主要介绍了如何使用CSS3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。
CSS3侧边栏菜单 带可爱的小图标菜单
08-23
我们已经分享过很多漂亮的CSS3菜单了，今天要分享的这款CSS3菜单是侧边栏菜单，菜单整体式停靠在网页的侧边，鼠标滑过时才会展开菜单，该CSS3侧边栏菜单拥有一套漂亮的svg小图标，菜单的整体样式非常清新，是一款不错的CSS3菜单。
侧边栏菜单 纯css
07-03
纯css的侧边栏菜单
从特效入手，深入了解CSS（四）动态侧边栏
黑猫几绛的博客
04-30 845
不建议跳跃阅读！ 这篇文章将从头开始介绍如何实现一个特效 中间偶尔会穿插一些css3或平时接触不多的css属性
CSS实现侧边栏
Sunset_Sunshine的博客
04-12 1941
CSS实现侧边栏 侧边栏使用窗口定位 position:fixed; 侧边栏窗口定位 随着浏览器窗口的移动而移动 先窗口定位 然后top right 调整位置 aside{ position: fixed; top: 185px; right: 23px; } 关于锚点 HTML5废除了HTML4只能使用a标签的name属性来进行定位 而是设置ID属性来定位，避免了4中必须嵌套a标签的繁杂 定位锚点 <a href="#+需要定位元素的ID"></a&gt
用css设计简单侧边栏
m0_48296211的博客
04-12 297
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> /*1.把a转...
css导航栏，侧边栏
t1220130004的博客
12-08 699
【代码】导航栏，侧边栏。
js+css实现全屏侧边栏
10-15
主要为大家详细介绍了js+css全屏侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css+div+js侧栏
07-23
css+div+js侧栏 css+div+js侧栏 css+div+js侧栏
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
weixin_52938153的博客
12-23 3388
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
html及css实现侧边栏效果
qq_45429152的博客
02-10 6848
html及css实现侧边栏效果
CSS+JS实现侧边栏
学习使我快乐_玉祥
04-18 3626
先上图 功能： 1、点击按钮弹出侧边栏，点击按钮关闭侧边栏； 2、侧边栏弹出时，其他部分变暗，点击变暗区域也可以收起侧边栏 首先 我这里采用两个div叠加作为基础框架。底层div显示内容，上方div显示侧边栏，因此需要将body固定一下，在body放置两个div。 css html,body{ padding: 0; margin: 0; width: 100%; height: 100%; } body{ position: relative;
CSS实现双居中侧边栏
weixin_41879063的博客
03-31 287
Document
【html+css】主页侧边导航栏设计
m0_67930426的博客
11-20 2773
【代码】【html+css】主页侧边导航栏设计。
CSS实现一个雨滴滑落效果
云加速
05-28 1259
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 277
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
实现vscode侧边栏效果
05-17
要实现类似于 VS Code 的侧边栏效果，可以使用以下步骤： 1. 使用 HTML 和 CSS 创建一个侧边栏容器，并将其定位在页面的左侧或右侧。 2. 将侧边栏容器的宽度设置为固定值或百分比，以便它可以随着窗口大小的改变而自适应。 3. 在侧边栏容器中创建一个列表，其中包含侧边栏中的各个部分或选项。每个列表项都应该具有一个图标或文本标签，以便用户可以轻松识别它们。 4. 使用 CSS 样式对每个列表项进行样式设置，例如：背景颜色、字体大小、字体颜色、边框等。 5. 使用 JavaScript 编写代码，在用户点击侧边栏中的某个选项时，将其内容显示在主窗口中。您可以使用 AJAX 或其他技术来获取所需的内容，并将其动态加载到主窗口中。 6. 如果您需要支持多个侧边栏，可以使用相同的技术来创建多个侧边栏容器和对应的列表。 这些步骤可以帮助您实现类似于 VS Code 的侧边栏效果。但是，请注意，这是一个比较复杂的任务，需要一定的 HTML、CSS 和 JavaScript 技能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值