html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: auto; /*如果有溢出自动形成滚动条*/ -webkit-text-size-adjust: 100%; /*不想让iPhone横坚屏切换的时候调节文字*/ -ms-text-size-adjust: 100%; } html * { /*所有元素*/ outline: none; -webkit-t…

一般会用normalize.css或者reset.css重置样式 移动端特殊css样式 去除ios 按钮按下的默认高亮效果 -webkit-tap-highlight-color : none; ios 触摸并按住触摸目标时候,禁止或显示系统默认菜单 -webkit-touch-callout: none; 文本不能被选择; 但是input textarea在ios不能被聚焦,属性要设置成text user-select: none; input{ user-select: text; } 去除…

今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,o…

一.常用的base.css文件(也是比较简略的,但按需增加) body,ul,li,ol,dl,dd,h1,h2,h3,h4,h5,h6,input,p{ margin:;} ul,ol { padding:;} img { border:none;} .clear{zoom:1;} .clear:after{display:block; content:"";clear:both; visibility:hidden; height:0;} /*清除浮动*/ a{text-decor…

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版  (Typography)…

下面是我用过多次的base.css.欢迎各种建议吐槽.大家共同进步. ;;} table{;} fieldset,img {;} address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} capation,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weigh…

@charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,le…

有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeimeng * @Date: 2015-11-11 10:22:02 * @Last Modified by: liubeimeng * @Last Modified time: 2015-11-11 10:33:18 * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原…

在写css文件时,一些常用的属性我们完全可以把它单独提出来,提高复用性,能增加开发效率,下面是一些网站推荐的常用原子类,也是零度逍遥常用的,规定了一些字体,内外边距和宽高属性,一般写在base.css内,分享给大家,希望大家在开发的时候能够事半功倍.当然,对于脑残的IE也都是支持的. /*文字排版*/ .f12{font-size:12px} .f13{font-size:13px} .f14{font-size:14px} .f16{font-size:16px} .f20{font-size…

一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, textarea, /*表单元素*/ th, td, /*表格元素*/ pre…

移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就能在自己的手机上看到真机效果,有时还可以用 alert 调试一些 js:当然,有时仅仅展现样式还不够,我们希望能像 chrome 面板或者 firebug 一样查看元素的 css 样式,甚至可以在控制台看到 js 的 console 输出,UC浏览器开发者版可以方便地做到这点,具体可以参考 如何使用…

这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方不需要修改   ========================================= @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blo…

原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先”这个词立刻就会出现在脑海中. 我们知道从“移动端优先”这个角度开始设计很重要,但我们很少谈到使用“移动端优先”的方法来写代码. 今天,我想与你分享“移动端优先”添加样式的方法,为什么这种方法更好,以及如何发挥它的魔力. 贴士:如果你在学习使用Susy来建立响应式布局,这篇文章会对你帮助非常大. #什…

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系.这里首先了解以下几个概念. 一.视口 1.layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设…

* { margin:; padding:; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } html { font-size: 12px; color: #666; font-family: 'Microsoft Yahei' 'Helvetica Neue', Helvetica, STHeiTi, Ar…

Headings All HTML headings, <h1> through <h6> are available. h1. Heading 1 h2. Heading 2 h3. Heading 3 h4. Heading 4 h5. Heading 5 h6. Heading 6 Body copy Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applie…

1.通过link标签判断加入 以前听说过在link标签中加media = "handheld",但这个用到安卓或苹果都不管用,后来尝试以下方法,是管用的. <link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 1080px)"> 2.通过js获取 判断所属浏览器是…

去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window).width();/*获取屏幕宽度*/ /*判断屏幕宽度下雨880让元素去除绑定的hover事件*/ if(winW01<=880){ $(".menu3").unbind('mouseenter').unbind('mouseleave'); } 去除safari浏览器下input的…

ul { list-style: none;}a { text-decoration: none;} body,h1,h2,h3,h4,h5,h6,p,ul,ol,form { margin: 0; padding: 0;}html,body { width: 100%; height: 100%; background: #fff; font-size: 12px; font-family: Microsoft YaHei ; SimSun, Arial, Helvetica, sans-se…

@charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spac…

@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } /*去掉input等聚焦时的蓝…

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 注释是代码之母.--摘自哪吒语录 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="color:…

通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色 设置css属性 -webkit-user-select:none; 控制用户不可选择文字 区域性 overflow: scroll | auto 滚动时使用原生效果:-webkit-overflow-scrolling: touch (ios8+,Android4.0+)…

在页面渲染时,GPU默认不会开启.当css样式中出现某些规则时,就会开启GPU加速,让动画运行的更加流畅,最显著的象征就是元素的3D变换. 这些就是我们通常所说的css硬件加速,但我们有时候并不需要用到3D变换,却又想开启加速时,可以通过 transform: translateZ(0); 来欺骗浏览器开启GPU加速. 为什么我们说打游戏的电脑显卡要好,其中一点是游戏动画渲染复杂.性能消耗高,高级的显卡处理游戏画面会更加流畅. 所以在使用滤镜或一些3D变换出现渲染问题时,可以试试加上这条属性.…

CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. CSS基本语法及页面引用 CSS基本语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; pr…

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ul { list-style: none; width:300px; margin:100px auto; he…

css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!</h2> <!-- 内部样式:在head内部的style标签里写样式 --> <style type="text/css" > /*css的注释是这样的*/ h2{color: blue;} </style> <!-- 外部样式:在独立的c…

@media screen and ( min-width: 319px){html{ font-size: 100px;}}@media screen and ( min-width: 359px){html{ font-size: 106px;}}@media screen and ( min-width: 383px){html{ font-size: 112px;}}@media screen and ( min-width: 399px){html{ font-size: 118px;…

@charset "utf-8"; * { -webkit-box-sizing: border-box; box-sizing: border-box; } //禁止文本缩放 html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; font-family: -apple-system, "PingFang SC","Helvetica Neue", Helvetica,…

@charset "utf-8";  html {   overflow-x: hidden;   overflow-y: auto;  }  /*隐藏横向滚动,垂直滚动根据内容自适应(去除IE默认垂直滚动条)*/    body,  h1,  h2,  h3,  h4,  h5,  h6,  hr,  p,  blockquote,  dl,  dt,  dd,  ul,  ol,  li,  pre,  fieldset,  lengend,  button,  select,  …