日记--css样式&layui侧边导航局部刷新&iframe和ajax区别&侧边导航变化未触发页面滚动条&div按序排列&个人中心导航实现&layui下拉框不显示

最新推荐文章于 2023-06-20 14:16:43 发布

VIP文章 M . H ~

最新推荐文章于 2023-06-20 14:16:43 发布

阅读量577

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46045444/article/details/119460990

版权

整体展示
在这里插入图片描述

基本布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <link rel="stylesheet" href="E:/HQ/ubundun/cpam-ubuntu-master/src/main/webapp/layui/css/layui.css">
    <script src="E:/HQ/ubundun/cpam-ubuntu-master/src/main/webapp/layui/layui.js"></script>

    <style>
        html{
   
            background:blue;
        }
        body{
   

        }
        .top{
   
            position:fixed;
            left:0%;
            top:0%;
            width:100%;
            height:11%;
            background-color: #00ff7b;
        }
        .left{
   
            position:fixed;
            top:13%;
            left:0%;
            width:12%;
            height:auto;
            background-color: #749584;
        }
        .content{
   
            position:fixed;
            top:13%;
            left:14%;
            width:84%;
            height:80%;
            background-color: #22aa64;
        }
        div1{
   
            width:80%;
            left:10%;
            height:100%;
            position:absolute;
            background-color:red;
        }
        div2{
   
            position:absolute;
            display:inline-block;
            width:100%;
        }
    </style>
</head>
<body>
<div class="top"></div>>
<div class="left">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width:100%">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;" >默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
                <dd><a href="">跳转</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>
</div>>
<div class="content">
    <div1 >
        <div2 style="top:5%;height:60%;background-color: #00ff04">

        </div2>
        <div2 style="top:65%;height:30%;background-color: #eeff00">

        </div2>
    </div1>
</div>>
<script>
    layui.use('element', function() {
   
        var element = layui.element;
    });

</script>
</body>

</html>

在这里插入图片描述
表示跳转到页面顶部
 一个死链接，执行空事件
点击后是不会跳转的，一般用于开发时页面还未完成

iframe和ajax区别–页面局部跳转的使用

iframe包含了一整个页面，页面布局的时候需要，ajax一般只是在一些小的改变的时候需要，比如一些文字获取，所以ajax实际上是弥补了iframe在小的动态信息获取上的一些空白
如果想使用不刷新的技术，使用iframe，ajax的话需要写一些声明代码，比较麻烦，如果需要服务器进行复杂运算的话使用ajax比较好

    <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width:100%">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;" >默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" onclick="turnto('./1.html')">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
                <dd><a href="">跳转</a></dd>
            </dl>
        </li>

<iframe class="content" id="c1" src="./main.html" scrolling="no">
</iframe>>

<script>
    layui.use('element', function() {
   
        var element = layui.element;
    });
    function turnto(url){
   
        $("#c1").attr("src", url)
    }

</script>

此时实现了侧边栏页面局部跳转功能
设置一些样式
a:link 是超链接平常的状态
a:hover是超链接样式，在鼠标浮动在该元素时，可以设置其样式
a:active是点击的时候的状态

去滚动条样式不去除功能
滚动条先设置了具体高度才可以使用，包括页面

        .left::-webkit-scrollbar {
   
            display: none !important;
        }

侧边栏样式设计整体效果

在这里插入图片描述
继续修改部分样式

		.navbar-ul {
   
			text-align: left;
			width: 100%;
			/*height: 800px;*/
			background: white !important;
			border-radius: 10px;
		}
		.layui-nav-tree .layui-nav-child dd.layui-this,
		.layui-nav-tree .layui-nav-child dd.layui-this a,
		.layui-nav-tree .layui-this,
		.layui-nav

最低0.47元/天解锁文章

M . H ~

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
日记--css样式&layui侧边导航局部刷新&iframe和ajax区别&侧边导航变化未触发页面滚动条&div按序排列&个人中心导航实现&layui下拉框不显示

基本布局如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html;
复制链接

扫一扫