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

代码:

<!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. 关于访问Jira和Confluence服务越来越缓慢的解决办法阐述

    Jira和Confluence部署在同一台服务器上,跑一段时间后,发现访问jira和confluence时,打开越来越缓慢.这是因为根据主机物理内存不同,默认的java虚拟机内存也会不同(一个较低值) ...

  2. SpringCloud笔记三:Eureka服务注册与发现

    目录 什么是Eureka? Eureka注册的三大步 第一步,引用Maven 第二步,配置yml 第三步,开启Eureka注解 新建Eureka子项目 把provider子项目变成服务端 Eureka ...

  3. Jenkins-在windows上配置自动化部署(Jenkins+Bonobo.Git.Server)

    本文配置Jenkins.git服务器采用 Bonobo.Git.Server 1. 登录后,打开Jenkins界面,新建一个任务 2. 配置信息 3. 配置git项目地址,我们先进行其他配置,等会再继 ...

  4. Redis protocol (redis通信协议)

    以前只会用redis -cli客户端, 或者在java程序里使用jedis来作为介质与redis服务器通信.这两天正好在实习中接触了一点这方面的内容. 五一放假就稍微翻了翻redis相关资料. 本篇博 ...

  5. SpringBoot系列: JdbcTemplate 快速入门

    对于一些小的项目, 我们没有必要使用MyBatis/JPA/Hibernate等重量级技术, 直接使用Spring JDBC 即可, Spring JDBC 是对 jdbc的简单封装, 很容易掌握. ...

  6. Correction suggestions

    1. title: A remark on the global existence of weak solutions to the compressible quantum Navier-Stok ...

  7. Erdos

    Erdős Pál(1913年3月26日-1996年9月20日),匈牙利籍犹太人,发表论文达1475篇(包括和人合写的),为现时发表论文第二多的数学家(第一是Euler):曾和509人合写论文. Er ...

  8. APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows

    APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows iTunes 12.9.4 for Windows is now available and addres ...

  9. codeblocks添加编译选项

    -std=c++0x

  10. Django组件-用户认证

    用户认证 一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...