界面设计

建立文件夹

如图所示

images---放图片

styles---放css样式

index.php出口文件

写入index.php文件

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

   

 

飘城WEB俱乐部多用户留言系统

• 首页
• 注册
• 登录
• 风格
• 个人中心
• 管理
• 退出

帖子列表

新进会员

最新图片

版权所有 翻版必究

本程序由飘城WEB俱乐部提供,源码可以任意修改或发布

写入css样式

公共样式

basic.css部分:

@CHARSET"UTF-8";

*{

margin:0px;

padding:0px;

}

body{

width:960px;

margin:0 auto;

background: #fff;

font-size:14px;

}

h2{

font-size:14px;

background: #eee;

height:25px;

line-height:25px;

text-indent: 10px;

}

#header{

width:auto;

height:200px;

border:2px solid #ccc;

margin:10px 0;

}

#header h1{

width:210px;

height:39px;

font-size:12px;

background: url(../../images/weibo.png) no-repeat;

margin:50px 0 0 50px;

}

#header h1 a{

width:210px;

height:39px;

display:block;

text-indent:-9999px;

}

#header ul{

text-align: right;

padding: 30px 50px 0 0;

}

#header ul li{

display:inline;

}

#footer{

clear:both;

width:auto;

height:60px;

text-align:center;

padding: 10px 0 0 0;

}

#footer p{

font-size:12px;

letter-spacing: 1px;

padding: 5px 0 0 0;

}

#footer p span{

color:#06f;

}

其他样式：

@CHARSET"UTF-8";

#list{

width:600px;

height:514px;

border:2px solid #ccc;

float:right;

}

#user{

width:340px;

height:250px;

border:2px solid #ccc;

float:left;

margin:0px 0px 10px 0;

}

#pics{

width:340px;

height:250px;

border:2px solid #ccc;

float:left;

}

放入图片：

images

weibo.png

基本界面就搭建好了

结果如图所示: