PJBlog模版结构图CSS示意图

作者:jogocun 日期:2007-01-31 23:21

字号: 小 | 中 | 大

正在载入，请稍候……

学做CSS皮肤应该要懂得或者了解的结构图，看看。。。

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
background-color:#FFFAFA;
border:1px solid #7D7D7D;
color: #8B4513;
font:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:13px;
padding:2px;
margin:0px;
}
#blogname{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #C6E28D;
WIDTH:970px;
HEIGHT:20px;
}
#blogtitle{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menu{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #8AB632;
WIDTH:970px;
HEIGHT:20px;
}
#ul{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;  margin: 5px 3px 5px 4px;  }
#li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 4px 5px 2px; }
#menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; }
#menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px;  }
#header{
MARGIN:5px;
BORDER: 1px solid #7B7B7B;
BACKGROUND:#ccd2de;
WIDTH:980px;
HEIGHT:20px;
}
#container{
WIDTH:980px;
BACKGROUND:#FFF;
border: 1px double #9ACD32;
margin: 2px 2px 2px 2px;
text-align: center;
}
#leftsidebar{
border:1px solid #5F82E9;
FLOAT:left;
MARGIN:1px 0px 5px 5px;
BACKGROUND:#F2F3F7;
WIDTH:190px;
clear:left;
line-height: 150%;
}
#tbody{
border: 1px solid #ACD558;
MARGIN:5px 3px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #F0E68C;
}
#maincontent{
border:1px solid #A68100;
MARGIN:3px 5px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #C8C8C8;
}
#innermaincontent{
border:1px solid #5F82E9;
MARGIN:1px 3px 3px 5px;
WIDTH:546px;
BACKGROUND: #F0E68C;
line-height: 150%;
FLOAT:left;
}
#mainContent-topimg{border:1px solid #B58615;
MARGIN:1px 3px 8px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#content-width{border:1px solid #B58615;
MARGIN:5px 3px 3px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#pageContent{border:1px solid #9ACD32;
MARGIN:5px 3px 8px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%;
}
#Content{border:1px solid #9ACD32;
MARGIN:8px 3px 5px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%;
}
#Content-top{border: 1px solid #70922B;
MARGIN:5px 3px 12px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#ContentTitle{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%;
float:left;
}
#ContentAuthor{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%;
float:right;
}
#Content-body{border:1px solid #70922B;
MARGIN:12px 3px 5px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#Content-bottom{border:1px solid #70922B;
MARGIN:12px 3px 8px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#mainContent-bottomimg{border: 1px solid #B58615;
MARGIN:8px 3px 12px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#rightsidebar{
border: 1px solid #5F82E9;
FLOAT:right;
MARGIN:1px 5px 5px 2px;
WIDTH:190px;
BACKGROUND:#F2F3F7;
clear:right;
line-height: 150%;
}
#sidebar-topimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#sidepanel{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#Ptitle{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#Pcontent{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#Pfoot{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#sidebar-bottomimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#footer{
CLEAR:both;
MARGIN:5px;
PADDING:5px 0px 5px 0px;
BACKGROUND:#ccd2de;
HEIGHT:20px;
WIDTH:985px;
BORDER: 1px solid #7B7B7B;
}
</style>
</HEAD>
<BODY>
<div id="container">
container
<div id="header">header
<div id="blogname">blogname
<div id="blogtitle">blogtitle</div>
</div>
<div id="menu">menu
<div id="ul">ul
<div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuR">menuR</div>
</div>
</div>
</div>
<div id="tbody">tbody
<div id="maincontent">maincontent
<div id="leftsidebar">leftsidebar
<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
<div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
</div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
</div>
<div id="innermaincontent">innermaincontent
<div id="mainContent-topimg">mainContent-topimg</div>
<div id="content-width">content-width
<div id="pageContent">pageContent</div>
<div id="Content">Content
<div id="Content-top">Content-top
<div id="ContentTitle">ContentTitle</div><div id="ContentAuthor">ContentAuthor</div>
</div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div>
</div>
</div>
<div id="mainContent-bottomimg">mainContent-bottomimg</div>
</div>
<div id="rightsidebar">rightsidebar
<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
<div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
</div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
<div></div>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]