基于纯HTML5+CSS3的一个后台或者前台布局
前言:本实例基于纯html和css3,不需要任何插件,可以作为新手参考!
第一部分
1.0 主要实现了:点击菜单改变颜色、下拉选择菜单、div选项卡、div相对布局等
话不多说,先上图:
图一:
图二:
1.1 代码部分
1.11 HTML部分(Index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>keleiUI</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="kelei_main">
<div class="kelei_top">
<ul class="menu">
<li>
<a href="">菜单一</a>
</li>
<li>
<a href="">菜单二</a>
</li>
<li>
<a href="">菜单三</a>
</li>
<li>
<a href="">菜单四</a>
</li>
<li>
<a href="">菜单五</a>
</li>
<li>
<a href="">菜单</a>
</li>
<li>
<a href="">菜单一</a>
</li>
</ul>
</div>
<div class="kelei_left">
<div class="kelei_menu_row1">
<div class="kelei_menu_name">测试菜单一</div>
<div class="kelei_menu_value" id="detail_title">
<div onmouseover="showdiv(1)">
<a href="#">首页</a>
</div>
<div onmouseover="showdiv(2)">
<a href="#">下拉测试菜单二</a>
</div>
<div onmouseover="showdiv(3)">
<a href="#">下拉测试菜单三</a>
</div>
<div onmouseover="showdiv(4)">
<a href="#">下拉测试菜单四</a>
</div>
<div onmouseover="showdiv(5)">
<a href="#">下拉测试菜单五</a>
</div>
</div>
</div>
<div class="kelei_menu_row2">
<div class="kelei_menu_name">测试菜单一</div>
<div class="kelei_menu_value" id="detail_title">
<div onmouseover="showdiv(1)">
<a href="#">首页</a>
</div>
<div onmouseover="showdiv(2)">
<a href="#">下拉测试菜单二</a>
</div>
<div onmouseover="showdiv(3)">
<a href="#">下拉测试菜单三</a>
</div>
<div onmouseover="showdiv(4)">
<a href="#">下拉测试菜单四</a>
</div>
<div onmouseover="showdiv(5)">
<a href="#">下拉测试菜单五</a>
</div>
</div>
</div>
<div class="kelei_menu_row3">
<div class="kelei_menu_name">测试菜单一</div>
<div class="kelei_menu_value" id="detail_title">
<div onmouseover="showdiv(1)">
<a href="#">首页</a>
</div>
<div onmouseover="showdiv(2)">
<a href="#">下拉测试菜单二</a>
</div>
<div onmouseover="showdiv(3)">
<a href="#">下拉测试菜单三</a>
</div>
<div onmouseover="showdiv(4)">
<a href="#">下拉测试菜单四</a>
</div>
<div onmouseover="showdiv(5)">
<a href="#">下拉测试菜单五</a>
</div>
</div>
</div>
<div class="kelei_menu_row4">
<div class="kelei_menu_name">测试菜单一</div>
<div class="kelei_menu_value" id="detail_title">
<div onmouseover="showdiv(1)">
<a href="#">首页</a>
</div>
<div onmouseover="showdiv(2)">
<a href="#">下拉测试菜单二</a>
</div>
<div onmouseover="showdiv(3)">
<a href="#">下拉测试菜单三</a>
</div>
<div onmouseover="showdiv(4)">
<a href="#">下拉测试菜单四</a>
</div>
<div onmouseover="showdiv(5)">
<a href="#">下拉测试菜单五</a>
</div>
</div>
</div>
</div>
<div class="kelei_right">
<p>右侧</p>
</div>
<div class="kelei_center">
<div id="detail_info">
<div id="info1" class="detail_info_same" style="display: block">
首页
</div>
<div id="info2" class="detail_info_same" style="display: none">
下拉测试菜单二
</div>
<div id="info3" class="detail_info_same" style="display: none">
下拉测试菜单三
</div>
<div id="info4" class="detail_info_same" style="display: none">
下拉测试菜单四
</div>
<div id="info5" class="detail_info_same" style="display: none">
下拉测试菜单五
</div>
</div>
<div id="detail_info">
<div id="info2" class="detail_info_same" style="display: none">
下拉测试菜单二
</div>
<div id="info3" class="detail_info_same" style="display: none">
下拉测试菜单三
</div>
<div id="info4" class="detail_info_same" style="display: none">
下拉测试菜单四
</div>
<div id="info5" class="detail_info_same" style="display: none">
下拉测试菜单五
</div>
</div>
<div id="detail_info">
<div id="info2" class="detail_info_same" style="display: none">
下拉测试菜单二
</div>
<div id="info3" class="detail_info_same" style="display: none">
下拉测试菜单三
</div>
<div id="info4" class="detail_info_same" style="display: none">
下拉测试菜单四
</div>
<div id="info5" class="detail_info_same" style="display: none">
下拉测试菜单五
</div>
</div>
<div id="detail_info">
<div id="info2" class="detail_info_same" style="display: none">
下拉测试菜单二
</div>
<div id="info3" class="detail_info_same" style="display: none">
下拉测试菜单三
</div>
<div id="info4" class="detail_info_same" style="display: none">
下拉测试菜单四
</div>
<div id="info5" class="detail_info_same" style="display: none">
下拉测试菜单五
</div>
</div>
</div>
<div class="kelei_down">
<p>底部</p>
</div>
</div>
</body>
</html>
1.12 CSS部分(Index.css)
.kelei_main {
width: auto;
height: 750px;
position: relative;
border: 1px solid #96c2f1;
background: #eff7ff;
border-radius: 5px;
}
.kelei_top {
width: 99%;
height: 15%;
z-index: 996;
top: 0.5%;
left: 0.5%;
right: 0.5%;
position: relative;
border: 1px solid #9bdf70;
background: #f0fbeb;
border-radius: 5px;
}
.kelei_left {
width: 24%;
height: 72%;
left: 0.5%;
top: 1%;
float: left;
position: relative;
border: 1px solid #bbe1f1;
background: #f0fbeb;
border-radius: 5px;
}
.kelei_center {
width: 59%;
height: 72%;
top: 1%;
left: 25%;
position: relative;
border: 1px solid #cceff5;
background:#f0fbeb;
border-radius: 5px;
}
.kelei_right {
width: 15%;
height: 72%;
top: 1%;
right: 0.5%;
position: relative;
float: right;
border: 1px solid #cceff5;
background: #f0fbeb;
border-radius: 5px;
}
.kelei_down {
z-index: 99;
position: absolute;
bottom: 0;
right: 0.5%;
left: 0.5%;
top: 89%;
width: 99%;
height: 10%;
border: 1px solid #cee3e9;
background: #f0fbeb;
border-radius: 5px;
}
.menu {
position:relative;
top: 46%;
left: 30%;
width: 80%;
height: 40%;
/*去除内联元素间隙*/
font-size: 0;
/*去掉ul自带的.格式*/
list-style: none;
padding: 0;
}
.menu li {
/*将元素转换为行内块元素*/
display: inline-block;
width: 98px;
height: 48px;
border: 1px solid burlywood;
font-size: 16px;
/*将边框合并*/
margin-right: -1px;
text-align: center;
line-height: 48px;
}
.menu a {
font-family: "Microsoft YaHei UI";
color:#A9A9A9;
/*去掉a元素的下划线*/
text-decoration: none;
}
/*鼠标位于元素位置时改变元素样式*/
.menu li:hover {
background-color:burlywood;
}
.menu a:hover {
color: #fff;
}
.kelei_menu_row1 {
position: relative;
top: 5%;
left: 10%;
width: 80%;
}
.kelei_menu_row2 {
position: relative;
top: 10%;
left: 10%;
width: 80%;
}
.kelei_menu_row3 {
position: relative;
top: 15%;
left: 10%;
width: 80%;
}
.kelei_menu_row4 {
position: relative;
top: 20%;
left: 10%;
width: 80%;
}
.kelei_menu_name {
width: 80%;
height: 10%;
text-align: center;
line-height: 50px;
background:darkkhaki;
font-size: 20px;
}
.kelei_menu_value {
width: 80%;
height: 10%;
display: none;
background: none;
}
.kelei_menu_name:hover {
background:darkkhaki;
cursor: pointer;
}
.kelei_menu_row1:hover .kelei_menu_value {
display: block;
}
.kelei_menu_row2:hover .kelei_menu_value {
display: block;
}
.kelei_menu_row3:hover .kelei_menu_value {
display: block;
}
.kelei_menu_row4:hover .kelei_menu_value {
display: block;
}
.kelei_menu_value a {
/* 子菜单属性设置*/
display: block;
text-decoration: none;
height: 40px;
text-align: center;
line-height: 40px;
/*子菜单字体颜色*/
color:dimgray;
}
.kelei_menu_value a:hover {
/*子菜单点击后属性设置*/
background:darkgrey;
color: black;
}
1.13 JS部分(Index.js)
//切换选项卡功能
function showdiv(number){
for(var i=1;i<=5;i++){
if(i==number){
var obj=document.getElementById("info"+number);
obj.style.display="";
}else{
var obj=document.getElementById("info"+i);
obj.style.display="none";
}
}
}
结语:
欢迎批评指正,后续会继续更新完善。
附: