HTML development blog details page design

Details page

Before making the details page, we first observe the distribution of the produced pages

火狐截图_2016-11-01T01-33-29.196Z.png

The red box divides the layout of the website. Next, we will design the web pages in sequence.

Introduce the header and bottom

We first introduce the header and bottom of the page.

code show as below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻内容</title>
    <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}
        #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=/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>
<div id="bottom">
    <div id="bottom-content">
        <div id="content-left">
            <p><img src="/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>

Next Section

new file

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>新闻内容</title>
 <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}
 #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="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>
<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>

submit Reset Code

Automatic operation

Full Screen