div结合css布局bbs首页
来源:互联网 发布:unity3d与arduino交互 编辑:程序博客网 时间:2024/05/16 11:14
最近趁离职,我在做一个论坛系统,练练手,需要一个论坛首页的html页面,深知自己美工极差,心里很苦啊。于是买了本div+css网站布局的书,没想到讲得还不错,感觉长进很快,于是磨拳擦掌非要自己写一个不可,高手末笑。代码伺候。
我把论坛首页分为header区,信息区,内容区,页脚区。首先用一大div把这些包含进来,主要是考虑到页面整体调节方便,比如要调成宽屏的或者是窄屏的,只要设置一下这个大div就可以了。
先把代码贴出来,供朋友们调试使用。
css:
html:
图片不能上传,没办法了,不影响学习。
这是我设计的第一个布局,从中了解了,div是块状的,默认是占整行的,如果想设计成两列或多列,可以用float属性,它可以向左(float:left)浮动,这时,如果下面的div大小可以放下的话,就会浮动到上面一行,这样就形成了两列的布局,
多列以此类推。理解了基本的,以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助,做开发的了解美工也很重要,艺多不压身嘛。
我把论坛首页分为header区,信息区,内容区,页脚区。首先用一大div把这些包含进来,主要是考虑到页面整体调节方便,比如要调成宽屏的或者是窄屏的,只要设置一下这个大div就可以了。
先把代码贴出来,供朋友们调试使用。
css:
- /* CSS Document */
- body{
- background-color:#F5F5F5;
- margin:0;
- padding:0;
- font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ,sans-serif;
- font-size:12px;
- }
- .pagehoder{
- width:100%;
- margin:auto;
- background-color:#2662DF;
- border-left:2px solid #7197D7;
- border-rigth:2px solid #7197D7;
- border-bottom:2px solid #7197D7;
- }
- .header{
- border-top:2px solid #7197D7;
- height:60px;
- background-color: #B1C3D9;
- }
- .logo{
- background:url(../images/logo.png) no-repeat ;
- width:200px;
- height:60px;
- float:left;
- }
- .img{
- background:url(../images/images1.jpg) repeat-x ;
- height:60px;
- }
- .navigate {
- padding-left:20px;
- background-color:#F3F8FE;
- height:10px;
- }
- .navigate li{
- float:left;
- }
- .navigate li a{
- margin-left:2px;
- padding-top:3px;
- padding-bottom:3px;
- text-align:center;
- display:block;
- text-decoration:none;
- width:70px;
- height:10px;
- background-color:#ececec;
- }
- .navigate li a:hover{
- color:#ffffff;
- background-color:#bbbbbb;
- }
- .notice{
- background-color:#ffffff;
- height:20px;
- }
- .content{
- background-color:#0000FF;
- height:400px;
- }
- .contentHead{
- text-align:center;
- padding-top:5px;
- padding-bottom:0px;
- height:20px;
- background-color:#71A3CC;
- }
- .f1{
- width:60%;
- float:left;
- background-color:#71A3CC;
- }
- .f2{
- width:12%;
- float:left;
- background-color:#71A3CC;
- }
- .f3{
- width:12%;
- float:left;
- background-color:#71A3CC;
- }
- .f4{
- width:15%;
- background-color:#71A3CC;
- }
- .typeHolder{
- width:100%;
- background-color:#D9DBE4;
- }
- .type{
- width:60%;
- float:left;
- }
- .boardHolder{
- text-align:center;
- width:100%;
- background-color:#FFFFFF;
- }
- .boardName{
- width:60%;
- float:left;
- }
- .subject{
- width:12%;
- float:left;
- background-color:#F7F7F8;
- }
- .article{
- width:12%;
- float:left;
- background-color:#F7F7F8;
- }
- .last{
- width:15%;
- background-color:#F7F7F8;
- }
- .msg{
- background-color:#FAFAFA;
- height:60px;
- }
- .footer{
- background-color:#99CC33;
- height:20px;
- text-align:center;
- }
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" />
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <title>sclBBS首页</title>
- </head>
- <body>
- <div class="pagehoder">
- <div class="header">
- <div class="logo">
- </div>
- <div class="img"></div>
- </div>
- <div class="navigate">
- <li> <a href="#">首页</a></li>
- <li> <a href="#">搜索</a></li>
- <li> <a href="#">会员列表</a></li>
- <li> <a href="#">热门主题</a></li>
- <li> <a href="#">最新主题</a></li>
- </div>
- <div class="notice">
- <marquee scrollAmount="2" width="100%">
- 欢迎光临sclBBS。
- </marquee>
- </div>
- <div class="content">
- <div class="contentHead">
- <div class="f1">版面</div>
- <div class="f2">主题</div>
- <div class="f3">文章</div>
- <div class="f4">最后发表</div>
- </div>
- <div class="typeHolder">
- <div class="type">开源项目</div>
- <div class="place"></div>
- </div>
- <div class="boardHolder">
- <div class="boardName">JForum论坛</div>
- <div class="subject">23</div>
- <div class="article">23</div>
- <div class="last">23</div>
- </div>
- <div class="typeHolder">
- <div class="type">开源项目1</div>
- <div class="place"></div>
- </div>
- <div class="boardHolder">
- <div class="boardName">JForum论坛1</div>
- <div class="subject">23</div>
- <div class="article">23</div>
- <div class="last">23</div>
- </div>
- <div class="typeHolder">
- <div class="type">开源项目2</div>
- <div class="place"></div>
- </div>
- <div class="boardHolder">
- <div class="boardName">JForum论坛2</div>
- <div class="subject">23</div>
- <div class="article">23</div>
- <div class="last">23</div>
- </div>
- <div class="typeHolder">
- <div class="type">开源项目3</div>
- <div class="place"></div>
- </div>
- <div class="boardHolder">
- <div class="boardName">JForum论坛3</div>
- <div class="subject">23</div>
- <div class="article">23</div>
- <div class="last">23</div>
- </div>
- </div>
- <div class="msg">
- <div class="typeHolder">
- <div class="type">看谁在线上</div>
- <div class="place"></div>
- </div>
- <div class="boardHolder">
- 目前总共发表了 2,806 篇文章
- 目前总共有 4,186 位注册会员
- 最新注册的会员: mxjccut
- 目前总共有 80 位用户在线 :: 1 位会员, 79 位访客 [ 系统管理员 ] [ 版主 ]
- 最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]
- 目前在线注册会员: Admin
- </div>
- </div>
- <div class="footer">
- Powered by sclBBS author:sclsch@188.com
- </div>
- </div>
- </body>
- </html>
这是我设计的第一个布局,从中了解了,div是块状的,默认是占整行的,如果想设计成两列或多列,可以用float属性,它可以向左(float:left)浮动,这时,如果下面的div大小可以放下的话,就会浮动到上面一行,这样就形成了两列的布局,
多列以此类推。理解了基本的,以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助,做开发的了解美工也很重要,艺多不压身嘛。
- div结合css布局bbs首页
- DIV+CSS首页布局练习
- DIV+CSS首页布局练习 代码
- 利用Div+Css,模仿搜狐首页面的布局
- PHP.5-DIV+CSS布局网站首页实例
- 【CSS 基础】11 京东首页DIV分块布局
- div+css写首页
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- <div+css页面布局课堂笔记>10---页面布局网站首页设计实例__2
- <div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版(仿csdn首页)
- div简单布局网站首页
- 仿百度首页div+css
- DIV+CSS实现商城首页
- 庆祝CSDN重新开通,发张我用DIV+CSS布局的页面“在线商城”首页
- div+css实战演练---优酷盒子模型和搜狐首页面布局效果
- div+css实战演练---优酷盒子模型和新浪首页面布局效果
- CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
- CSS布局欣赏:淘宝首页布局效果
- KMP算法详解
- ScriptManager的简单用法
- date 常用方式
- IBM热门职位随手掰掰 --- 客串猎头?
- Web技术四层结构
- div结合css布局bbs首页
- 博杨文摘
- 求职遭遇的问题(C#和C++)。(2)
- 基带传输与频带传输
- 几种典型的局域网技术
- 使用EXT实现无刷新动态调用股票信息
- java类加载器学习笔记
- 数据结构--稀疏矩阵的快速转置及快速相乘操作
- Linux系统下tomcat服务器布署