手机页面总结

1.@font-face: 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

语法:@font-face:{属性:取值}
取值:
font-family:设置文本的字体名称。
font-style:设置文本样式。
font-variant:设置文本是否大小写。
font-weight:设置文本的粗细。
font-stretch:设置文本是否横向的拉伸变形。
font-size:设置文本字体大小。
src:设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。
src: url('//at.alicdn.com/t/font_1464666184_1351352.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1464666184_1351352.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1464666184_1351352.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1464666184_1351352.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1464666184_1351352.svg#iconfont') format('svg'); /* iOS 4.1- */

2.window.onresize:当改变窗口大小时触发的事件。
3.nav-child(num)与nav-of-type(num)区别:num从1开始计数,p:nav-of-type(2)不管父级有几种语速,只是渲染p标签的第二个元素。nav-child(2)则与父级有几个元素有关,若有div,p,span,等表示的意思就不相同,有可能nav-child没用,不能精确定位。http://www.zhangxinxu.com/wordpress/2011/06/css3选择器nth-child和nth-of-type之间的差异
4.外链icon图标:选择想要的图标,点击进购物车-》存储-》获取在线链接-》点击右侧uncode获取地址-》下载css文件-》外链进页面-》把iconform 和icon图标的类写进<i>中-》在style.css中修改图标的类内的内容(大小用font-size设置,背景色用color,即当成文字进行设置)。
5.(1)元素居中:css3:calc()支持四则运算a{position:absolute;top:calc(50% - height/2);left:calc(50% - width/2)}//兼容性不好,新出的标签
(2)vh:适口单位,
6.input字体样式的设置,必须要在input里面设置,在父级没有效果。浏览器有默认对input样式的设置。

7.ajax加载html样式,在对加载的样式进行jquery事件 处理时,必须要用事件绑定,绑定在其父级元素上,否则事件无效。手机端一般用on绑定。
8.(1)ie6兼容opcity filter:Alpha(opcity=50);如果你设置的值是0.5时;(2)设置margin为负数,盒子会向反方向移动

先总结到这,下次再说。如有问题,请各位看官及时指出,不胜感谢!!! 

原文地址:https://www.cnblogs.com/changyuqing/p/5558602.html