行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

时间：2015-11-08 20:37:40 阅读：351 评论：0 收藏：0 [点我收藏+]

标签：

　　经过近一个月对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>
2

现在我们为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>
4

添加完二级栏目后，现在我们开始添加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;}

我们刷新页面预览下效果
5

接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：

.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; }

再次预览效果，如下图所示：
6

至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。

<!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

注意事项

这种写法不支持IE6浏览器，IE6只支持a下的hover，所以无法实现正确的显示，但是微软已经将IE6浏览器淘汰了，但是如果您还在使用，那么请添加相应的js实现。

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

标签：

原文地址：http://www.cnblogs.com/scyuanhui/p/4947949.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行