图片样式加hover特效
之前有个尴尬的事情发生,我不知道如何将文字放在图片右边,我想了个麻烦且愚蠢的办法,后来才知道只需要将图片居左就可以达到效果.....不说了看下面
需要实现的效果:
很简单,
<img src="img/liuxiang.jpg" align="left"/> 标红的标签,就能将你的文字显示在图片右边,假如不设置,则会如下效果:
——————————————————分割线——————————————————————
接下来举例一个淘宝的协议页面效果如何实现:
效果:
实现文字下划线代码:
<u>文字</u>
利用选择器将a标签带来的下划线去除:
text-decoration: none
实现鼠标放置上面出现特效的效果:
先利用伪类选择器选中a:
a:hover{
text-decoration: underline;
}
underline是将鼠标放到a标签包裹的内容时出现下划线,还能出现其他的特效。
按钮用法:
<input type="button" name="" value="同意协议" />
css:
input{
background-color: coral; ————按钮背景颜色
color: white; ————字体颜色
border: none; ————去除按钮边框
width: 200px; ————设置按钮宽度
height: 30px; ————设置按钮高度
border-radius: 5px; ——————设置按钮圆角(将按钮四个角变的带点弧度)
}
将鼠标放到某个属性中出现偏移:
就拿li举例
<ul class="one">
<li></li>
</ul>
.one{
position: absolute;
}
.one li:hover{
position: relative;
top:-1px;
left: -1px;
}
效果图:
变化前:
变化后:
图片样式加hover特效的更多相关文章
- 原生js图片懒加载特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- win32 htmlayout点击按钮创建新窗口,以及按钮图片样式
最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- imagesLoaded – 检测网页中的图片是否加载
imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库.支持回调的获取图片加载的进度,还可以绑定自定义事件.可以结合 jQuery.RequireJS 使用 ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
随机推荐
- 性能优化 | JVM性能调优篇——来自阿里P7的经验总结
VM 调优概述: 性能定义: 吞吐量 - 指不考虑 GC 引起的停顿时间或内存消耗,垃圾收集器能支撑应用达到的最高性能指标. 延迟 - 其度量标准是缩短由于垃圾啊收集引起的停顿时间或者完全消除因垃圾收 ...
- C#winform和百度API互动-----之JS读取中C#中的函数
例子1 线上JS var getcpylocation =window.external.getlocation(); map.centerAndZoom(getcpylocation,12); C# ...
- JAVA通过FTP方式向远程服务器或者客户端上传、下载文件,以及删除FTP服务器上的文件
1.在目标服务器上搭建FTP服务器 搭建方式有多种大家可以自行选择,例如使用Serv-U或者FTPServer.exe:这里我以FTPServer.exe为例搭建:在目标服务器(这里对应的IP是10. ...
- SQL-W3School-高级:SQL VIEW(视图)
ylbtech-SQL-W3School-高级:SQL VIEW(视图) 1.返回顶部 1. 视图是可视化的表. 本章讲解如何创建.更新和删除视图. SQL CREATE VIEW 语句 什么是视图? ...
- VBA添加下拉菜单
Sub createMenus() Dim cmdBar As CommandBar Dim cmdMenu As CommandBarPopup Dim cmdBtn As CommandBarBu ...
- android java.util.Date和java.util.sql中Date的区别
1.将java.util.Date 转换为 java.sql.Date java.sql.Date sd; java.util.Date ud; //initialize the ud such as ...
- TextView的封装和自定义
实现的效果如下: #import <UIKit/UIKit.h> @interface CustomTextView : UITextView @property (nonatomic , ...
- LODOP纸张高度不定的纯文本累计高度
小票由于纸张没有确定的高度,根据内容多少,小票打印机出多少纸,在设置纸张的时候,需要把纸张设置成不定高的纸张.简短问答:小票打印 ,参考样例18 http://www.c-lodop.com/demo ...
- Android之FrameWork
1 Activity的生命周期和启动模式 1.1 Activity的生命周期全面分析 用户正常使用情况下的生命周期 & 由于Activity被系统回收或者设备配置改变导致Activity被销毁 ...
- RabbitMQ简单实现,exchange四种模式,持久化
RabbitMQ目录 一.简介,简单实现二.Exchange四种类型简单介绍三.消息确认,交换机.队列及消息持久化一.简介及简单实现RabbitMQ是一个消息代理:它接受并转发消息.你可以把它当成一个 ...