相关内容
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是一种超文本标签语言，又是一种超文本标记语言，是基本功...
