经过近一个月对HTML与css的学习，利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础，但是对于网页结构布局的分析、部分属性的使用存在着问题，希望在以后的学习能有所提高，这里就最近的学习情况进行一下总结与归纳：
一、行内元素与块级元素水平、垂直居中问题
（一）CSS设置行内元素的水平居中
- div{text-align:center} /*DIV内的行内元素均会水平居中*/
CSS设置行内元素的垂直居中
- div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/
PS:当然，如果既要水平居中又要垂直居中，那么综合一下
- div{text-align:center; height:30px; line-height:30px}
（二）CSS设置块级元素的水平居中
- div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度，
- 才能相当于DIV父容器水平居中*/
CSS设置块级元素的垂直居中
- div{width:500px} /*DIV父容器设置宽度*/
- div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度，
- 以达到相对于DIV父容器的水平居中效果*/
什么叫行内元素？
常见的span、a、lable、strong、b等html标签都是行内元素
默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等
当然，这不是绝对的，通过CSS可以让任何行内元素变成块级元素！比如：
- span{display:block} /*span这时设置成了块级元素*/
什么叫块级元素？
常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素
当然，这也不是绝对的，通过CSS可以让任何块级元素变成行内元素！比如：
- h1{display:inline} /*h1这时设置成了行内元素*/
二、HTML文本替换
想要用图像替换文本，并且希望读屏器可以阅读文本，同事也希望当图像不可得是，文本是可以看见的。
解决方案：
在块状元素中插入一个空的,块状元素中包含你想要用图像替换的文本。将这幅图像设置为span的背景图像。 相对放置块且绝对放置span.这显示了span在块的前方。调整块和span的尺寸以适合这幅图像。因为块和span大小相同，并且span在块的前方， 所以span的背景图像覆盖了块中的文本。如果图像是不可得的，则浏览器将span的背景设置为透明，让文本显示出来。 为包含了你想替换的文本的块赋予独特的ID,并为它赋予样式，如下。
（1） 使用position:relative;为块定位，这样的背景图像可放置在文本的上方；
（2） 使用width和height设置块的尺寸来匹配图像大小；
（3） 使用padding:0;除去填充使文本可以显示出来；
（4） 使用overflow:hidden;确保长文本显示不出来，但是应注意，如果图像不能显示，显示的长文本会被截断。 在块中插入一个空的并为它赋予样式，如下。 n 使用position:absolute;、left:0;和top:0;将图像定位在块中的文本上。 n 使用width和height设置的尺寸，以匹配图像。 n 使用margin:0;去掉边缘，使文本能显示出来。 n 使用background-image:url("FILE.EXT")载入图像。 n 使用background-repeat:no-repeat保证图像不重复。 模式 HTML TEXT CSS
#UNIQUE-ID { position:relative; padding:0; overflow:hidden; width:IMAGE_WIDTH; height:IMAGE_HEIGHT; } #UNIQUE-ID span { position:absolute; left:0; top:0; margin:0; width:IMAGE_WIDTH; height:IMAGE_HEIGHT; background-image:url("FILE.EXT"); background-repeat:no-repeat; } 适用范围 此模式适用于任何块状元素、浮动元素、绝对定位或固定定位元素。
三、导航条二级下拉菜单制作
-
首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单
<div class="nav">
<ul>
<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>
-
现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>
打开页面预览效果
-
像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单
<div class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<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>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
-
添加完二级栏目后，现在我们开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
我们刷新页面预览下效果
-
接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次预览效果，如下图所示：
-
至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横排二级下拉菜单</title>
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<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>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
</body>
</html>
END