鼠标放在某个文字上时，展示文字的解释说明

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>display属性</title>

    <style type="text/css">

        .con h3{

            font-size:25px;

            color:red;

        }

        .box{

            width:200px;

            height:50px;

            background-color:gold;

            line-height:50px;

            text-indent:10px;

            display:none;  /* 隐藏不显示 */

        }

        .con:hover .box{

            display:block;  /* 悬浮时显示 */

        }

    </style>

</head>

<body>

    <div class="con">

        <h3>鼠标悬浮，试试看会出现什么</h3>

        <div class="box">很遗憾，什么也没有出现</div>

    </div>

</body>

</html>

文字绕图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动文字绕图</title>

    <style type="text/css">

        .con{

            width:450px;

            height:210px;

            border:1px solid #000;

            margin:50px auto 0;

        }

        .pic{

            width:100px;

            height:100px;

            background-color:gold;

            float:left;

            margin:10px;

        }

        .text{

            /*background-color:green;*/

            height:130px;

            color:#666;

        }

    </style>

</head>

<body>

    <div class="con">

        <div class="pic"><img src="data:images/头像2.png" alt="头像" /></div>

        <div class="text">植树造林不仅可以绿化和美化家园，

            同时还可以起到扩大山林资源、防止水土流失，世界

            首枚植树节邮票 、保护农田、调节气候、促进经济发

            展等作用，是一项利于当代、造福子孙的宏伟工程。

            为了保护林业资源，美化环境，保持生态平衡。植树

            造林不仅可以绿化和美化家园，同时还可以起到扩大山

            林资源、防止水土流失，世界首枚植树节邮票 、保护

            农田、调节气候等。

        </div>

    </div>

</body>

</html>

页面效果：

css 实现文字提示说明、文字绕图效果的更多相关文章

  1. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  2. css3购物网站商品文字提示实例

    css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...

  3. 使用CSS 3创建不规则图形 文字围绕

    前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...

  4. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  5. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  6. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  8. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  9. 用js实现文字提示层 ---总结

    文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下:  需求: 当鼠标移入到红色字体是,提示框会显示在下 ...

随机推荐

  1. mysql加速导入数据的简单设置

    mysql加速导入数据的简单设置 # 修改前查询参数值 show variables like 'foreign_key_checks'; show variables like 'unique_ch ...

  2. [JDK8]读写锁的改进:StampedLock

    StampedLock是Java8引入的一种新的锁机制,简单的理解,可以认为它是读写锁的一个改进版本,读写锁虽然分离了读和写的功能,使得读与读之间可以完全并发,但是读和写之间依然是冲突的,读锁会完全阻 ...

  3. 第三节：深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字

    一. 各类数据结构比较及其线程安全问题 1. Array(数组): 分配在连续内存中,不能随意扩展,数组中数值类型必须是一致的.数组的声明有两种形式:直接定义长度,然后赋值:直接赋值. 缺点:插入数据 ...

  4. 第六节：反射（几种写法、好处和弊端、利用反射实现IOC）

    一. 加载dll,读取相关信息 1. 加载程序集的三种方式 调用Assembly类下的三个方法:Load.LoadFile.LoadFrom. //1.1 Load方法:动态默认加载当前路径下的(bi ...

  5. 【codeforces 765F】Souvenirs

    Description Artsem is on vacation and wants to buy souvenirs for his two teammates. There are n souv ...

  6. PHP中的常用数组操作方法

    一.数组操作的基本函数 数组的键名和值array_values($arr);  获得数组的值array_keys($arr);  获得数组的键名array_flip($arr);  数组中的值与键名互 ...

  7. Mysql中设置指定IP的特定用户及特定权限

    创建用户:格式:grant select on 数据库.* to 用户名@登录主机 identified by '密码' 举例: 例 1:增加一个用户 test1 密码为 abc,让他可以在任何主机上 ...

  8. maven 一些整理

    1.发布jar包到私服,需要进入项目目录 发布jar   :mvn deploy 发布源码 :mvn source:jar deploy,这个需要依赖一个maven插件: <plugin> ...

  9. [Kubernetes]如何让集群为我们工作?

    前一段时间倒腾k8s的时候,写了一系列的博客,有很多人不理解那样做的意义是什么,为什么要那样做,这篇文章就尝试解释一下,在实际环境中,是如何让集群为我们工作的. 因为只研究了一个月左右的时间,认识难免 ...

  10. NB卡开卡注意事项【转】

    转自:https://blog.csdn.net/cheng401733277/article/details/83276436 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...