手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >HTML DIV+CSS制作通栏实例
HTML DIV+CSS制作通栏实例
摘要:HTMLDIV+CSS制作通栏Inserttitlehere*{margin:0;padding:0;}ul{list-style:none...

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><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>©XXXXXXX科技有限责任公司</p>

<ul>

<li>百度</li>

<li>谷歌</li>

<li>有道</li>

<li>腾讯</li>

</ul>

</div>

</div>

</body>

</html>

【HTML DIV+CSS制作通栏实例】相关文章:

常用网站经典布局实例

20个实用便捷的CSS3工具、库及实例

练习层DIV的定位小实例

CSS文本如何折行介绍

CSS导航布局中当前页面的具体实现demo示例

CSS复合选择器使用介绍

CSS绿色导航菜单制作实例

css美化Div边框的样式实例

CSS定位机制之一:普通流

CSS文章列表切换选项卡效果实例

精品推荐
分类导航