HTML DIV+CSS制作通栏实例
导读：收集整理的这篇文章主要介绍了HTML DIV+CSS制作通栏实例，觉得挺不错的，现在分享给大家，也给大家做个参考。 HTML DIV+CSS制作通栏 复制代码代码如下: <!DOCTYPE html PubLIC "-//W...
收集整理的这篇文章主要介绍了HTML DIV+CSS制作通栏实例，觉得挺不错的，现在分享给大家，也给大家做个参考。 HTML DIV+CSS制作通栏 复制代码代码如下:
!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科技有限责任公司/p>
ul class="friend_links">
li> 百度/li>
li> 谷歌/li>
li> 有道/li>
li> 腾讯/li>
/ul>
/div>
/div>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML DIV+CSS制作通栏实例
本文地址： https://pptw.com/jishu/584880.html