8.css内容移出与精灵图
定位的盒子居中显示
★:margin:0 auto; 只能让标准流的盒子居中对齐。
★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)
标签包含规范
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p,div等标签。
◆行内元素尽量包含行内元素,行内元素不要包含块元素。
规避脱标流
◆尽量使用标准流。
◆标准流解决不了的使用浮动。
◆浮动解决不了的使用定位。
图片和文字垂直居中对齐
vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;
Css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
css之内容移除(网页优化)
◆使用text-indent:-5000em;
◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。
Css精灵图
属性选择器
emmet快捷键:
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
1 html:
1.1 生成结构的快捷键:
!+ tab,可以生成html5的结构代码。
1.2 生成id名和类名
标签名.类名#id名+tab 没有标签名.类名+tab ==>div
1.3 生成同级元素:
标签名+标签名+标签名 “+”tab
1.4 生成子类标签
标签名>子标签名>子标签名>子标签名+tab 标签名>子标签名>子标签名>子标签名^^子标签名+tab
1.5 带固定数量的标签:
ul>li*+tab
1.6 带有序号名称
ul>li.abc$* + tab
1.1 生成带有内容的标签:
ul>li>a{item}*5
2. css
width:30px==>w30+tab Height:30px==>h30+tab Margin:30px==>mg30+tab Padding:30px==> pd30+tab Line-height:12px==>lh12px+tab Background==>bg+tab
8.css内容移出与精灵图的更多相关文章
- web前端sprite,精灵图,雪碧图
css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- CSS背景和精灵图
如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...
- 第9天:CSS精灵图
今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...
- Css - 精灵图
Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...
- CSS Spritec下载,精灵图,雪碧图,初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
- Uint 7.文本和字体属性,background,精灵图和3种定位
一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...
- H5 40-CSS精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- http协议(一)一些基础知识
当我们在浏览器的地址栏中输入网址,然后点击回车,接着,浏览器就会呈现出我们需要的web界面,那么,这个界面是怎么产生的? web的界面是根据我们输入的URL(网址.地址),浏览器从服务器端获取对应的文 ...
- 如何在Windows下安装Tomcat服务器
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选服务器.在Windows下安装 ...
- ajax post 请求 ,java端使用 request.getParameter 获取不到数据问题
js端 $.ajax({ type:'POST', data:{a:1}, url:_this.apiUrl+url, dataType:'json',//使用jsonp方式请求 contentTyp ...
- VSFTPD虚拟用户配置
转载:http://www.cnblogs.com/allenjin/archive/2011/12/03/2274542.html 以下操作验证OK!!!! VSFTPD虚拟用户配置 VSFTP = ...
- 团队-Python 爬取豆瓣电影top250-成员简介及分工
姓名:周鑫 班级:软件6班 团队名称:咣咣踹电脑 擅长:Python,java 分工:编写数据库
- kbmmw 中JSON 中使用SQL 查询
前面讲到了kbmmw 的JSON 对象操作,如何快速的查找JSON 中的值? 一种办法就是通过遍历的方法,其实在kbmmw 还有一种灵活的查询方式, 就是通过SQL 方式查询JSON 中的值.也就是说 ...
- sql number类型和varchar2类型
查询时,发现org_id 为number类型,zone_id为varchar2类型,需要转化 转换 to_char(),或者to_number select a.id,b.col,a.col from ...
- 前端html的简单认识
一.html 超文本标记语言 hypertext markup language 二.html的结构 三.html标签格式 1.标签由<>把关键字括起来 2.标签通常是成对出现的 , eg ...
- SimpleDateFormat转换时间,12,24时间格式[转]
SimpleDateFormat转换时间,12,24时间格式 来自:http://blog.csdn.net/dongguang1082/article/details/4387165 在使用Simp ...
- Host is not allowed to connect to this MySQL server---------------->windows10
错误,数据库无法远程连接. 第一步,关闭本地防火墙 注意: 两台连接的机器都需要关闭 第二步,两台机器互相ping,看是否可以互相访问 丢失为零,意为可以连接. 第三步登录数据库 第四步,切换,数据库 ...