相关内容
css教程之认识css
简单来说css是用来控制和美化html页面的css可以通过三种方法引入1. 通过标签style认识css2. 通过style标签样式 div{ font-size:36px; } .class{ color:red; } class3. 通过link标签 老雷css教程之认识css *注释* div{ font-size:36px; } .a{ color:red; } .a .b{ color:#0f8e82; } 认识cssspan...

CSS3图片模糊切换效果
filter: blur(2px) grayscale(1); opacity: . 7; * fallback *}* demo page only *#about{color: #999;text-align: center; font: 0.9em arial, helvetica; #about a{color: #777; html5-html5_css3教程-基于html5手机app开发技术交流平台源码演示下载请点击阅读原文↓↓↓↓↓...

CSS Modules入门教程
最后,本文代码仓库为:https:github.comrynxiaocss-modules-demo参考链接css modules—solving the challengesof css at scalegithub repowhat are css modules and why do we need them? getting started with css modulesget bemcss modules 用法教程cssmodules使用详解探究 css 解析原理...
css基础教程之其他常用css知识
老雷css基础教程之其他常用css知识一、content 用来和:after及:before伪元素一起使用,在对象前或后显示内容 normal 默认值使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) 插入字符串 .box:after{ content:a, content:url(bg.jpg) }二、outline 设置或检索对象外的线条...
css基础教程之列表和表格
css基础教程之列表和表格一、列表 ul ol list-style list-style:|| || 1.list-style-type 设置或检索对象的列表项所使用的预设标记 disc:实心圆(css1) circle:空心圆(css1) square:实心方块(css1) decimal:阿拉伯数字(css1) lower-latin 小写拉丁字母(css2) upper-latin 大写拉丁字母(css2)circle{list-style...
css基础教程之尺寸与补白
css基础教程之尺寸与补白一、宽度width 宽度min-width 最小宽度max-width最大宽度width: | | auto.w{ width:200px; width:10rem; width:20%; max-width:500px; 二、高度height:| | autoheight 高度min-height 最小高度max-height 最大高度.h{ height:200px; height:20%; 三、外部白margin外部白是对外的,两个盒子...
css教程之文本字体
css教程之文本字体一、字体 1、font-size 字体大小div{font-size:16px;}2、font-weight 字体粗细 normal 正常的字体。 相当于数字值400 bold 粗体。 相当于数字值700。 bolder 定义比继承值更重的值 lighter 定义比继承值更轻的值 :100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900div{ font-weight:600;}3...

CSS Modules 用法教程
它不是将 css 改造成编程语言,而是功能很单纯,只加入了局部作用域和模块依赖,这恰恰是网页组件最急需的功能。 因此,css modules 很容易学,因为它的规则少,同时又非常有用,可以保证某个组件的样式,不会影响到其他组件。? 零、示例库我为这个教程写了一个示例库,包含六个demo。 通过它们,你可以轻松学会css ...

【UI特效】CSS3图片模糊切换效果
今天我们来分享一款利用css3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用css3实现图片模糊效果也非常简单,用css3中的filter属性即可,针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。? css3图片过滤效果body{background: #eee;}.gallery{list-style: ...

01-移动端开发教程-CSS3新特性
这边课程内容包括:css3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2d3d转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案响应式布局开发方案移动端js、触屏事件zepto.jsbootstrapiscroll.jsfastclick.js等移动端库移动端开发调试移动端完整...

05-移动端开发教程-CSS3兼容处理
css3的标准并没有全部定稿,目前css3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀,这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性...

05-移动端开发教程-CSS3兼容处理
css3的标准并没有全部定稿,目前css3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀,这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性...
css基础教程之边框背景
(css3) space 当背景图像不能以整数次平铺时,会用空白间隙填充在图像周围。 (css3) div{ background-repeat: no-repeat; } background-attachment定义滚动时背景图像相对于谁固定。 fixed 背景图像相对于视口(viewport)固定。 scroll 背景图像相对于元素固定,默认 div{ background-attachment: fixed; } ...
css教程之动画与变换
css教程之动画与变换一、变换 transform 1.transform设置或检索对象的转换 none:无转换 rotate():2d旋转 scale():2d缩放 skew() 斜切扭曲,第一个参数对应x轴,第二个参数对应y轴。 如果第二个参数未提供,则默认值为0 2.transform-origin 设置或检索对象以某个原点进行转换。 该属性提供2个参数值想x,y 如果只...

02-移动端开发教程-CSS3新特性(中)
1. 新的背景背景在css3中也得到很大程度的增强, 比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背景图片的尺寸cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。 contain会自动调整缩放比例,保证图片始终完整显示在背景区域。 也可以使用...

03-移动端开发教程-CSS3新特性(下)
css animation就是为了解决这些问题而提出的。. box { * 分别设置多个属性 * transition: height 1s ease, width 2s linear; 1.2 动画animate通过 css3,我们能够创建动画,这可以在许多网页中取代动画图片、flash 动画以及 javascript。 @keyframes 规则用于创建动画。 在 @keyframes 中规定某项 css 样式,就能创建...

03-移动端开发教程-CSS3新特性(下)
css animation就是为了解决这些问题而提出的。. box { * 分别设置多个属性 * transition: height 1s ease, width 2s linear; 1.2 动画animate通过 css3,我们能够创建动画,这可以在许多网页中取代动画图片、flash 动画以及 javascript。 @keyframes 规则用于创建动画。 在 @keyframes 中规定某项 css 样式,就能创建...

02-移动端开发教程-CSS3新特性(中)
1. 新的背景背景在css3中也得到很大程度的增强, 比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背景图片的尺寸cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。 contain会自动调整缩放比例,保证图片始终完整显示在背景区域。 也可以使用...

01-移动端开发教程-CSS3新特性(上)
关于css3的学习2.1 css3学习手册学习css3最好的工具就是文档。 有文档在手,按照文档多练习一些案例,就能掌握。 css算是比较容易学习的前端技术了。 在线文档地址:http:www.phpstudy.netcss3离线文档下载地址:地址戳2.2 css文档的阅读规则规则语法说明!。 2.3 关于浏览器兼容的前缀由于历史原因,浏览器在实现最新...
前端开发基础教程-HTML教程和CSS教程
前端开发基础教程-html教程html是超文本标签语言,又可以说是超文本标记语言,是基本功。 html发展历史跳过。 html结构一般有标签,标签,网页的头部和内容,html的头部页面有标题,关键词,描述说明,不作内容来显示,但影响网页效果。 问:html是什么? html是一种超文本标签语言,又是一种超文本标记语言,是基本功...