CSS
关注
分享
扫一扫
houyanhua1
这个作者很懒，什么都没留下…
展开
-
JavaScript CSS3,过渡(transition)(动画)结束事件,(webkitTransitionEnd)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-28 16:23:15 · 4069 阅读 · 0 评论 -
CSS3 伪元素(::before ::after)(用CSS模拟html标签元素)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素:用CSS模拟出html标签的效果 (:b原创 2018-03-21 11:10:34 · 3696 阅读 · 0 评论 -
CSS3 伪类(:target)(配合锚点使用)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { position:fixed;原创 2018-03-21 10:49:28 · 2151 阅读 · 0 评论 -
CSS3 empty伪类(:empty)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 500px; h原创 2018-03-21 10:21:07 · 2959 阅读 · 0 评论 -
CSS3 结构伪类(:first-child)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <style> /* 伪类(原创 2018-03-21 10:01:47 · 483 阅读 · 0 评论 -
CSS3 属性选择器( [] )
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-21 08:53:37 · 305 阅读 · 0 评论 -
CSS 选择器(div+p)(div~p)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div+p { /*div后面紧跟着的第一个p标签(必原创 2018-03-21 08:53:18 · 8639 阅读 · 0 评论 -
CSS3 自定义字体(图标字体) (@font-face)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p {原创 2018-03-24 17:30:09 · 3830 阅读 · 0 评论 -
CSS3 伸缩布局(flex) (可用于屏幕适配)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-24 11:42:16 · 567 阅读 · 0 评论 -
CSS3 动画体验 自动播放动画(animation,@keyframes)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l原创 2018-03-23 11:42:39 · 4267 阅读 · 0 评论 -
CSS 清除浮动的三种方式
1.浮动元素的父级元素如果定义了高度，就不需要清除浮动了。(新闻的内容长短不确定，高度不确定，就需要清除浮动)2.浮动元素要定义宽高，否则会影响后续元素的浮动效果。空div标签清除浮动.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2018-03-11 16:00:16 · 394 阅读 · 0 评论 -
CSS3 3D的正方体效果(transform-style: preserve-3d)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>原创 2018-03-23 11:36:50 · 2332 阅读 · 0 评论 -
CSS3 利用伪元素(::before)获取标签自定义属性(data-XX)的值
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>原创 2018-03-23 09:50:24 · 11933 阅读 · 0 评论 -
CSS3 3D旋转(transform)，平移，放大/缩小，倾斜
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79659096demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...原创 2018-03-22 22:11:16 · 9858 阅读 · 0 评论 -
CSS3 伪元素选择器(::first-letter ::first-line ::selection)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素选择器 */ /* 第一个字母/汉字 *原创 2018-03-21 11:58:41 · 887 阅读 · 0 评论 -
CSS3 颜色透明度(rgba,hsla)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* rgba:支持透明度的颜色(背景色/字体颜原创 2018-03-21 14:50:15 · 1146 阅读 · 0 评论 -
移动web 左边定宽,右边自适应的布局(利用float的特性)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,原创 2018-03-28 09:39:15 · 250 阅读 · 0 评论 -
CSS less学习(动态样式语言)
http://www.bootcss.com/p/lesscss/转载 2018-03-28 11:22:25 · 321 阅读 · 0 评论 -
移动web CSS,媒体查询(通过查询屏幕大小来判断使用哪个CSS样式)(@media screen)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in原创 2018-03-28 10:30:52 · 2089 阅读 · 0 评论 -
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 21:56:21 · 59280 阅读 · 1 评论 -
移动web 移动端常用的CSS设置
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-原创 2018-03-27 15:43:17 · 1394 阅读 · 0 评论 -
CSS3 同时添加多张背景图片 (屏幕适配)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-22 12:16:41 · 9273 阅读 · 0 评论 -
CSS3 背景裁剪(background-clip)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:27:50 · 2246 阅读 · 0 评论 -
CSS3 背景原点(background-origin),背景从什么位置开始显示
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:17:36 · 1497 阅读 · 0 评论 -
CSS3 边框图片(border-image)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 21:16:00 · 828 阅读 · 0 评论 -
CSS3 盒子阴影(box-shadow)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 20:21:37 · 255 阅读 · 0 评论 -
CSS3 圆角边框(border-radius)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 19:49:50 · 497 阅读 · 0 评论 -
CSS3 浏览器私有化前缀
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 1000px;原创 2018-03-21 17:13:29 · 364 阅读 · 0 评论 -
CSS3 盒子模型(box-sizing: border-box(内减模式))
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; h原创 2018-03-21 16:34:10 · 1992 阅读 · 0 评论 -
CSS3 文字阴影(text-shadow),凹凸文字特效
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 16:02:12 · 2095 阅读 · 0 评论 -
HTML5 CSS3,全屏,全屏伪类,JavaScript
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-25 21:36:38 · 1070 阅读 · 0 评论 -
CSS3 旋转(transform)
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79660780demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&a原创 2018-03-22 20:07:28 · 874 阅读 · 0 评论 -
CSS3 属性过渡(transition)(属性渐变动画)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px;原创 2018-03-22 18:53:33 · 17827 阅读 · 0 评论 -
CSS3 用径向渐变(radial-gradient)模拟立体感的球体
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-22 17:47:15 · 2123 阅读 · 0 评论 -
CSS overflow 溢出
new document div{ width:300px; height:200px; border:1px solid green; overflow:hidden;} /* overflow溢出，hidden隐藏，scroll滚动条，auto自动 */ 生活没有彩排，人生也没有彩排。总会有些时候，满心期待换来的是失望，或者是原创 2017-10-30 22:06:18 · 126504 阅读 · 0 评论 -
CSS 经典导航
new document body,ul,li{ margin:0px; padding:0px;border:0px;}body{background:url(bg.jpg) no-repeat top center;} /* 背景图不居中的话，背景会随页面的大小改变 */ul,li{list-style:none;}.nav{ width:980px;原创 2017-10-30 21:43:59 · 369 阅读 · 0 评论 -
CSS 浮动实例。为了兼容，浮动元素放在所在行的最前面
new document .box{ width:500px;margin:0 auto;}.news{ width:500px; border:1px solid green;} .title{ font-size:24px;width:500px;border:1px solid green; height:45px; background:gree原创 2017-10-30 17:11:31 · 505 阅读 · 0 评论 -
CSS 浮动应用实例，列表横向显示(导航)
new document *{margin:0; padding:0;}.nav{ width:100%; height:48px; background:url(index_x.jpg) repeat-x 0 -100px; margin-top:100px;}ul,li{list-style-type:none;}ul{ width:980px;原创 2017-10-30 16:31:44 · 2506 阅读 · 0 评论 -
CSS 背景background，精灵spirit(移动背景图位置来实现)
CSS背景backgroundbackground-color: 背景色,英文单词或十六进制颜色都可以。background-image:url(图片路径)背景图background-repeat:（no-repeat不重复，repeat-x,repeat-y）重复background-position:(left,center top bottom right) 背景图定位。(l原创 2017-10-29 20:58:24 · 4345 阅读 · 0 评论 -
CSS 内边距padding ，外边距margin
CSS内边距属性:padding 填充(用法和border类似)padding:一个参数，指的是四个方向是一样的（上右下左）padding-top,padding-right,padding-bottom,padding-left 可以单独设置padding:两个参数 （上下、左右）如：padding:10px 20px; 指的是上下为10px,左右为20px 注意：原创 2017-10-29 20:48:11 · 452 阅读 · 0 评论