<html>
<head>
<title>DIV+CSS 布局学习记录</title>
<style>
<!--
body,p,a {
margin: 0;
padding: 0;
text-align: center;
font: normal 14px/180% Tahoma,sans-serif;
}
#Box {
margin: 0 auto;
text-align: left;
width: 900px;
height: 1150px;
background: #eee;
}
#top {
width: 100%;
height: 120px;
background: #00FF00;
}
#logo {
float: left;
margin: 0;
width: 200px;
height: 70px;
background: red;
}
#menu {
width: 100%;
height: 30px;
background: #80FFFF;
}
#menu a {text-decoration: none;font-size:18px;font-weight:700;}
#menu ul {
float: left;
margin: 0px;
padding: 0px;
height: 30px;
width: auto;
}
#menu li {
float: left;
margin:0px 15px;
list-style-type: none;
width: 50px;
line-height: 30px;
}
.fge {
width: 100%;
height: 8px;
background: #fff;
}
#left {
float: left;
width: 860px;
height: 900px;
background: #ffffcc;
}
#right {
float: right;
width: 40px;
height: 900px;
background: red;
}
#l_a {
float: left;
width: 430px;
height: 440px;
background: #EEE;
}
#l_b {
float: right;
width: 430px;
height: 440px;
background: #8080FF;
}
.l_a_topa {
float: left;
width: 140px;
height: 220px;
background: red;
}
.l_a_topb {
float: left;
width: 140px;
height: 220px;
background: #FFFF00;
}
.l_a_topc {
float: left;
width: 150px;
height: 220px;
background: red;
}
.l_a_bottom {
float: left;
width: 430px;
height: 220px;
background: #FF00FF;
}
.ad {
clear: both;
width: 860px;
height: 100px;
background: #808000;
}
#tab {
width: 856px!important;
width: 860px;
height: 358px!important;
height: 360px;
background: #FFFF00;
border: 2px solid #00ff00;
border-top: none;
}
#tab h2 {
float: left;
margin: 0px;
width: 212px!important;
width: 214px;
height: 35px!important;
height: 40px;
text-align: center;
padding-top: 5px;
border: 2px solid #00ff00;
background: #FF00FF;
cursor: pointer;
border-right: none;
}
#tab .yc {
display: block;
border-bottom: none;
background: #FFFF00;
}
#tab .ul {
display: block;
}
#tab_bottom {
padding-left: 20px;
padding-top: 20px;
float: left;
margin: 0px;
width: 100%;
height: 314px!important;
height: 318px;
}
#tab_bottom ul {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
list-style-type: none;
display: none;
}
.bottom {
clear: both;
width: 900px;
height: 90px;
background: #ccc;
}
-->
</style>
</head>
<body>
<div id="Box">
<div id="top">
<div id="logo"> Logo </div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.newxing.com/">首页</a></li>
<li><a href="/">新闻</a></li>
<li><a href="/">电影</a></li>
</ul>
</div>
<div class="fge"></div>
<div id="left">
<div id="l_a">
<div class="l_a_topa"></div>
<div class="l_a_topb"></div>
<div class="l_a_topc"></div>
<div class="l_a_bottom"></div>
</div>
<div id="l_b"></div>
<div class="ad">广告位</div>
<div id="tab"><!--tab开始-->
<h2 onclick="tab(1)" class="yc" style="border-left:none;">选项一</h2>
<h2 onclick="tab(2)" >选项二</h2>
<h2 onclick="tab(3)" >选项三</h2>
<h2 onclick="tab(4)" style="width:214px!important;width:214px;">选项四</h2>
<div id="tab_bottom">
<ul class="ul">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<ul>
<li>222222</li>
<li>222222</li>
<li>222222</li>
</ul>
<ul>
<li>3333333</li>
<li>3333333</li>
<li>3333333</li>
<li>3333333</li>
<li>3333333</li>
</ul>
<ul>
<li>444444444</li>
<li>44444444444444444444444</li>
<li>4444444444444</li>
<li>4444444444444</li>
<li>4444444444444</li>
</ul>
</div>
</div><!--tab结束-->
</div><!--Box End-->
<div id="right">右边</div>
<div class="bottom">底部</div>
<script type="text/javascript">
var h=document.getElementById("tab").getElementsByTagName("h2"); //获取 ID为 "tab" 块里面的 h4 标签有多少个！
var u=document.getElementById("tab").getElementsByTagName("ul"); //获取 ID为 "tab" 块里面的 ul 标签有多少个！
function tab(x)
{
for(var i=0;i<h.length;i++){
if(x-1==i)
{
u[i].className="ul";
h[i].className="yc";
}else
{
u[i].className="";
h[i].className="";
}
}
}
</SCRIPT>
</body>
</html>
08-12
488
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
