HTML開発ブログの詳細ページのデザイン

詳細ページ

詳細ページを作成する前に、まず制作したページの分布を観察します

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

赤いボックスがWebサイトのレイアウトを分割し、次に進みますシーケンスデザインのウェブページ。

ヘッダーと下部を紹介します

まずはヘッダーとページ下部を紹介します。

コードは次のとおりです

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

提出するリセットコード

自動運転

全画面表示