文件夹：
1、背景图合并和CSS Spirit
2、PS基本快捷键
3、hack技术基本书写，为什么不用？
4、内核前缀
5、伪类afterbefore
1、背景图合并和CSS Spirit

背景图合并在使用时有两种方法：

①一种就是你会PS。能够自己PS实现背景图合并成一张图片。再用background-position实现背景图的定位。

②假设你不会PS。那能够用CSS背景图合并工具，直接选好图片后在线制作生成相相应格式的图片。方便快捷。

background的语法：

background-color：red | #RGB;

background-position:X轴坐标 Y轴坐标 | left| right | center | top..

background-size: 100px | 30% | cover | contain;    

f=css_background-size&p=7" style="text-decoration:none">在线測试

background-repeat: repeat | no-repeat | repeat-x | repeat-Y

background-origin：border | padding | content

background-clip：border-box | padding-box | content-box

background-attachment：fixed | scroll

background-image：url

简写的形式：background:color url() positon repeat；

备注：background-size的属性值假设仅仅设置一个值，则第二个值会被设置为 "auto"。

      cover：实现把背景图像扩展至足够大。以使背景图像全然覆盖背景区域。

      contain：把图像图像扩展至最大尺寸，以使其宽度和高度全然适应内容区域。

背景图合并技术优势：利用背景图合并技术能够降低向server端的请求，节省时间和带宽。对站点加速有非常大的提升作用。能够实现两边圆角，中间无限延伸，通过子标签背景覆盖父标签。三层嵌套，截取图片的中间部分以及左右两边,算好图片的位置,然后利用position定位。

2、PS基本快捷键

ctrl+w 关闭

ctrl+r 标尺  右键标尺选像素或者厘米 左键点击拉出标尺线  要删掉直接拖出去

ctrl+ + 放大

ctrl+  -缩小

ctrl+1  到100%视图

ctrl+0 还原到最佳视图

ctrl+d取消选区

ctrl+t 变形 在变形过程中按住shift保持宽高不变  按Enter退出变形

Alt+Delete 前景色填充

ctrl+Delete 背景色填充

ctrl+z 撤销

ctrl+Alt+z 撤销多次

空格 切换到手状态

ctrl+g  图层分组

3、hack技术基本书写，为什么不用？

CSS hack：针对不同的浏览器写不同的CSS code的过程

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件凝视法

① 属性前缀法：  IE6:      _height: 20px;

                            IE7:      +height: 20px;

                         IE6/IE7:   *height: 20px;

                         IE6.7.8.9.10:  height: 20px\9;

                         IE8.9.10.11 :  height: 20px\0;
                           IE9.10      :    height:20px\9\0;

Hack的利弊：

我们尽量避免使用CSS hack，可是有些情况为了顾及用户体验实现向下兼容。不得已才使用hack。

比方因为IE8及下面版本号不支

持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染。这样的情况下假设不使用css3pie或htc

或条件凝视等方法时,可能就得让IE8-的专属hack出马了。使用hack尽管对页面表现的一致性有优点，但过多的滥用会造成html

文档混乱不堪。添加管理和维护的负担。相信仅仅要大家一起努力。少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋

于统一。顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack。必将减轻我们编码的复杂度，少做无用功。



内核前缀

浏览器

内核前缀

内核

FF

-moz

Gecko

IE

-ms

Trident

Chrome

-webkit

Blink

Opera

-o

换成-webkit

Persto

换成blink，原先已弃用

Safria

-webkit

webkit



伪类after before

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包括content属性指定内容的行内元素

:before 伪元素在元素之前加入内容 

这个伪元素同意创作人员在元素内容的最前面插入生成内容。默认地。这个伪元素是行内元素，只是能够使用属性 display 改变这一点。 

:after 伪元素在元素之后加入内容 

这个伪元素同意创作人员在元素内容的最后面插入生成内容。

默认地。这个伪元素是行内元素。只是能够使用属性 display 改变这一点。

实现效果：

  1. 实现简单代码
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Testing</title>
  6. <style>
  7. .wrap:before {
  8. content: '';
  9. width: 100px;
  10. height: 50px;
  11. display: block;
  12. background: #F00;
  13. }
  14. .wrap:after {
  15. content: '';
  16. width: 100px;
  17. height: 50px;
  18. display: block;
  19. background: #Fa0;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="wrap"></div>
  25. <script></script>
  26. </body>
  27. </html>

伪类清浮动：

.clearfix:after {content:"\200B";display:block;height:0;clear:both;}

.clearfix {*zoom:1;}

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before的更多相关文章

  1. js多张图片合成一张图，canvas(海报图，将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  2. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  3. 项目期复习：JS操作符，弹窗与调试，凝视，数据类型转换

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/huangyibin628/article/details/26364901 1.JS操作符 ① 除法 ...

  4. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  5. .NET生成小程序码，并合自定义背景图生成推广小程序二维码

    前言: 对于小程序大家可能都非常熟悉了,随着小程序的不断普及越来越多的公司都开始推广使用起来了.今天接到一个需求就是生成小程序码,并且于运营给的推广图片合并在一起做成一张漂亮美观的推广二维码,扫码这种 ...

  6. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  7. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

  8. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  9. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

随机推荐

  1. 第4节 hive调优：动态分区调整问题

    执行如下截图中的语句时卡住了: 原因:yarn未启动,hive底层是要提交mapreduce到yarn上才能计算结果的. 之前启动yarn时,未执行jps查看是否已经启动.其实未启动成功: [root ...

  2. Swift中的init方法

    摘要:Swift有着超级严格的初始化方法,不仅强化了designated初始化方法的地位,所有不加修饰的init方法都需要在方法中确保非Optional的实例变量被赋值初始化,而在子类中,也强制调用s ...

  3. python：零散记录

    1.rstrip()删除末尾指定字符串 例如:A = '1,2,3,4,5,' B = A.rstrip(',') B = '1,2,3,4,5' 2.isdigit()方法 Python isdig ...

  4. 【HIHOCODER 1033 】 交错和（数位DP）

    描述 输入 输入数据仅一行包含三个整数,l, r, k(0 ≤ l ≤ r ≤ 1018, |k| ≤ 100). 输出 输出一行一个整数表示结果,考虑到答案可能很大,输出结果模 109 + 7. 提 ...

  5. HDU 1257 最少拦截系统（最长上升子序列）

    题意: 给定n个数, 然后要求看看有多少对不上升子序列. 分析: 求出最长上升子序列, 那么整个序列中LIS外的数都会在前面找到一个比自己大的数, 所以不上升子序列最多有最长上升子序列个数个. 关于求 ...

  6. 数据结构实验2：C++实现单链表类

    太简单了,直接贴题目然后上代码. 题目: 实验2 2.1 实验目的 熟练掌握线性表的链式存储结构. 熟练掌握单链表的有关算法设计. 根据具体问题的需要,设计出合理的表示数据的链式存储结构,并设计相关算 ...

  7. Python利用flask sqlalchemy实现分页效果

    Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, ...

  8. Python接口测试之moco

    在现在的软件开发过程中,特别是app的部分,需要的很多数据以及内容,都是来自server端的API,但是不能保证 在客户端开发的时候,api在server端已经开发完成,专门等着前端来调用,理想的情况 ...

  9. 【转】关于大型网站技术演进的思考（十三）--网站静态化处理—CSI（5）

    讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...

  10. Codeforces 892 B.Wrath

    B. Wrath time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...