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

时间:2022-07-22 09:00:35

  经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析、部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳:

一、行内元素与块级元素水平、垂直居中问题

(一)CSS设置行内元素的水平居中

  1. div{text-align:center} /*DIV内的行内元素均会水平居中*/ 

CSS设置行内元素的垂直居中

  1. div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ 

PS:当然,如果既要水平居中又要垂直居中,那么综合一下

  1. div{text-align:center; height:30px; line-height:30px} 

(二)CSS设置块级元素的水平居中

  1. div p{margin:auto; width:500px} /*块级元素p一定要设置宽度,
  2. 才能相当于DIV父容器水平居中*/ 

CSS设置块级元素的垂直居中

  1. div{width:500px} /*DIV父容器设置宽度*/ 
  2. div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度,
  3. 以达到相对于DIV父容器的水平居中效果*/ 

什么叫行内元素?

常见的span、a、lable、strong、b等html标签都是行内元素

默认情况下,行内元素均无法设置宽度、高度、上下方向margin的外边距等

当然,这不是绝对的,通过CSS可以让任何行内元素变成块级元素!比如:

  1. span{display:block} /*span这时设置成了块级元素*/ 

什么叫块级元素?

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

当然,这也不是绝对的,通过CSS可以让任何块级元素变成行内元素!比如:

  1. 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; } 适用范围 此模式适用于任何块状元素、浮动元素、绝对定位或固定定位元素。

 

三、导航条二级下拉菜单制作

 

  1. 首页我们打看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. 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>

    打开页面预览效果

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

     像这样,一个菜单横向菜单就建好了,下来我们给栏目一,栏目二,栏目三,添加二级下拉菜单

    <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. 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. 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. 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实现。