HTML display:inline-block
元素转换
display:block; 行内转块
Display:inline; 块转行内
Display:inline-block; 块或行内转行内块
链接伪类
a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放上去显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
购物车案例:
图片显示在网页中是购物车,鼠标点击时是登录:
代码:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
width: 67px;
height: 32px;
background: url("110.png");
}
a:hover{
background: url("110.png") bottom
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
- 浏览器默认文字大小
浏览器默认文字大小:16px;
行高:基线与基线之间的距离
行高 = 文字高度 + 上下边距
一行文字行高和父元素高度一致的时候,垂直居中显示。
HTML display:inline-block的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- vim 编辑器常用命令
vi 常用命令行 1.vi 模式 a) 一般模式: vi 处理文件时,一进入该文件,就是一般模式了. b) 编辑模式:在一般模式下可以进行删除,复制,粘贴等操作,却无法进行编辑操作.等按下‘i,I,o ...
- 解决parseSdkContent failed java.lang.NullPointerException错误
今天我的eclipse崩溃了,报“parseSdkContent failed java.lang.NullPointerException”的错误. 所有的安卓项目都不正常,创建项目就会报 java ...
- 妙味远程课堂-JS属性
html由属性名和属性值组成 属性读操作:获取.找到 元素.innerHtml//读取元素内的html内容 元素.属性名 案例1:点击按钮弹出文本框的内容(value值) <!DOCTYPE h ...
- linux环境中,如何通过手动创建crontab文件的方式来设置crontab定时调度任务?
需求描述: 之前在创建定时任务的时候,都是通过cronab -e的方式进行创建,今天在做通过脚本部署定时任务的时候, 就想,通过crontab -e编辑的定时任务存放在哪个文件里,是否,可以手动的编辑 ...
- 【nginx】nginx tomcat session 共享配置
tomcat,redis下载忽略. 一.从github上下载源码,https://github.com/jcoleman/tomcat-redis-session-manager, 将源码复制到开发工 ...
- Spring中的类型转换与数据绑定(PropertyEditor、ConversionService、Data Binding、Formatter)
Spring早期使用PropertyEditor进行Object与String的转换.到Spring 3后,Spring提供了统一的ConversionService API和强类型的Converte ...
- 7 -- Spring的基本用法 -- 10... 获取其他Bean的属性值;获取Field值;获取任意方法的返回值
7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...
- linux-满足多字符条件统计行数
测试数据: 2017-10-24 14:14:11:1123 [ INFO] order_type=add,order_id=9150882564978710367790292017-10-24 14 ...
- FFmpeg X264的preset和tune
鉴于x264的参数众多,各种参数的配合复杂,为了使用者方便,x264建议如无特别需要可使用preset和tune设置.这套开发者推荐的参数较为合理,可在此基础上在调整一些具体参数以符合自己需要,手动设 ...
- Splash jsfunc() 方法
jsfunc()方法可以直接调用 JavaScript 定义的方法,但是所调用的方法需要用双中括号包围,这相当于实现了 JavaScript 方法到 Lua 脚本的转换 function main(s ...