您现在的位置: 365建站网 > 365学习 > 纯CSS后台框架

纯CSS后台框架

文章来源:365jz.com     点击数:673    更新时间:2011-02-16 18:18   参与评论

实质就是一个切换卡,关键是如何让鼠标从按钮移到面板上时,面板不会消失。用到div:hover与CSS3圆角

<!DOCTYPE HTML>
<html>
<head>
<title>纯CSS后台框架 by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.main_console
{
border-top
:30px solid #c2e1f8;
padding
: 40px;
background
: #c2e1f8;
height
:500px;
border-radius
:10px;
position
:relative;
}
.main_client
{
position
:absolute;
width
:800px;
height
:500px;
top
:0;
left
:150px;
z-index
:1;
border-radius
:10px;
background
:#8ed2f3;
}
.column_title
{
width
:150px;
height
:30px;
border-top
:1px solid #fff;
border-left
:1px solid #fff;
border-bottom
:1px solid #3183a1;
line-height
:30px;
text-align
:center;
color
:#3183a1;
font-size
:12px;
}
.main_column:hover .column_title
{
background
:#8ed2f3;
color
:#fff;
}
/*.main_panel_wraper的作用是用于防止它移到面板上时面板立即消失*/
.main_panel_wraper
{
position
:absolute;
left
:148px;/*注意这里,一定要把它与main_column处于交集状态*/
top
:0;
z-index
:2;
display
:none;
width
:800px;
height
:500px;
}
.main_column:hover .main_panel_wraper
{
display
:block;
}
/*真正用于放置内容的地方*/
.main_panel
{
width
:780px;
height
:480px;
border-radius
:10px;
margin
:10px;
background
:#dff9fb;
}
</style>
</head>
<body>
<div class="main_console">
<div class="main_column">
<div class="column_title">AAAAA</div>
<div class="main_panel_wraper">
<div class="main_panel">AAAA的面板</div>
</div>
</div>
<div class="main_column">
<div class="column_title">BBBB</div>
<div class="main_panel_wraper">
<div class="main_panel">BBBB的面板</div>
</div>
</div>
<div class="main_column">
<div class="column_title">CCCC</div>
<div class="main_panel_wraper">
<div class="main_panel">CCCC的面板</div>
</div>
</div>
<div class="main_column">
<div class="column_title">DDDD</div>
<div class="main_panel_wraper">
<div class="main_panel">DDDD的面板</div>
</div>
</div>
<div class="main_client"></div>
</div>
</body>
</html>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (673人查看-2条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------