Class命名为了语义化中出现多个单词,采用” - “分隔 /* 正确的写法 */ .big-title { font-weight: bold; } 用"-"隔开比使用驼峰是更加清晰。...属性名的 : 后(必须)要有空格 属性名的 : 前(禁止)加空格 一个原因是美观,其次IE 6存在一个bug, 戳bug 5.多选择器规则之间换行 当样式针对多个选择器时每个选择器占一行 /* 推荐的写法...禁止使用css原生import 使用css原生import有很多弊端,比如会增加请求数等.... Don't use @import 9....小图片或者icon使用sprite 合并 推荐文章:NodeJs智能合并CSS精灵图工具iSpriter 11....推荐normalize.css样式重置 github地址 15.禁止使用通配符"*"来选择所有元素 /*别这样写*/ * { margin: 0; padding: 0; } 这样写是没有必要的
最近 YouTube 将其网站上视频的播放格式改为 16:9 宽屏模式播放,原有 4:3 模式的视频依然可以兼容播放。...而默认 YouTube 视频插入代码还是默认 4:3 模式,如果你想在自己的博客上插入的 YouTube 视频也为宽屏模式,可以通过点击嵌入视频右边的自定义按钮(customize icon),然后选择...当然只有宽屏模式的视频才有这个选项。...宽屏模式插入 YouTube 视频 另外在还发现插入的 YouTube 视频中还会显示搜索栏,可以通过 showsearch=0 这个参数把搜索栏给关掉。
宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是父级宽度的50%,根据css规范, padding...那样高度就成了父级高度的50% (不合题意,除非父级宽高相等); 原题目: 红色块级元素垂直居中于屏幕中央; 红色块级元素距离屏幕左右边距各20px; 红色块级元素里面的内容水平垂直居中; 红色块级元素的高度始终是红色块级元素宽度的
方法1 .1在开始运行输入regedit打开注册表 2.定位到HKEY_LOCAL_MACHINE------SYSTEM------ControlSet001...
css的三种写法 一、公用样式使用.css文件引入 二、页面级的样式可以使用 .red{ color:red; } 三、html标签直接使用style 第三种 css的三种写法 .red{ color:red; } ... css的三种写法 第一种 第二种</div
现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleton,今期会跟大家分享在 CSS 上实现这个效果的方法...CSS 的部分 去到 CSS 的部份,先处理好这张卡的样式。...制作骨架屏 回到 HTML 的部份,复制多一张卡片,不过清空里面的图片和文字,以及加入一个名为 loading 的 class,我们会将骨架屏的效果套用到这张卡片上。...动画的部分 现在基本上完成了一个静态的骨架屏了,接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的,所以我会将背景设定为渐层颜色。...我们来看看这个案例的完成效果 这里介绍了用 CSS 编写骨架屏效果的方法,大家在实际应用中,只需要在数据载入的时候,为容器加上 loading 这个 class;而在数据载入完成后,将数据显示到指定位置
我们就可以利用这个特性,实现移动端的宽高等比自适应容器。...HTML代码: CSS...这里看下面代码和效果图理解下: HTML代码: 我是王平安,pingan8787 CSS代码: .box...="text"> CSS
左右定宽,中间自适应 ? 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo 左右定宽,...中间自适应(1) *{margin: 0;padding: 0;} .left{ position: absolute...中间自适应(2) *{margin: 0;padding: 0;} .left{ float: left;...中间自适应(3) *{margin: 0;padding: 0;} .left{ float: left;
今天还是变谈CSS3里的flex怎么处理兼容的 flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题...flex-end | center | baseline | stretch; /*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/} 兼容写法...webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */} 2.子元素的兼容写法...这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下,个别不兼容的移动设置才会识别,哪些是旧的语法,你懂的。...所以上面的兼容写法应该是这样的才对 .box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /*
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo *{margin: 0;padding: 0;} .left{ float: left;...右侧自适应(2) *{margin: 0;padding: 0;} .left{ float: left;...右侧自适应(3) *{margin: 0;padding: 0;} .left{ position: absolute...右侧自适应(5) *{margin: 0;padding: 0;} .left{ float: left;
Sass 和 CSS 写法有差别: Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。...如: Sass写法: body color: #fff background: #f36 而在 CSS 我们是这样书写: body{ color:#fff; background:#f36...; } SCSS 和 CSS 写法无差别: SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。...写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。...在此需要特别注意的是:“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。
myself1"> css
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/ margin-bottom:140px\9; /* IE6...hack写法 书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。 ...的宽度显示有什么不同: 其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。...为了防止撑破层,还需要再给一个样式overflow:hidden;(超出的部分不显示) 第四招:给每一个块对象设置三个样式 width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式...第五招:针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到) 原来建设网站经常使用!important来设置优先权,但有了IE7之后就不行了。
前言 在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向。...》,才开始渐渐地走进 CSS 世界,才明白原来 CSS 的背后也是有一套 “物理” 和 “魔法” 法则。...流 CSS 中,有一个隐形的基本定位和布局机制,那便是 “流”。 在网络上,随便搜索一篇 CSS 教程,基本都会提到 “普通流” 和 “文档流”,还有 “文本流” 这些关键词,有时候经常会弄混淆他们。...但这种宽设定却让流动性消失了,当我们给定元素设定 width: auto,元素的宽就会 “自适应” 地铺满容器,而给定了 width 值会让这种流动性消失。...默认情况下,width 是作用在 content box 上的,box-sizing 的作用就是可以把 width 作用的盒子变成其他几个,因此,理论上,box-sizing 可以有下面这些写法: .box1
动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。...基础结构与样式: 12 1234 .box{width:100px;background-color:#ddd;} 1.宽:高 = 1:1 12345....box:after{content:'';display:block;padding-top:100%;} 2.宽:高 = 1:2 12345 .box:after{content:'';display...:block;padding-top:200%;} 3.宽:高 = 2:1 12345 .box:after{content:'';display:block;padding-top:50%;} 动态修改一下宽度
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code a.tb{text-decoration... a:visited {color: #cccccc;} .huoye a:hover {color: #ff6600;} 第一种写法... 第二种写法 第三种写法
方向:横屏/竖屏 ---- 结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。 ?...landscape portrait:指定输出设备中的页面可见区域高度大于或等于宽度 landscape: 除portrait值情况外,都是landsca 实例: ---- /*竖屏*.../ @media only screen and (orientation:portrait ) { } /*横屏*/ @media only screen and (orientation:landscape...) { body *{ display:none;} body{ background-color:lightblue;} body:after{ content:"为了更好的体验,请使用竖屏游览!!!
做前端有一段时间了,慢慢的也积累了不少经验,现在记录下自己的经验,水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种...
我们就可以利用这个特性,实现移动端的宽高等比自适应容器。
CSS中的常用复合写法 表格常用属性 字体属性的复合写法 背景图片的复合写法 边框的复合写法 内边距(padding)的复合写法 外边距(margin)的复合写法 一、表格常用属性: 属性 含义 cellpadding...背景的复合写法没有顺序的,但是一般习惯性的写成如下的顺序,如果不设置则可以省略。 2. 背景颜色 图片地址 是否平铺 背景图片固定 图片位置。 3. 颜色还可以用rgba()来代替。...四、边框的复合写法 border: 5px solid red; border-top: 5px solid red; 边框的复合写法是没有顺序的,一般习惯性的写法是:边框宽度、边框样式、边框颜色...五、内边距(padding)的复合写法 写法 说明 padding: 1px; 一个参数,说明上下左右都有1像素的内边距 padding: 1px 2px; 两个参数,说明上下内边距是1像素,左右内边距是...margin的复合写法和padding的复合写法的参数含义完全一样。
领取专属 10元无门槛券
手把手带您无忧上云