| 分类： Liferay Portal |
(十四）liferay预备知识：DIV+CSS的页面布局设计
热水
2006-9-28
一、网站首页布局图：
二、页面布局图设计
三、DIV结构如下：
|
DIV结构如下： |
||
三、XHTML文件结构，文件名称为：index.html
<!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=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">页面层容器
<div id="Header">页面头部</div>
<div id="PageBody">-页面主体
<div id="Sidebar">侧边栏</div>
<div id="MainBody">主体内容</div>
</div><!--end 页面主体 -->
<div id="Footer">页面底部</div>
</div><!--- end 页面层容器-->
</body>
</html>
四、CSS.CSS样式表文件
/*-----基本信息----*/
/** a link css **/
a{
color:#1d50aa;
text-decoration:none;
}
a.hover{
color:#1d50aa;
text-decoration:underline;
}
/**form css **/
form{margin:0;padding:0;}
/**select css**/
select{
border-color:#CCCCC;
border-style=solid;
border-width:1px;
}
img{
border:0;
margin:0;
padding:0;
}
input,button,select{
font-size: ;//
}
textarea{
font-size:; //字体大小
}
/** body css **/
body {
background-color: //背景色
border:0;//边框线粗细；
margin:0px; //页面空白边距
padding; //文字内容与边框线的距离。
text-align:center; //文字对齐方式
font-family:Arial; //字体类型
font-size:76%; //字体大小
color:#333333;字体颜色
}
/**Layout CSS **/
/*页面层容器*/
#container {
width:100%; //它的宽度
}
/*页面头部*/
#Header {
width:800px;
margin:0 auto;
height:100px;
background:#FFCC99;
}
/*页面主体*/
#PageBody {
width:800px;
margin:0 auto;
height:400px;
background:#CCFF00;
}
/*页面底部*/
#Footer {
width:800px;
margin:0 auto;
height:50px;
background:#00FFFF;
}