HTML 개발 블로그의 홈 페이지 디자인(1)

홈페이지 디자인

웹사이트 홈페이지 레이아웃

먼저 완성된 웹페이지 레이아웃을 관찰합니다.

火狐截图_2016-10-31T08-43-36.591Z.png

웹페이지는 헤더, 사진, 내용, 하단으로 나누어져 있습니다. 내용은 기사, 사진 두 부분으로 나눌 수 있습니다.

헤드와 하단을 먼저 작성해보겠습니다. 이전 등록 페이지의 헤드와 하단을 직접 참조할 수 있습니다

<!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/581706c65d3bc228.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="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/581701b3557ed481.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> <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=https://img.php.cn/upload/course/000/000/004/581706c65d3bc228.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="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/581701b3557ed481.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>

제출하다 코드 재설정

자동운전