css笔记——移动端

苹果手机

/*按钮样式:*/input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

以下内容出处:http://blog.sina.com.cn/s/blog_51048da70102uyjp.html

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性,这样就保证body的点击区域效果一致了

2.outline:none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"

(2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性,其实是多余。

3.-webkit-appearance

-webkit-appearance: none;//消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式

不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失

4.-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整

5.-webkit-text-size-adjust

-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化),此属性也不继承,一般加在body上规定整个body的文字都不会自动调整

6.-webkit-touch-callout

-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

  

时间: 2024-11-05 21:49:09

css笔记——移动端的相关文章

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

css实现移动端消息提醒按钮

1.利用css实现移动端消息提醒按钮,页面效果如下: 2.代码实现思路和关键点分析: 代码的结构如下图所示,一共有4个提醒模块,每个模块都用li标签包裹起来,li标签里设置两个div,左边的div是文案,右边的div用于包裹按钮. css样式一看就懂,就不啰嗦了.本文的重点是按钮效果的实现. 2.1 如上图,我们用一个class为“.setting_btn”的div 绘制椭圆,设置背景色.1个像素的补白.以此让中间白色的圆与外框看起来有1px的间距. 用class为“.setting_circl

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy,在低于安卓4.4的版本号的手机上,自带的浏览器是不支持这个属性的. 好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其它一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.只是没关系,大部分的常见布局问题,我都能解决掉.可是,以下这个-.我真心有点费解.只是,没关系,通过我的研究,终于还是非常快用

css笔记-选择器详解

css笔记-选择器详解 CSS通过选择器来定位要应用样式的元素. 下面对所有的选择器做了一个解释(CSS为版本号). CSS选择器详解 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有

CCIE学习笔记之端到端QOS

Class-map默认行为match-all Match protocol http mime "*/audio/*" Match protocol http mime "*/video/*"  //分类器寻找特殊类型的音频和视频mime流量 Match protocol http "*.jpg|*.jpeg"     //匹配图片流量 注:MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自

HTML/CSS笔记归纳整理

前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. *HTML基本语法: 1. 常规标签 <标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序. 2. 空标签 <标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替. *HTML标题: <

Html Css笔记

鼠标交点: outline:none: 透明: opacity 透明 0-1的小数 元素透明它里边所有的内容都会变成透明的 黑客: 在结尾加如:     \0 IE11至IE8的IE浏览器     \9\0 IE10至IE8的IE浏览器     \9 IE10及IE10之前的IE浏览器 在开头加入:     *,+ IE7及IE7之前的IE浏览器支持     _IE6及IE6之前的IE浏览器支持 注释!!!!!!!!!!!!!!!!!!!     <!-- IE9及IE9之前的IE浏览器支持 -