一，css进阶篇： 等css哪些事儿看了两三遍之后，需要对看过的知识综合应用，这时候需要大量的实践 经验， 简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无 从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信 可以自己先写，写完之后在对比，以其来找寻自己的差距。结构是网站的骨架，如果 写的不合理，将是bug产生的重要根源，所以学习分析大型网站的...
CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进。缩进文本把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行...
这是一款效果非常时尚的Tabs选项卡标签的流线型线条效果。该效果使用纯CSS3来制作，效果类似eclipse软件的标签页效果。该Tabs标签使用流线型设计，并且可以自定义标签的颜色，非常实用和好看。效果演示：http://www.htmleaf.com/Demo/201504041626.html下载地址：http://www.htmleaf.com/css3/daohangcaidan/201504041625.html原文：http://blog.csdn.net/souhugirl/article/details/44887103
letter-spacing是CSS的一个属性，其作用是设置字符之间的距离。letter意为字符。1、normal：规定字符之间没有额外的空间。该值是默认值。如下示例： p{ letter-spacing:normal;}结果： 2、length：定义字符之间的距离，可以为负值。如下示例：当为正值时，如letter-spacing:1em： p{ letter-spacing:1em;//注意：1em=16px}结果：当为负值时，如letter-spacing:-0.5em： p{ ...
接触了B/S的东西之后才发现自己需要学习的东西太多了，html、xml、JavaScript、jquery、HTMLdom、VBScript、ajax、jquery、json等等技术都是需要我们一一研究的！ 刚刚接触了CSS部分的知识，但仅仅是这一小小的技术就让自己瞠目结舌，看似不起眼的东西却实现了自己日常网页操作中非常多的功能——信息的自动检测、友好的弹窗、绚丽的动态效果、体贴的个性化服务，让自己产生了很大的共鸣。总体来说这一块的知识并不是很多，但是要...
http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/在HTML中, 如果过你没有指定一个确定的宽度的话, 块级元素本身就会在垂直方向上延展. 想象一个无序清单. 这个清单会自己扩展来适应它所有的清单元素. 如果用户在他们的浏览器中增加了字体大小, 清单会在垂直方向上延展, 来适应变大的内容. 有时候, 感觉仅仅在垂直方向延展是非常局限的, 如果水平方向也能和垂直方向一样因为用户增加字体大小而自延展那就更好...
例子 1 - 匹配第一个 <p> 元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：<html> <head> <style type="text/css"> p:first-child {color: red;} </style> </head><body> <p>some text</p> <p>some text</p> </body> </html>例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：<html> <head> <style type="text/css"> p > i:first-child {font-wei...
px : Pixel像素单位。像素是相对显示器分辨率而言。em : 相对长度单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。rem : 相对单位，可理解为 "root em" ,相对于根节点html的字体大小来计算，css3新加属性。如果没有重置，html默认font-size:16px。也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，所以rem更适合移动式开发。em ： em是一个相对长度单位，...
css实现运动光环的小Demo 效果图:实现代码:代码分析: Demo用到知识点: 1.CSS的常用选择器,transform属性居中 2.css的动画效果,动画延迟, 3.filer:模糊 HTML结构:<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圆形光环</title><link rel="stylesheet" href="css/style02.css" /></head><body><!-- <div class="aura"></div> --><ul class="aura"><li></li><li></li><li></li></ul><div class="box"></div></body> </h...
1、border 边框可以按顺序设置如下边框属性： 属性值描述border-width 以PX为单位 边框的粗细border-style1、solid 实线2、dashed 虚线3、dotted 点线 边框的样式 border-color可以用英文，如：red也可以在色板里选择边框的颜色 通常采用简写的方式：简写方式：border:solid 1px #FOF;实例： HTML部分：<div id="d1"></div>CSS部分：#d1 {width:100px; /* 宽度 */height:100px; /* 高度 */bo...
最近在网站和博客上能发现使用各种各样很帮效果的动画效果。CodyHouse介绍了这些CSS和Javas cript的编码教程。因为每个文件都可以整套下载，所以马上就可以使用。 固定背景效果 →效果页适用的浏览器：Chrome,Safari,Firefox,Opera,IE9+在Section和div垂直配置的长页面中，把背景固定，像卷帘被提起似的滚动。 产品展示滑块 →效果页适用的浏览器：Chrome,Safari,Firefox,Opera,IE9+把配置卡片状的各个产品，用很棒的动画效果来...
3 D（3.1）rotateY围绕着Y轴进行旋转（1）正数是(站在右边推)，负数是(站在左边推)（2.1）定义元素背过去是否可见backface-visibility: visible|hidden; 说明：visible表示可见，hidden表示不可见测试贝塞尔曲线的网址：http://xuanfengge.com/easeing/ceaser/（1）translateZ就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用小经验：translateZ和rotate...
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>BFC</title>6 <style type="text/css">7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;} 10 </style> 11 </head> 1213 <body> 14 <div class...
搬运自：https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767767.html html:<style> .div1{ width:200px; height:100px; overflow-y:auto;//关键 }</style><div class="div1">内容 内容 内容 内容 内容 内容 内容 </div> 原文：https://www.cnblogs.com/linjiangxian/p/11721510.html
默认情况下，图片是以基线对齐的，也就是下方会留有一条白色的边<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style type="text/css"> div { border: 2px solid #000; } </style></head><body> <div> <img src="images/video.jpg" />yg </div></body></html> 修改方式一：<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style ty...