<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> |
简单的div练习---简记
最新推荐文章于 2024-07-24 16:53:23 发布