css层显示1

Dear 丶 2022-04-11 08:22 77阅读 0赞

<!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=gb2312" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <style>
    .ls{ width:700px; margin:0 auto;}
    .ls li{ float:left; width:100px; margin-left:15px; list-style:none;}
    .info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:200px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
    .info:hover {background:#eee;color:#333;}
    .info span {display: none }/*设置正常下的span为隐藏状态*/
    .info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{ display:block;position:absolute;top:150%;left:0;width:250%;
    border:1px solid #cccccc; background:#fff; color:#000;padding: 0 5px; text-align:left;}
    </style>
    <body>
    <div class="ls">
    <ul>
      <li><a class="info" href="http://www.chinaz.com">中国站长站<span>老爸老妈祝您们在新的一年里身体健康,平安快乐,事事如意!</span></a></li>
      <li><a class="info" href="http://www.chinaz.com">中国站长站<span>老哥祝你新婚快乐!百年好合!</span></a></li>
      <li><a class="info" href="http://www.chinaz.com">中国站长站<span>小东西,祝你工作顺利,财源滚滚,幸福快乐,健康平安</span></a></li>
      <li><a class="info" href="http://www.chinaz.com">中国站长站<span>祝我自己快快乐乐,钱越多越好!皮肤好好!健康平安!</span></a></li>
    </ul>
    </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS如何控制DIV层实现显示和隐藏

![bc1d3c989defdbead2478db73330846b.jpeg][] 本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常

古城微笑少年丶/ 2024年03月23日 00:22/ 0 赞/ 103 阅读

相关 xml不显示css样式_如何使用CSS显示XML？

xml不显示css样式 Introduction: 介绍： You must be aware of the term XML and must have dealt w

梦里梦外;/ 2023年03月05日 12:40/ 0 赞/ 26 阅读

相关 2.1 CSS复合选择器、元素显示模式

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

快来打我*/ 2023年01月13日 06:18/ 0 赞/ 187 阅读

相关 css 实现鼠标移入图片显示遮罩层

css 实现鼠标移入图片显示遮罩层代码如下 <!DOCTYPE html> <html> <head> <meta char

约定不等于承诺〃/ 2022年12月29日 06:34/ 0 赞/ 349 阅读

相关 css盒子遮罩层显示与隐藏

实现效果要如图显示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

浅浅的花香味﹌/ 2022年10月25日 04:53/ 0 赞/ 388 阅读

相关 JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html [JS+CSS简单实现DIV遮罩层显示隐藏]

忘是亡心i/ 2022年07月16日 08:15/ 0 赞/ 313 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 325 阅读

相关 css层显示1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

Dear 丶/ 2022年04月11日 08:22/ 0 赞/ 78 阅读

相关网络层-1

网络层提供什么服务：简单灵活，无连接的，最大努力交付的数据报服务，可能出错，丢失，重复，失序。可靠交付由端系统（主机）来负责，即传输层负责，如差错处理，流量控制。电

约定不等于承诺〃/ 2022年03月20日 12:06/ 0 赞/ 214 阅读

相关 JS控制显示隐藏层

注意：不能用document.getElementsByName；会出现对象未被引用。 <html> <head> <meta http-equiv="Con

电玩女神/ 2022年01月06日 06:33/ 0 赞/ 361 阅读