项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before
2017-05-06 12:14
197 查看
文件夹: 1、背景图合并和CSS Spirit 2、PS基本快捷键 3、hack技术基本书写,为什么不用? 4、内核前缀 5、伪类afterbefore |
背景图合并在使用时有两种方法: ①一种就是你会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; 在线測试 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定位。 |
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 图层分组 |
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 |
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包括content属性指定内容的行内元素 :before 伪元素在元素之前加入内容 这个伪元素同意创作人员在元素内容的最前面插入生成内容。默认地。这个伪元素是行内元素,只是能够使用属性 display 改变这一点。 :after 伪元素在元素之后加入内容 这个伪元素同意创作人员在元素内容的最后面插入生成内容。 默认地。这个伪元素是行内元素。只是能够使用属性 display 改变这一点。 |
实现效果:
[html] view
plaincopyprint?
实现简单代码
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>
<style>
.wrap:before {
content: '';
width: 100px;
height: 50px;
display: block;
background: #F00;
}
.wrap:after {
content: '';
width: 100px;
height: 50px;
display: block;
background: #Fa0;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script></script>
</body>
</html>
伪类清浮动:
.clearfix:after {content:"\200B";display:block;height:0;clear:both;} .clearfix {*zoom:1;} |
相关文章推荐
- 项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before
- IPMF心得之文化背景下的项目管理问题总结
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
- 常见的浏览器Hack技巧总结
- Android基础学习总结(十六)——接入腾讯X5内核TBS浏览器WebView方法
- css常见的浏览器Hack技巧总结
- 背景大图隔几秒切换(非轮播,淡入淡出)--变形金刚joy007 项目总结
- 关于windows下使用webkit或chrome浏览器内核总结(***)
- IPMF心得之文化背景下的项目管理问题总结
- 软件工程-项目总结——使用javascript对有行列合并的表格进行操作的方式
- 主流浏览器js 引擎内核市场份额attialx总结vOa9
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
- 浏览器兼容问题项目总结(一)浏览器
- 五大主流浏览器内核的源起以及国内各大浏览器内核总结
- 主流浏览器内核及前缀
- 常见的浏览器Hack技巧总结
- Android项目合并总结一(项目转换)
- 浏览器内核以及私有前缀
- 浏览器兼容问题项目总结(六) 页面嵌套多个iframe滚动条兼容性修改
- 浏览器内核总结