sideleft

最新推荐文章于 2022-06-19 20:51:13 发布
最新推荐文章于 2022-06-19 20:51:13 发布
阅读量419 收藏
点赞数
文章标签： html p2p css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suntxp2028/article/details/122405944
版权

<!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, initial-scale=1.0">

    <title>Document</title>

    <style>

        /*兼容浏览器*/

        *{

            padding: 0;

            margin: 0;

        }

        .content{

            width: 100%;

            height: 100%;

        }

        .content-left{

            width: 19%;

            height: 800px;

            background-color: #1c232f;

            /* 左浮动 */

            float: left;

        }

        .content-right{

            width: 81%;

            height: 800px;

            background-color: #6495ED;

            /* 右浮动 */

            float: right;

        }

        .left-title{

            height: 50px;

            width: 100%;

        }

        .left-title>a{

            display: block;

            width: 100%;

            height: 50;

            /* 垂直居中 */

            line-height: 50px;

            /* 水平居中 */

            text-align: center;

            color: white;

            text-decoration: none;

        }

        /* 分隔线 */

        .seg{

            height: 1px;

            width: 100%;

            background-color: black;

        }

        .nav{

            /* 调整与上一个标签的距离 */

            margin: 5px 0;

        }

        /* 菜单项主标题 */

        .nav-title{

            height: 40px;

            width: 100%;

            color: white;

            text-align: center;

            line-height: 40px;

            cursor: pointer;

        }

        .nav-content{

            width: 100%;

            height: 100%;

            background-color: #0c1119;

        }

        .nav-content>a{

            display: block;

            height: 30px;

            width: 100%;

            color: #cccccc;

            text-align: center;

            line-height: 30px;

            text-decoration: none;

            font-size: 14px;

        }

        /* 给标签添加伪类 */

        .nav-content>a:hover{

            display: block;

            height: 30px;

            width: 100%;

            color: #ffffff;

            text-align: center;

            line-height: 30px;

            background-color: #12040c;

            text-decoration: none;

        }

    </style>

    <script src="../jquery.min.js"></script>

    <script>

        /*加载函数*/

        $(function(){

            //隐藏所有的子标题

            $('.nav-menu').each(function(){

                $(this).children('.nav-content').hide();

            })

            //给所有的菜单项的主标题添加事件

            $('.nav-title').each(function(){

                $(this).click(function(){

                    //当点击主标题时,子标题区展示出来

                    //获取当下的子标题内容区

                    var navConEle= $(this).parent('.nav-menu').children('.nav-content');

                    //判断navConEle的对象display 这个属性的值是否为none

                    if(navConEle.css('display')!='none'){

                        //隐藏

                        navConEle.hide(500);

                    }

                    else

                    {

                        /*当要展开一个子标题列表 的时候需要将其它的孺子标题关闭*/

                        var conEle=navConEle.parents('.nav-menu');

                        var  menuEles=conEle.siblings();

                        menuEles.each(function(){

                            $(this).children('.nav-content').hide();

                        })

                       

                        //展开

                        navConEle.show(500);

                    }

                })

            })

        });

    </script>

</head>

<body>

    <div class="content">

        <div class="content-left">

            <div class="left-title">

                <a href="#">XX后台</a>

            </div>

            <div class="seg"></div>

            <!-- 菜单栏导航 -->

            <div class="nav">

                <!-- 每一个菜单栏项 -->

                <div class="nav-menu">

                    <!-- 主标题 -->

                    <div class="nav-title">商品管理</div>

                    <!-- 子标题 -->

                    <div class="nav-content">

                        <a href="#">商品列表</a>

                        <a href="#">添加商品</a>

                    </div>

                </div>

           

           

                <!-- 每一个菜单栏项 -->

                <div class="nav-menu">

                    <!-- 主标题 -->

                    <div class="nav-title">订单管理</div>

                    <!-- 子标题 -->

                    <div class="nav-content">

                        <a href="#">订单列表</a>

                        <a href="#">添加订单</a>

                    </div>

                </div>

           

           

                <!-- 每一个菜单栏项 -->

                <div class="nav-menu">

                    <!-- 主标题 -->

                    <div class="nav-title">类目管理</div>

                    <!-- 子标题 -->

                    <div class="nav-content">

                        <a href="#">类目列表</a>

                        <a href="#">添加类目</a>

                    </div>

                </div>

            </div>

            <div class="seg"></div>

        </div>

        <div class="content-right">

            <h1>内容区</h1>

        </div>

    </div>

</body>

</html>

suntxp2028
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网站首页导航栏移入移出动画（一）slideDown、slideUp
lifei932734766的博客
06-22 570
闲暇时间浏览别的网站发现首页导航栏有一个比较友好的动画，鼠标移入导航菜单，菜单item下拉内容缓慢显示，移出则迅速拉起消失，于是想着自己试着实现下。 首先想到元素hover，上代码。 <style> .ul>li:hover>.news{ display: block; } .news{ display:none; background: green; b
html左侧导航栏右侧显示内容
热门推荐
无心
08-02 2万+
效果图 代码 复制下来直接运行就可以 <!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
html垂直线6,html – div之间全高的垂直线
weixin_35926446的博客
05-30 95
我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数.现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高.我怎样才能做到这一点？因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作用.意向CSS.content {line-height: 1.1;background-color:...
给当前页或者跳转后页面的导航栏添加选中样式
lowers_sunshine的博客
06-15 2219
这边有两种情况，一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。直接上代码。 第一种情况： [html]  在CODE上查看代码片派生到我的代码片 一、     $(document).ready(function(){       $(".nav a").each(function(){
脚本控制自适应高度的缩短问题
10-30
var sideleft = document.getElementById("content-left").scrollHeight; var sideright = document.getElementById("content-right").scrollHeight; layoutHeight = Math.max(sideleft, sideright); document....
javascript HTML+CSS实现经典橙色导航菜单
11-23
- `.sideleft` 和 `.sideright`: 用于创建导航栏两端的边角效果，通过背景图像的重复和定位实现。 - `#navmenubar`: 包含实际的菜单项，设置了高度、浮动、内联展示、相对定位和边距，使得菜单项能够正确排列。 -...
RocketDock
12-01
SideLeft= 左 SideRight= 右 Z-Order= 外观 zTop= 总在最前 zNormal= 标准 zBottom= 总在最后 Offset= 偏移 Style= 样式 Theme= 主题 Opacity= 不透明度 SelectFont= 选择字体 About= ...
爬虫之selenium模块
灯火阑珊处
01-22 222
selenium模块 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器，完全模拟浏览器的操作，比如跳转、输入、点击、下拉等，来拿到网页渲染之后的结果，可支持多种浏览器 from selenium import webdriver browser=webdriver.Chrome...
contentSize、contentInset和contentOffset区别及相互关系
不积跬步，无以至千里；不积小流，无以成江海。
06-30 1万+
1、contentSize:The size of the content view. 这个size表示滚动视图可以滚动的大小，假如小于或等于滚动视图的frame.size，这时候滚动视图是不可以滚动的，连橡皮筋效果都没有 假如frame = (0 ,0 ,320 ,480) contentSize = (640 ,480)，代表你的scrollview可以横向滚动320的宽度。 2、conten
伪元素中content的用法详解
小白程序员的博客
09-28 1万+
content:""----->扩展 (1)content的值可以是文字和字符串啦 然后加在它的""里面哦 (2)content还可以是图片，没想到，你会想，这图片怎么加呢，上代码 <a href="http://www.baidu.com" style="color: red"> 这是链接&nbsp;&nbsp; </a> 在css样式中加上如下...
CSS经典布局之双飞燕布局
yuan5801551的博客
08-13 2029
CSS经典布局之双飞翼 布局 双飞翼就是两边不变中间伸缩，看淘宝就知道了 第一种实现方法:flex布局 css代码 .content{ display: flex; } .content-left{ flex: 0 0 200px; width: 200px; hei...
jQuery学习(一)----each遍历&&hasClass属性
kingken212的专栏
11-17 9343
jQuery 遍历 - each() 方法 实例 输出每个 li 元素的文本： $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 定义和用法 each() 方法规定为每个匹配元素规定运行的函数。 提示：返回 false 可用于及早停止循环。
html left属性,css中left是什么意思？
weixin_36343353的博客
06-04 5263
css中left是规定元素左边缘的属性，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。left也可以作为float属性的属性值，表示元素向左浮动。1、left属性：left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注释：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。说明对于 static...
jquery 写官网（全部功能）
yehaocheng520的博客
08-31 1612
jquery 写官网 最近有个需求就是写一个官网，内容包含：导航/简介/产品/优势/加入我们等。 导航点击事件 <div class="navList"> <a class="nav-item active" data-name="one" href="#shouye" target="_self">网站首页</a> <a class="nav-item" data-name="two" href="#pinpai" target="_self">品牌
html新闻左侧导航栏动态,网站导航栏如何实现动态效果
weixin_28688791的博客
05-31 1229
导航栏是每一个网站都要有的，那么对于一般的导航栏制作，相信大家都会，而且也不会遇到什么麻烦，但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员，那么下面就来为大家分析解答一下。Html代码：导航演示栏目1栏目2栏目3栏目4栏目5栏目6CSS代码：(nav.css).nav {width: 1200px;height: 40px;margin: 0 auto;display: flex;a...
slideDown和slideUp初始状态设置，使用animate替代
路漫漫的博客
09-23 922
使用jquery的slideDown展开效果时，需要使用slideUp效果关闭，才能使用slideDown效果展示，在处理初始状态时，需要先执行收起操作，会出现界面闪动的问题，造成界面不干净。 slideDown和slideUP的实质是{display:show}和{display:none} 如果使用{display:none}设置初始状态，slideDown的效果并不能展示 所以，经研究使用了animate方法来代替slideDown和slideUP方法 // jS文件 function s
CSS常见布局
qq_45829293的博客
06-19 756
实现思路：一般思路–直接写 flex弹性布局实现双栏 三栏布局 方法汇总： 2、方法2 使用方法：左右两边使用float浮动，中间使用margin来设置 注意：html中center在左右盒子的下面 原理： 3、方法3 使用方法：两边使用absolute，中间使用margin 原理： 4、方法4 使用方法：两边使用float和负margin 原理： 5、方法5 推荐使用-grid 使用方法：grid网格布局 grid-template-columns 属性设置列宽，grid-template

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值