css 实现文字提示说明、文字绕图效果
鼠标放在某个文字上时，展示文字的解释说明
代码：
<!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 实现文字提示说明、文字绕图效果的更多相关文章
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- css3购物网站商品文字提示实例
css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...
- 使用CSS 3创建不规则图形 文字围绕
前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- jQuery图片提示和文字提示
图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- jQuery渐隐渐出的文字提示
<html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- 用js实现文字提示层 ---总结
文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下: 需求: 当鼠标移入到红色字体是,提示框会显示在下 ...
随机推荐
- python中的三元运算
一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...
- Entity Framework入门教程（17)---记录和拦截数据库命令
记录和拦截数据库命令 这一节介绍EF6怎么记录和拦截发送给数据库的查询和操作命令. 1.记录EF发送给数据库命令(DbContext.Database.Log) 以前给了查看EF发送给数据库的命令我们 ...
- Beamer 中的页面链接
\documentclass[]{beamer} \usetheme{Madrid} \usenavigationsymbolstemplate{} \title{Main Title} \autho ...
- 五十、进程间通信——System V IPC 之共享内存
50.1 共享内存 50.1.1 共享内存的概念 共享内存区域是被多个进程共享的一部分物理内存 多个进程都可把该共享内存映射到自己的虚拟内存空间.所有用户空间的进程若要操作共享内存,都要将其映射到自己 ...
- MySQL学习9 - 单表查询
一.单表查询的语法 二.关键字的执行优先级(重点) 三.单表查询示例 1.where约束 2.group by分组查询 3.聚合函数 4.HAVING过滤 5.order by查询排序 6.limit ...
- djang增删改查
创建表: from django.db import models class Publisher(models.Model): pid = models.AutoField(primary_key ...
- 请求超时VUE axios重新再次请求
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...
- Centos 06 文件类型和扩展名&索引节点inode和存储块block
本节内容 1.文件类型 2.文件扩展名 3.索引节点inode和block块 首先需要申明一点, 1.在linux里面文件扩展名和文件类型是没有关系的 2.为了容易区分和兼容用户使用windows的习 ...
- LESS知识总结
知识体系 1.认识less 2.使用less 3.变量( variables ) 4.混合 ( mixins ) 5.嵌套规则 ( nested-rules ) 6.运算(operation ...
- jdk1.8新特性 lambda表达式和Stream
一.Lambda 1.lambda : 匿名函数 2.好处:减少打码的冗余,增强匿名函数的可读性 3.语法格式 语法格式一 : 无参数,无返回值 () -> System.out.println ...