HTML开发博客之详情页设计

详情页

制作详情页前,我们先观察制作好的页面分布

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

红色方框划分了网站的布局情况,接下来我们就依次对网页进行设计。

引入头部和底部

我们首先把页面的头部和底部引入。

QQ截图20161101095442.png

代码如下

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


继续学习
||
<!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>
提交重置代码