HTML開發(fā)博客之主頁設(shè)計（一）
主頁設(shè)計
網(wǎng)站的主頁布局
首先我們先觀察完成后的網(wǎng)頁布局。
我們對網(wǎng)頁的劃分為，頭部，圖片，內(nèi)容，以及底部，內(nèi)容又可以分為兩個部分，文章以及圖片。
下面我們就先來編寫頭部和底部，我們直接引用之前注冊頁面的頭部和底部即可
<!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> 網(wǎng)站位置 | 關(guā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>引入的結(jié)果如下圖
