Conception de la page d'accueil du blog de développement HTML (1)
Conception de la page d'accueil
Mise en page de la page d'accueil du site Web
Premier nous observons d’abord la mise en page terminée de la page Web.
Nous divisons la page Web en tête, image, contenu et bas. Le contenu peut être divisé en deux sections. , articles et photos.
Écrivons d'abord la tête et le bas. Nous pouvons directement référencer la tête et le bas de la page d'inscription précédente
<!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>Les résultats importés sont tels qu'indiqués ci-dessous
<!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>
