HTML开发博客之主页设计（二）

主题设计

首先将主页图片引入

<img src="/upload/course/000/000/004/581709cd445a4195.jpg"width="100%"height="300px">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>
    <link href="index.css" rel="stylesheet" type="text/css">
</head>
<style>
    body{
        background-color: #F0F0F0;
    }
    *{
        border: 0px;
        padding: 0px;
        margin: 0px;
        font-size: 14px;
    }
    a:hover{color:red;text-decoration:none;}
    #top{
        width: 100%;
        height: 90px;
        background-color: white;
        border-bottom: 1px solid #bbbbbb;
    }
    #menu{
        width: 1000px;
        overflow: hidden;
        margin: 0 auto;
    }
    #menu img{
        height: 90px;
    }
    #menu ul{
        list-style-type: none;
    }
    #menu ul li{
        float: left;
        height: 90px;
        line-height: 90px;
        margin-right: 50px;
    }
    #menu ul li a{
        color: black;text-decoration: none;
        display: inline-block;
    }
    #menu ul li a:hover{color: #65b5ff;text-decoration: none}
    #bottom{
        width:100%;
        background-color:#323333;
        height:300px;
        margin-top:70px;
    }
    #bottom-content{
        width:1000px;
        overflow:hidden;
        margin:0 auto;
        color:white;
        height:280px;
    }
    #content-left{
        width:460px;
        float:left;
        height:280px;
    }
    #bottom-content p{
        margin-top:10px;
    }
    #content-right{
        width:460px;
        float:right;
        height:280px;
        text-align: center;
        margin-top: 40px;
    }
</style>
<body>
<div id="top">
    <div id="menu">
        <ul>
            <li><img src=/upload/course/000/000/004/58171021ac1f3460.png></li>
            <li><a href="index.html"> 首页</a></li>
            <li><a href="list.html">科技资讯</a></li>
            <li><a href="list.html">心情随笔</a></li>
            <li><a href="list.html">资源收藏</a></li>
            <li><a href="list.html">图文图片</a></li>
            <li><a href="list.html">留言板</a></li>
            <li class="mi" ><a href="login.html">登陆</a>/<a href="reg.html">注册</a></li>
        </ul>
    </div>
</div>
<img src="/upload/course/000/000/004/581709cd445a4195.jpg"width="100%"height="300px">
<div id="bottom">
    <div id="bottom-content">
        <div id="content-left">
            <p><img src="/upload/course/000/000/004/58170ff175fc3142.jpg" height="150px" height="150px"></p>
            <p> 网站位置 | 关于我们 | 意见反馈 |</p>
        </div>
        <div id="content-right">
            <p>友情链接</p>
            <p>PHP中文网  |  小猪CMS</p>
            <p>公司网址：php.cn</p>
        </div>
    </div>
</div>
</body>
</html>

效果如图

QQ截图20161031170936.png

在图片内定义样式类型。

创建主体div，定义id标签blog

<div id="blog">
    <ul>
        <li>
            <div class="blog-left">
                    <p ><a href="" class="title">测试文章</a></p>
                <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
                <p style="margin-top: 90px"><img src="/upload/course/000/000/004/58170b919bc0d569.png" >测试<img src="/upload/course/000/000/004/58170ba6daea4279.png" style="margin-left: 20px">2016/10/31</p>
            </div>
            <div class="blog-right"><img src="/upload/course/000/000/004/58170bc487acc779.jpg"></div>
        </li>

我们对css样式进行控制

#blog{
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
}
#blog ul{
    list-style-type: none;
}
#blog ul li{
    background-color: white;
    padding: 20px;
    width: 100%;
    overflow: hidden;
    margin-top: 15px;
}
.blog-left{
    float: left;
    width: 680px;
    overflow: hidden;
}
.blog-right{
    float: left;
    margin-left: 10px;
    width: 280px;
    overflow: hidden;
}
.blog-right img{
    width: 280px;
    height: 200px;
}
.title{
    text-decoration:none;
    font-size: 26px;
}
.blog-left p{
    color: gray;
}
.blog-left img{
    width: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

底部增加一个分页条

<div class="page">
    <a href="#">首页</a>  <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a><a href="#">尾页</a>
</div>

对page分页条进行操作

.page{
    height: 40px;
    margin-top: 10px;
    text-align: center;
    padding-top: 20px;
}
.page a{
    border: 1px solid #71b0bb;
    text-decoration: none;
    margin: 5px;
    padding: 5px 10px;
}
.page a:link,.page a:visited{
     color: #000000;
 }
.page a:hover,.page a:active{
    color: #FFF;
    background-color: #bbac5c;
}

效果如下：

QQ截图20161031172909.png

新建文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>博客首页</title>
 <style>
 @charset "utf-8";
 body{
 background-color: #F0F0F0;
 }
 *{
 border: 0px;
 padding: 0px;
 margin: 0px;
 font-size: 14px;
 }
 a:hover{color:red;text-decoration:none;}
 #top{
 width: 100%;
 height: 90px;
 background-color: white;
 border-bottom: 1px solid #bbbbbb;
 }
 #menu{
 width: 1000px;
 overflow: hidden;
 margin: 0 auto;

 }
 #menu img{
 height: 90px;
 }
 #menu ul{
 list-style-type: none;

 }
 #menu ul li{
 float: left;
 height: 90px;
 line-height: 90px;
 margin-right: 50px;

 }
 #menu ul li a{
 color: black;text-decoration: none;
 display: inline-block;

 }
 #menu ul li a:hover{color: #65b5ff;text-decoration: none}
 #box{
 width: 900px;
 height: 370px;
 background-color: white;
 margin: 0 auto;
 margin-top: 50px;
 padding: 50px;
 }
 #box p{
 text-align: center;
 }
 #box-form{

 text-align: center;
 }
 .p_line{
 border-bottom: 1px solid #bbbbbb;
 height: 40px;
 line-height: 50px;
 }
 .txtBox{
 border: 1px solid #bbbbbb;
 width: 350px;
 margin-top: 30px;
 height: 50px;
 padding-left: 10px;
 border-radius: 5px;
 }
 .btn {
 width: 365px;
 height: 50px;;
 color: white;
 background-color: #DD0000;
 margin-top: 25px;
 }
 #bottom{
 width:100%;
 background-color:#323333;
 height:300px;
 margin-top:70px;
 }
 #bottom-content{
 width:1000px;
 overflow:hidden;
 margin:0 auto;
 color:white;
 height:280px;
 }
 #content-left{
 width:460px;
 float:left;
 height:280px;
 }
 #bottom-content p{
 margin-top:10px;
 }
 #content-right{
 width:460px;
 float:right;
 height:280px;
 text-align: center;
 margin-top: 40px;
 }
 .color{
 color: #323333;
 }
 #blog{
 width: 1000px;
 overflow: hidden;
 margin: 0 auto;

 margin-top: 20px;
 }
 #blog ul{
 list-style-type: none;
 }
 #blog ul li{
 background-color: white;
 padding: 20px;
 width: 100%;
 overflow: hidden;
 margin-top: 15px;
 }
 .blog-left{
 float: left;
 width: 680px;
 overflow: hidden;

 }
 .blog-right{
 float: left;
 margin-left: 10px;

 width: 280px;
 overflow: hidden;
 }
 .blog-right img{
 width: 280px;
 height: 200px;
 }
 .title{
 text-decoration:none;
 font-size: 26px;
 }
 .blog-left p{
 color: gray;
 }
 .blog-left img{
 width: 20px;
 margin-right: 10px;
 vertical-align: middle;
 }
 .page{
 height: 40px;
 margin-top: 10px;
 text-align: center;
 padding-top: 20px;
 }
 .page a{
 border: 1px solid #71b0bb;
 text-decoration: none;
 margin: 5px;
 padding: 5px 10px;
 }
 .page a:link,.page a:visited{
 color: #000000;
 }
 .page a:hover,.page a:active{
 color: #FFF;
 background-color: #bbac5c;
 }
 .mi{
 padding-left: 90px;

 }

 </style>
</head>
<body>
<div id="top">
 <div id="menu">
 <ul>
 <li><img src=https://img.php.cn/upload/course/000/000/004/58171021ac1f3460.png></li>
 <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>
 <li><a href="">留言板</a></li>
 <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li>
 </ul>
 </div>
</div>
<img src="https://img.php.cn/upload/course/000/000/004/581710cd6f241728.jpg"width="100%"height="300px">
<div id="blog">
 <ul>
 <li>
 <div class="blog-left">
 <p ><a href="detail.html" class="title">测试文章</a></p>
 <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
 <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p>
 </div>
 <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div>
 </li>
 <li>
 <div class="blog-left">
 <p ><a href="detail.html" class="title">测试文章</a></p>
 <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
 <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p>
 </div>
 <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div>
 </li>
 <li>
 <div class="blog-left">
 <p ><a href="detail.html" class="title">测试文章</a></p>
 <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
 <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p>
 </div>
 <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div>
 </li>
 <li>
 <div class="blog-left">
 <p ><a href="detail.html" class="title">测试文章</a></p>
 <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
 <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p>
 </div>
 <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div>
 </li>
 </ul>

 <div class="page">
 <a href="#">首页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a><a href="#">尾页</a>
 </div>
</div>

<div id="bottom">
 <div id="bottom-content">
 <div id="content-left">
 <p><img src="https://img.php.cn/upload/course/000/000/004/58170ff175fc3142.jpg" height="150px"></p>
 <p> 网站位置 | 关于我们 | 意见反馈 |</p>

 </div>
 <div id="content-right">
 <p>友情链接</p>
 <p>PHP中文网 | 小猪CMS</p>
 <p>公司网址：php.cn</p>
 </div>
 </div>
</div>
</body>
</html>

提交重置代码

自动运行

全屏