整体展示
基本布局
<!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-tree .layui-this>a,