手机
当前位置:查字典教程网 >网页设计 > 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制作通栏实例】相关文章:

CSS定位机制之一:普通流

CSS3制作loading加载动画效果代码

CSS教程网站制作如何打造导航蓝色效果

DIV+CSS常用网页制作布局技术技巧

CSS控制让每行显示4个图片的样式

CSS文本如何折行介绍

DIV+CSS制作的网页如何让网页居中

DIV点击折叠实例代码

DIV CSS解决不规则文字排版

DIV+CSS常用技巧

精品推荐
分类导航