1.用CSS设计网站导航
横向导航
body{background-color:#000000;}
#nav{height:26px;border-bottom:2px solid #ffffff;list-style:none;}
#nav li{float:left;font-size:14px;font-weight:bold;}
#nav li
a{color:#FFFFFF;text-decoration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:center;background-image:
url(img/normal.gif);margin-left:2px;}
#nav li a:hover{background-image:url(img/hover.gif);color:#ffffff;}
#nav li a#current{background-image:url(img/active.gif);color:#000000;}
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
纵向导航
#category{width:100px;border-color:#c5c4c6;border-style:solid;border-width:0px 1px 1px 1px;}
#category h1,#category h2{margin:0px;padding:4px;font-size:12px;}
#category h1{border-top:1px solid #c5c6c4;background-color:#f4f4f4;}
#category h2{font-weight:normal;}
<div id="category">
<h1>CSS</h1>
<h2>A</h2>
<h2>B</h2>
<h1>WEB</h1>
<h2>A</h2>
<h2>B</h2>
</div>
下拉及多级弹出式菜单
<style type="text/css" rel="stylesheet">
ul {margin:0;padding:0;list-style:none;width:130px;border-bottom:1px solid #ccc;font-size:12px;}
ul li {position:relative;}
li ul {position:absolute;left:129px;top:0;display:none;}
ul li a {display:block;text-decoration:none;color:#777;background:#fff;padding:5px;border:1px solid
#ccc;border-bottom:0;}
* html ul li {float:left;height:1%;}
* html ul li a {height:1%;}
li:hover ul,li.over ul {display:block;}
</style >
<script language="javascript">
startList = function(){
if(document.all && document.getElementById){
navRoot = document.getElementById("nav");
for(i=0;i<navRoot.childNodes.length;i++){
node=navRoot.childNodes[i];
if(node.nodeName=="LI"){
node.οnmοuseοver=function(){this.className += " over";}
}
node.οnmοuseοut=function(){this.className=this.className.replace("
over","");}
}
}
}
window.onload = startList;
</script>
<body>
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">Domion</a></li>
<li><a href="">C++</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">网页</a></li>
<li><a href="">Domion技术</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="">Music</a></li>
<li><a href="">纯音乐</a></li>
</ul>
</bodY>
2.背景控制
背景颜色、背景图片、背景定位、背景滚动
背景属性缩写:
background:背景色 背景图片 背景平铺模式 背景滚动模式 背景定位
3.使用列表元素
ul无序列表- 列表中的各个元素现在逻辑上没有先后顺序
ol有序列表-将列表中的各个元素有序的 编号
常用属性:
list-style : 设置列表的所有属性选项
list-style-image:设置图片作为列表中的项目符号
list-style-position:设置项目符号的放置位置
list-style-type:设置项目符号的几种默认样式
1.使列表变为段落:display:inline
2.列表缩进排版:text-indent:value;
4.字体及段落样式设计
CSS支持的字体样式包含字体、字号、颜色等基本属性,以及对其他字体的微调控制方式
5.图片样式设计
图片定位:
一种使用margin进行外边距控制;
另一种通过top及right属性进行图片位置的相对定位。
图片剪切
1.使用clip剪切:clip:rect(number1 number2 number3 number4);
2.使用div强制剪切:
overflow:hidden; 将强制不显示对象中超过对象范围的部分内容
div{width:280px;height:290px;overflow:hidden;}
6.链接样式控制
a:link、a:visited、a:active、a:hover