商务网站设计与开发(一) ——HTML+CSS+JavaScript
让我们更专业一点!
电子商务教研室滕岩
rock_teng@
Spring 2013
Lec04:CSS+Div布局实例篇
CSS+Div 基本布局
块元素和 内联元素
导航栏的 制作
HTML部分:
页面主要由5大块 构成;
这5块的宽度都是 900 像素,并且 都是水平居中的。
<div id=“logo"></div>
<div id=“nav"></div>
<div id=“banner"></div>
<div id=“content"></div>
<div id=“footer"></div>
<head>……
<link rel="stylesheet" type="text/css" href=""/>
</head>
CSS部分:
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,ul,li{
margin: 0;
padding: 0;
}
#logo,#nav,#banner,#content,#footer {
width: 900px;
margin: 0 auto;
}
一般网站都会做到点击logo,就会回到主页:
<a href=“”> <img src="相对路径" alt="回首页"/> </a>
另一种方法:给超链接加背景图片 (内联元素转化为块元素)
HTML部分:
<div id="logo">
<a href="" id="logoLink"></a>
</div>
一般网站都会做到点击logo,就会回到主页:
CSS部分:
#logo{ height: 80px; }
#logoLink{
display: block; /*将链接a 转化成块状元素,这样才能显示出背景*/
width: 175px;
height: 48px;
background: url(images/) no-repeat;
float:left; /*为了让ie6 和ff显示效果一样*/
margin-top: 20px;
}
HTML部分:
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS部分:
#nav{ height: 42px; }
#nav ul{
height: 42px;
background:#56990c;
}
#nav ul li{
height: 42px;
float:left;
list-style:none;
}
#nav ul li a{
display: block;
height: 42px;
float: left;
padding: 0 10px;
line-height: 42px;
color: #fff;
font-size: 14px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
}
#nav ul li a:hover{
background: #68acd3;
}
-分步讲解
HTML部分:
<div id="nav">
<ul>
<li><a href="#">CSS 学习</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>
</ul>
</div>
Lec04 CSS布局实例篇 来自淘豆网m.daumloan.com转载请标明出处.
