您的位置：首页 > 编程语言 > PHP开发

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

2016-12-15 01:28 591 查看
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;
}






内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  mysql php bbs 论坛
相关文章推荐
新的分享
章节导航