HTML開発ブログのホームページデザイン(2)

テーマデザイン

最初にホームページの画像を紹介します

<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タグブログを定義します

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

提出するリセットコード

自動運転

全画面表示