国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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.

QQ截圖20161101095442.png

code show as below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新聞內(nèi)容</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"> 首頁(yè)</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">注冊(cè)</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> 網(wǎng)站位置 | 關(guān)于我們 | 意見(jiàn)反饋 | </p>
        </div>
        <div id="content-right">
            <p>友情鏈接</p>
            <p>PHP中文網(wǎng)  |  小豬CMS</p>
            <p>公司網(wǎng)址:php.cn</p>
        </div>
    </div>
</div>
</body>
</html>


Continuing Learning
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新聞內(nèi)容</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"> 首頁(yè)</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">注冊(cè)</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> 網(wǎng)站位置 | 關(guān)于我們 | 意見(jiàn)反饋 | </p> </div> <div id="content-right"> <p>友情鏈接</p> <p>PHP中文網(wǎng) | 小豬CMS</p> <p>公司網(wǎng)址:php.cn</p> </div> </div> </div> </body> </html>
submitReset Code