【common.css 值得学习的css样式布局】的更多相关文章

common.css 值得学习的css样式布局

正常的项目当中,应当有一个common.css,就是把一些常用的样式,写入其中. 然后再结合一些特性的css,构造漂亮的页面. 下面欣赏一些海盗商城的common.css. /***样式初始化***/ html { margin: 0; padding: 0; border: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }…

值得学习的CSS知识

这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不同的浏览器默认值可能不同.如果怕有冲突,可以在样式表一开始就先定义所有元素的 margin 和 padding 值都为 0,象这样: * { margin:0; padding:0; } 二.使用 css 缩写使用缩写可以帮助减少你 CSS 文件的大小,更加容易阅读.css 缩写的主要规则请参看<常…

微信小程序开发：学习笔记[4]——样式布局

微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | block | inline-block. position.float来实现布局,缺乏灵活性且有些适配效果难以实现.比如像下面这种常见的信息列表,要求内容高度不确定下保持垂直居中: 这种情况下,我们更建议用flex布局. 在开始介绍flex之前,为了表述方便,我们约定以下术语:采用flex布局的元素…

css案例学习之层叠样式

代码 <html> <head> <title>层叠特性</title> <style type="text/css"> p{ color:green; } .red{ color:red; } .purple{ color:purple; } /*这里的顺序是关键*/ #line3{ color:blue; } </style> </head> <body> <p >这是第1行…

（3）《Head First HTML与CSS》学习笔记---CSS入门

1.O‘Reilly的<CSS PocketReference>是一本不错的CSS参考小书,记录了常用的元素属性. 2.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(以下所有讨论都经过Edge.Firefox开发者版本的验证(2017.11.3)). 现在来验证这个观点. 下面的代码,链接的颜色并没有变成茶红色,还是浏览器默认的紫色样式,为什么呢? <!doctype html> <html> <head> <title>Head Fi…

CSS基础学习 21.CSS居中总结

注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </style> 用以下形式代替 <style> html,body{ margin:0; padding:0; } </style> 1.盒子居中 margin:0 auto; <!doctype html> <html lang="en"> &…

CSS基础学习-2.CSS选择器（上）

元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一.元素选择符 1.通配符:*{ } 2.类选择符:.类名称{ } 3.id选择符::#id名称{ } 4.类型选择符(标签选择符):标签 { } 二.关系选择符 1.子元素选择器:父亲>儿子 2.兄弟选择器::你自己~你的兄弟 3.相邻选择器:E+F 4.包含选择器:E F 三.属性选择符 1.属性 2.写法: (1)当前元素[属性]{ } (2)当前元素[属性="属性值"]{ } 四.伪类选择符 1.定义:它允许给…

CSS基础学习 20.CSS媒体查询

…

CSS基础学习 19.CSS hack

…

CSS基础学习 18.CSS多列

四种常见的浏览器内核:…