Banner in the Web page of the concept must have some understanding of it, the following article through the HTML div+css simple implementation, like friends can refer to the next OH
HTML div+css Making Banner
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 ">
<title>insert title here</title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
ul{
List-style:none;
}
img{
Border:none;
}
a{
Text-decoration:none;
color: #fff;
}
a:hover{
Text-decoration:none;
}
/*layout*/
#header {
width:100%;
margin:0 Auto;
background: #eee;
}
#menu_bg {
width:100%;
Background:pink;
height:50px;
}
#menu {
width:980px;
margin:0 Auto;
}
#menu ul li{
width:101px;
Float:left;
}
#menu ul Li a{
Float:left;
Display:block;
width:100px;
height:48x;
line-height:48px;
Text-align:center;
text-transform:uppercase;
Background:black;
border-bottom:2px solid black;
}
#menu ul Li a:hover{
border-bottom:2px solid Pink;
}
#wrap {
width:980px;
height:500px;
margin:0 Auto;
Background:green;
}
#footer_bg {
width:100%;
Background:pink;
height:50px;
}
#footer {
width:980px;
margin:0 Auto;
}
. Friend_links li{
Display:inline;
}
</style>
</head>
<body>
<div id= "header" >
<div id= "logo" >this is logo</div>
<div id= "MENU_BG" >
<div id= "menu" >
<ul>
<li class= "Current selected" ><a href= "###" >home</a></li>
<li><a href= "#" >about us</a></li>
<li><a href= "#" >contact us</a></li>
<li><a href= "#" >price</a></li>
</ul>
</div>
</div>
</div>
<div id= "wrap" >
Wrap
</div>
<div id= "FOOTER_BG" >
<div id= "Footer" >
<p class= "Copyright" >©XXXXXXX Technology Co., Ltd. </p>
<ul class= "Friend_links" >
<li> Baidu </li>
<li> Google </li>
<li> Youdao </li>
<li> Tencent </li>
</ul>
</div>
</div>
</body>
</html>
