您的位置：首页 > Web前端 > HTML

简单的div练习---简记

2014-06-16 00:21 134 查看

 
<!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>
 <style type="text/css">
 <!--
 .d1 {
 background-color: #0CF;
 border:0px solid #d6d6d6;
 height: 5%;
 position: absolute;
 width: 100%;
 left: 0px;
 top: 0px;
 color: #F00;
 }
 .d2 {
 background-color: #CC6;
 border: 0px solid #D6D6D6;
 height:5%;
 position: absolute;
 width: 100%;
 top: 5%;
 left: 0px;
 }
 #apDiv1 {
 position:absolute;
 width:25%;
 height:85%;
 z-index:1;
 left: 0px;
 background-color: #9C6;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 top: 10%;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 }
 #apDiv2 {
 position:absolute;
 width:100%;
 height:5%;
 z-index:2;
 left: 0px;
 top: 95%;
 background-color: #09C;
 color: #F00;
 }
 #apDiv3 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:3;
 left: 25%;
 top: 10%;
 bottom: 5%;
 background-color: #C96;
 }
 #apDiv4 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:4;
 left: 25%;
 top: 52.5%;
 background-color: #0CF;
 bottom: 5%;
 }
 #apDiv5 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:5;
 left: 50%;
 top: 10%;
 background-color: #0CF;
 }
 #apDiv6 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:6;
 left: 50%;
 top: 52.5%;
 background-color: #C96;
 }
 #apDiv7 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:7;
 left: 75%;
 top: 10%;
 background-color: #C96;
 }
 #apDiv8 {
 position:absolute;
 width:25%;
 height:42.5%;
 z-index:8;
 left: 75%;
 top: 52.5%;
 background-color: #0CF;
 }
 -->
 </style></head>
  
 <body>
 <div class="d1">顶部</div>
 <div class="d2">导航区</div>
 <div id="apDiv1">列表区</div>
 <div id="apDiv2">底部</div>
 <div id="apDiv3">内容部1</div>
 <div id="apDiv4">内容部2 </div>
 <div id="apDiv5">内容部3</div>
 <div id="apDiv6">内容部4</div>
 <div id="apDiv7">内容部5</div>
 <div id="apDiv8">内容部6</div>
 </body>
 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html
相关文章推荐
新的分享
章节导航