手机页面总结

[email protected]: 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的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为负数,盒子会向反方向移动

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

时间: 2024-08-24 16:08:39

手机页面总结的相关文章

响应式:为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

移动互联,手机页面设计

1.手机上网的过程 普通浏览器上网过程  浏览器<--->Web服务器 手机上网过程  手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器 * UP指Unwired Planet公司,其UP.Phone浏览器为手机浏览器的事实标准,以下内容都基于该标准.  *普通web页面用HTML描述,目前手机页面可以用HDML和WML两种语言来描述,它们本质上是用XML 1.0来定义的.本文主要讲述HDML,由于其和HTML有相似,

关于手机页面字体大小的问题

从我第一天写手机页面的时候一直困扰我的问题有两个  一个是自适应字体的大小,一个是自适应页面的高度.我想接到一个手机的页面任务 大部分人都会碰到这种问题 我这介绍一种实现的办法媒体查询   不说别的直接贴代码 <!doctype html><html><head><meta charset="utf-8"><title>手机页面</title><meta name="viewport" c

Chrome调试手机页面

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤 打开 仿真面板.如图所示: 可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸. 可以在

学习手机页面制作4

学习手机页面制作-制作固定-流式-固定的布局 制作左右固定宽度中间自适应的页面布局 具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航 传统的布局方式 使用定位的方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定比例固定</title&

学习制作手机页面2

学习制作手机页面2. 先介绍一个css3的属性.box-sizing 这个属性 就是把盒模型的border 和padding 都计算在内 未使用box-sizing的代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>box-sizing</title> 6 7 <style&

学习手机页面制作3

手机页面制作3 利用上节说的box-sizing解决流式布局的一个问题 一个流式布局的代码 左右的width+border>100% 所以盒子会掉下去 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100%; h

手机页面开发总结_

1,图片像素不要用具体px,要用% px 2,左右边距也用%px 3,字体上,如果太小的px 手机上和电脑上是有区别的最好的情况是用em 4,对于get请求所带参数,参数之间不要留空格,不然读取数据时会取不到值 (面对如果名称没有错,值也有的情况,那么就观察你的url 看参数名称之后是否出现奇怪的字符) 5,面对多个单选框取值,首先为他们取同一个name 值(这样能保证它只能单选,不会出现多选)->给他们赋value值->循环单选框判断他们的checked 属性,在取值 6, 面对不同手机的不

手机页面目录菜单拉进拉出效果小结

之前用的代码是 left:-100%;-webkit-transition:all 5s ease;->left:0; 测试部分浏览器效果还是不错的,但是还有另外一部分浏览器无敌卡.经同事提点,换了另外一种方式 -webkit-transform:translateX(-100%);-webkit-transition:all 5s ease;->-webkit-transform:translateX(0); 然后,在各个浏览器都顺畅无比了. 手机页面目录菜单拉进拉出效果小结,布布扣,bub