css3特效，阴影、渐变、蒙版、倒影
css3特效，阴影、渐变、蒙版、倒影
CSS3属性前缀CSS3的属性为什么要带前缀
因为浏览器厂商很早一直在实施CSS3,在测试阶段,还没真正的标准所以需要加上前缀。
浏览器内核和前缀
内核
浏览器
前缀
Trident
IE
-ms-
Gecko
Firefox
-moz-
WebKit
Safari、Chrome
-webkit-
Presto
Opera
-o-
Blink
Chrome(28及往后版)、Opera(15及往后版本)、Yandex
-webkit-
css3阴影text-shadow 文本阴影
以下这些效果都是通过css3:text-shadow属性设置的。
语法text-shadow: x y blur color;
属性值
描述
x
阴影的左右偏移
y
阴影的上下偏移
blur
阴影的模糊度
color
阴影的颜色
结构12345678<div class='d1'>CSS3 文本阴影</div><div class='d2'&g ...
css3 边框、背景
css3 边框
border-radius边框圆角
border-radius:用于设置边框圆角
分别设置四个角，每个角2个值12345678div{border-top-left-radius:30px 40px;border-top-right-radius:50px;border-bottom-right-radius:20px;border-bottom-left-radius:10px;/*简写*/border-radius: 30px 50px 20px 10px/40px 50px 20px 10px;}
图案例子1234567891011121314151617181920212223242526272829303132div{margin:25px auto 0;width:50px;height:50px;background:#d5d2c1;line-height:50px;text-align:center;font-weight:bold;}.A{border-radius:10px;}.B ...
CSS3选择器
CSS3选择器选择器事例结构
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.wrap{ font-size: 30px;} li{ width: 100px; height: 100px; text-align: center; font-size: 50px; line-height: 100px; color: white; background: black; border-r ...
html5新增的元素、属性
html5新增的元素、属性
html5语义化
html5新增的元素语义化更好，结构更清晰，更利于维护，功能更强大。
主体元素
HTML5中新增了几种结构元素，分别是section、article、aside、nav、time等。
section 元素
section：主要用于网页内容分块，如定义章节、页眉、页脚等。
123456789<section> <h2>标题一</h2> <p>内容一</p></section><section> <h2>标题二</h2> <p>内容二</p></section>...
article 元素
外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
12345678<articl> <h2>标题一</h2> <p>内容一</p></articl>&l ...
css基础布局
css基础布局
HTML页面中布局的方法：
float（浮动布局）
position（定位布局）
弹性布局 (CSS3)。
制作页面最常用的是float布局。
元素浮动的特性：
所有的元素都可以浮动
浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框则停留。
float能解决标签之间有间隙的问题
float 对行内属性标签和块属性标签的影响
float 对行内属性标签的影响
float之后能设置width和height属性，并支持margin和padding属性
float 对块属性标签的影响
在没有设置宽高的情况下浮动后，内容撑开宽度高度
可以使块属性元素并排排列
float属性
float: none;//默认值。对象元素不浮动；
float: left;//左浮动；
float: right;//右浮动；
浮动元素可能引起的问题
父元素的高度无法被撑开，影响与父级元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构
要避免上述问题,我要就需要给元素清除浮动。
清除浮 ...
CSS入门
CSS入门
什么是 CSS
CSS（cascading Style Sheet 的缩写），可译为层叠样式表，用来进行网页风格修饰，控制页面的外观。
WEB 标准构成
HTML:结构，搭建页面的内容结构。
CSS:样式，用来进行网页风格修饰，控制页面的外观。
JS:行为，用来给HTML网页增加动态功能。
CSS 特点
页面内容与表现形式分离
可很好的控制页面的布局
提高网页加载速度
降低服务器的成本
呈现一致的效果
CSS 的引入方式标签内引入
是把样式编写在标签内的style属性中
特点
优先级最高
冗余代码多，代码量大
不易改版与维护
头部style标签引入
是在head标签内加入style标签，在style标签内编写样式。
特点
不需要额外请求，速度快
不易改版与维护
link标签外部引入
在head部分加入link标签，通过外部css文件地址引入
特点
一个CSS文件可控制多个页面
易改版、便于维护
减少代码量、代码简洁规范易于分工协作
有效利用缓存机制
需要额外请求
import样式外部引入
在样式中通过@import “地址” 引入外部CSS文件
特点 ...
盒模型
盒模型
什么是盒模型
盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间。
content - 内容
元素大小一般有内容撑开，也可以通过width/height-宽高样式设置大小
1234width：100px;//宽度height：100px;//高度min-width：100px;//最小宽度 max-width：100px;//最小高度
margin - 外边距
设置元素的外边距，有上、右、下、左四个方位的外边距。
12345678910margin-top:10px;//设置上边距10pxmargin-right:20px;//设置右边距10pxmargin-bottom:10px;//设置底边距10pxmargin-left:20px;//设置左边距10px//简写margin:10px 20px 10px 20px;//如果上下值相等，和左右值相等，还可以简margin:10px 20px;//如果四个边值相等，还可以再简margin:10px;
border - 边框
设置元素的边框线
123456789 ...
HTML基础
html基础什么是HTML
HTML(HyperText Markup Language):超级文本标记语言
HTML是制作网页的一种语言
HTML不是编程语言
HTML文档通过浏览器的解释和编译，并以我们平常所看到的网页形式展示。
HTML基本结构 12345678910 <!DOCTYPE html><!-- 头部声明：用来告诉浏览器用什么标准去解释这个文档 --><html><head><!-- 描述了文档的各种属性和信息 --> <meta charset="UTF-8"><!-- charset：声明文档使用的字符编码，以防乱码 --> <title>Document</title><!-- 文档的标题 --></head><body> <!-- 文档的内容 --></body></html>
HTML基本标签语义化
有利于SEO,让网页更好的被搜索引擎 ...
Hello Word
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
