Conception de la page d'accueil du blog de développement HTML (2)

Conception du thème

Introduisez d'abord l'image de la page d'accueil

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

rrree

L'effet est comme indiqué ci-dessous

QQ截图20161031170936.png

Définissez le type de style dans l'image.

Créer le div principal et définir le blog de la balise d'identification

<!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>

Nous contrôlons le style CSS

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

Ajouter une barre de pagination en bas

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

Oui L'effet du fonctionnement de la barre de pagination des pages

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

est le suivant :

QQ截图20161031172909.png

section suivante

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Plein écran