Home page design of HTML development blog (1)
Home page design
Home page layout of the website
First we First observe the completed web page layout.
##We divide the web page into head, picture, content, and bottom. The content can be divided into two sections, articles and pictures.
Let’s write the head and bottom first. We can directly reference the head and bottom of the previous registration page.<!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">注冊(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/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>The imported results are as shown below
