小型bbs论坛系统开发2 模板页首页制作

PS：这套系统我是在边学边做，大致的思路就是像织梦，wordpress做一个安装程序。然后自动按照模板去安装。按照视频上所授，大概是要做差不多10个模板页面，之前就发现自己有偏执症，尤其是仿站的时候特别明显。。差一像素我都要调试很久。本来学习的思路是以php+mysql为主。我写了一个晚上竟然才写了一个首页的布局。。还遇到了很多奇葩的问题。比如子元素设置浮动的时候，父元素的背景不见了。于是看了一晚上关于“BFC”的问题。。哎，看来有强迫症的人写起代码真的是痛苦。

我有一个每天晚上都到我家玩的朋友，几天没见面，今天到我家玩的时候随口问了我一句，你这几天都呆在家里吗？

我想答案是写在我那厚厚的笔记本上。

一件事无论太晚，
或者对于我来说太早，
都不会阻拦你成为你想成为的那个人，
这个过程没有时间的期限，
只要你想，随时都可以开始，
要改变或者保留原状都无所谓，
做事本不应有所束缚，
我们可以办好这件事，却也可以把它搞砸，
但我希望，
最终你能成为你想成为的人，
我希望你有时能驻足于这个令你感到惊叹的世界，
体会你从未有过的感觉，
我希望你能见到其他与你观点不同的人们，
我希望你能有一个值得自豪的一生，
如果和你想象的生活不一样，
我希望你能有勇气，重新启程。

向自己致敬！

index.html

<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>模板首页文件</title><link rel="stylesheet" type="text/css" href="style/reset.css"><link rel="stylesheet" type="text/css" href="style/index.css">
</head>
<body><!-- 头部样式 --><div id = 'header'><div class="auto"><div id = 'logo'>sifangku</div><div id = 'nav'><a href="#">首页</a></div><div class="serarch"><form><input class="keyword" type="text" name="keyword" placeholder="搜索其实很简单"><input class="submit" type="submit" name="submit" value=""></form></div><div id="login"><a href="#">登录</a><a href="#">注册</a></div></div></div><!-- 头部样式结束 --><!-- 主体部分 --><div id = 'main'><div class="hot"><div class="title">热门动态</div><div class="newlist"><ul><li><a href="#">[足球]</a><a href="#">中国队进入世界杯总决赛!</a></li><li><a href="#">[足球]</a><a href="#">中国队进入世界杯总决赛!</a></li><li><a href="#">[足球]</a><a href="#">中国队进入世界杯总决赛!</a></li>                                       </ul></div></div><div class="box"><div class="title">国际足球</div><div class="content"><div class = 'list'>暂无内容</div></div></div><div class="box"><div class="title">CBA</div><div class="content"><div class = 'list'>暂无内容</div></div></div><div class="box"><div class="title">NBA</div><div class="content"><div class = 'childbox new'><h2><a href="#">中国队</a><span>(今日38)</span></h2><h3>帖子：1939539</h3> </div><div class = 'childbox old'><h2><a href="#">法国队</a><span>(今日38)</span></h2><h3>帖子：1939539</h3></div><div class = 'childbox lock'><h2><a href="#">巴西队</a><span>(今日38)</span></h2><h3>帖子：1939539</h3></div><div class = 'childbox new'><h2><a href="#">日本队</a><span>(今日38)</span></h2><h3>帖子：1939539</h3></div></div></div></div><!-- 主体部分结束  --><div id="footer"><div class="bottom"><a href = '#'>金正恩</a></div><div class="copyright">Powered by sifangku ©2015 sifangku.com</div></div></body>
</html>

reset.css

/*css reset code *//****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
background: #f4f4f4;
} /* for IE/Win */
html>body {
font-size:13px;
} /* for everything else *//*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;font-family: Arial;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}img {display:block;}
address,caption,cite,code,dfn,th,var {font-weight: normal;font-style: normal;}
ol,ul {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}a {
text-decoration:none;
}

index.css

.auto {width:960px;margin:0 auto;
}#header{width:auto;height:47px;background: #488fce;margin-bottom: 10px;
}#header #logo{height:47px;width:100px;font-size:20px;color:white;text-align:center;line-height: 47px;font-family: '微软雅黑','宋体';font-weight: bold;display: inline;float:left;
}#header #nav{margin-left:10px;display: inline;width:50px;height:47px;background: #3b7fc4;line-height:47px;float:left;text-align:center;color:white;font-size: 14px;
}#header #nav a:visited{color:white;
}#header #nav a:hover{color:yellow;text-decoration: underline;
}#header .serarch {background: none repeat scroll 0 0 #f2f2f2;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;display: inline;float: left;height: 28px;margin: 8px 0 0 10px;padding: 0;width: 160px;
}
#header .serarch input.keyword {width: 130px;height: 20px;margin: 3px 0 0 5px;display: block;float: left;border: 0px;
}#header .serarch input.submit {background: url(style_icon.png) 0px -593px;border: 0 none;cursor: pointer;float: right;height: 28px;margin: 0;overflow: visible;padding: 0;text-align: left;width: 25px;float: right;
}#header #login{float:right;width:70px;height:47px;line-height: 47px;
}#header #login a:visited{color:white;
}#header #login a:hover{color:yellow;text-decoration: underline;
}#main {clear:both;width:960px;margin:0 auto;
}.hot{margin:10px 0px;background-color:#fff;}
.hot .title{color:red;font-weight: bold;height:35px;line-height: 35px;border-bottom: 1px solid #e4e4e4;padding:3px 10px;
}
.hot .newlist li{padding:5px 0;text-indent: 15px;
}
.hot .newlist a{color:#333;
}.hot .newlist a:hover{color:grey;text-decoration: underline;
}.box{margin:10px 0px;background-color:#fff;text-indent: 10px;overflow:hidden;/*超出的部分掩藏，调试1晚上。。因为这个*/
}.box .title{color:#105cb6;font-weight: bold;height:35px;line-height: 35px;border-bottom: 1px solid #e4e4e4;padding:0px 10px;background: #f7f7f7;
}.box .content{padding: 0 15px;background: #ffffff;
}.box .content .list{padding: 10px 0px;
}.box .content .childbox{width:264px;height:51px;padding:10px 0 10px 46px;border-bottom:1px dashed #e4e4e4;color:#444444;float: left;
}.box .content .new {background:url(new.gif) 0px center no-repeat;
}
.box .content .old {background:url(old.gif) 0px center no-repeat;
}
.box .content .lock {background:url(lock.gif) 0px center no-repeat;
}
.box .content h2{font-weight: bold;margin-bottom: 3px;
}
.box .content h2 span{color: #ff5500;font-weight: normal;
}
#footer {border-top:1px solid #d3d3d3;text-align:center;padding:20px 0;margin-top:30px;
}
#footer a {color:#666;
}
#footer .bottom {padding:0 0 8px 0;
}
#footer .copyright {color: #999;font-size: 10px;text-align: center;
}

小型bbs论坛系统开发2 模板页首页制作相关推荐

DXBBS V8.0 BBS论坛系统简体中文正式版 [ 开发语言：ASP.NET 2.0 (C#) ]
DXBBS V8.0 BBS论坛系统简体中文正式版 [ 开发语言:ASP.NET 2.0 (C#) ] 程序版本:DXBBS V8.0 ACCESS/MSSQL版开发语言:ASP.NET 2.0 ...
原创+源码基于Java Web技术开发的BBS论坛系统
本文转自:程序员之家论坛原文地址:http://www.phome.asia/forum/thread/20601.htm 我已把附件上传到csdn下载频道地址:http://download.c ...
基于ASP.NET的在线论坛系统开发
一.前言本系统开发语言为C#,数据库为SQL Server,开发环境为VS2010.主要功能是为用户提供了一个发布信息和讨论问题的平台,用户分为三个级别,对应不同的操作权限.基础操作为浏览.发表.删 ...
基于SSM+SpringBoot+MySQL+Layui+Thymeleaf的高校信息BBS论坛系统
大家好,很高兴和大家分享源码.不管是什么样的需求.都希望各位计算机专业的同学们有一个提高. 大家可以通过常用的搜索引擎,以百度为例,搜索源码乐园 code51 ,然后再次搜索自己想要的即可.更多的 ...
计算机实战项目之 [含课设报告+源码等]S2SH校园BBS论坛系统[包运行成功]
<S2SH校园BBS论坛系统161>该项目采用技术jsp.strust2.Spring.hibernate.tomcat服务器.mysql数据库开发工具eclipse,项目含有源码.论文 ...
BBS论坛系统的需求
小组成员:psy.zjt.xjw.kj BBS论坛系统的需求 1.不是所有人都可以发表帖子和回复帖子的,必须是以会员的身份登录到系统后,才能够发表.回复帖子.因此BBS论坛将用户划分为3类人:普通游客 ...
SpringBoot + VUE BBS论坛系统
BBS论坛项目源代码见文章结尾项目介绍 BBS论坛系统是一套前后端分离的开源社区系统,基于目前主流的前端框架VUE + 后端SpringBoot + MyBatis-plus + MySQL等,其 ...
Java、JSP+BBS论坛系统的设计与实现
技术:Java.JSP等摘要: BBS即Bulletin Board System("电子公告版"),一般可以分为:教学型论坛.推广型论坛.地方型论坛.交流型论坛.技术型论坛等. ...
ais信号接收设备_一种小型AIS自动识别系统的收发机模块的制作方法
本实用新型船用导航雷达领域,特别指一种小型AIS自动识别系统的收发机模块. 背景技术: 随着渔业的不断发展,海上安全设备在不断完善,AIS设备也得到广泛普及应用,AIS设备的微型化.便携化.防水性.低 ...

小型bbs论坛系统开发2 模板页首页制作

小型bbs论坛系统开发2 模板页首页制作相关推荐

最新文章

热门文章