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

来源：互联网发布：歼20和f35哪个厉害知乎编辑：程序博客网时间：2024/04/29 13:10

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;}

这里写图片描述

1 0