整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
靠CSS 就写出创意十足的设计是很困难的。到目前为止，就创建视觉特效而言，CSS 这门语言还是存在诸多限制。想用CSS 写出Photoshop 般的效果，还差得很远，个别情况下仍需要各种奇奇怪怪的招术助阵。
以前，要绕过种种限制，不得不牺牲简洁性（加入大量元素，只为了展示效果的细节），或者牺牲性能（为了展现视觉效果，页面中放了太多图片及JavaScript）。
今天，我们就来介绍几种能够通过CSS 实现的特效。其中用到的一些CSS 特性还很新，浏览器支持不充分，但也有非常成熟的。很多特性在SVG 中已经存在很多年了，最近才加入到CSS 中。
这些技术能够提升你的设计，就像做菜添加了调味料，平淡无奇的一盘菜也能顿时浓香四溢。使用它们的时候也得小心谨慎，必须考虑渐进式增强。另外也要知道，其中一些技术会有相关的bug。即使在支持它们的浏览器中，它们也通常还并不成熟。
图1 展示了一个页面（一些天体的介绍），其中包含很多视觉特效。就在几年前，要通过CSS 实现这些效果几乎是不可能的。整个页面布局，就算能做出来，也要借助大量图片和额外的HTML 元素。
今天，这些效果已经能够在很多浏览器中通过CSS 来呈现了，即使做不到也能平稳地退化为可用版本。在一个页面上集成大量视觉特效仍须谨慎，因为可能造成性能开销，代价有大有小。
尽管如此，通过CSS 来完成它们仍然有很多好处，因为可以减少不必要的标记，而且维护起来比较容易。此外，随着浏览器支持相应的规范，性能也会越来越好。
图1 使用了很多视觉特效的页面
接下来，我们就以这个“观星指南”页面作为例子，逐个讲解其中涉及的技术点。
大家可能都知道，网页布局基本上都是由矩形构成的，CSS Shapes 是一个新标准，旨在让Web 设计者能使用各种形状。形状元素不仅会影响界面的外观，还会影响页面的内容流。
细说形状
CSS Shapes 包含两组新属性，一组用于设置影响盒子中内容的形状，另一组用于设置影响形状元素周边内容流的形状。在图2 中，我们看到一个被设置为圆形的形状。其中左边的图形展示了外部形状如何影响周边的内容，而右边的图形展示了圆形中的内容如何受到内部形状的影响。
图2 外部形状与内部形状
这两种形状分别由不同级别的CSS Shapes 规范定义。其中shape-outside 属性（在CSS Shapes Level 1 中定义）是唯一相对比较成熟的。本文不涉及shape-inside，因为目前还没有浏览器实现它，也许在不久的将来会有吧。
shape-outside 属性只能应用给浮动元素。这个属性不改变元素自身的外观，只会通过设置形状影响其外部内容流。
在我们例子中的“Moon”部分，通过设置shape-outside: circle();实现了文本流环绕月亮图片的效果（见图3）。
.fig-moon {
float: right;
max-width: 40%;
shape-outside: circle();
}
图3 文本围绕月亮图片周围的圆形实现了绕排
在解释形状构造原理之前，先了解一下shape-outside 如何影响布局。图片文件本身的背景是黑色的，如果把这一区块的背景改成其他颜色，我们会看得更清楚（见图4）。图片本身还是方形的，但文本流环绕着其中的圆形。在不支持CSS 形状的浏览器中，文本会像往常一样环绕矩形。
注意：如图4 所示，文本流只绕排在浮动元素的左侧。只能让形状的一侧影响文本的行盒子。即使形状右侧有空间，文本也不会填进去。
1. 形状函数
前面例子中的shape-outside 属性使用了一个值：circle()。这是一个形状函数，类似的形状函数还有ellipse()、polygon()、inset()。前两个分别用于定义椭圆形和多边形，inset()则表示嵌入在盒子边界内的矩形，也可以指定圆角，算是CSS 2.1 中clip 属性的加强版，只是语法不同而已。
此处圆形和椭圆形的语法，类似于第5 章的放射性渐变的大小及位置的语法：
.shape-circle {
/* 圆形接受一个半径值和一个位置值 */
shape-outside: circle(150px at 50%);
}
.shape-ellipse {
/* 椭圆形接受两个半径值和一个位置值 */
shape-outside: ellipse(150px 40px at 50% 25%);
}
与渐变函数类似，圆形和椭圆形函数也有合理的默认值。前面月亮图片的circle()函数并未传入参数，而默认的参数是以元素中心为圆心，以最近边为半径。
inset()函数需要传入一组长度值，分别表示到上、右、下、左边的距离，很像margin 和padding 简写。同样，1~3 个值的外边距和内边距简写规则在这里也适用。此外，还可以通过round关键字指定圆角，随后是半径值，与border-radius 属性的类似：
.shape-inset {
/* 距离外部盒子的上、下边各20 像素，
* 距离外部盒子的左、右边各30 像素，
* 还有半径为10 像素的圆角
*/
shape-outside: inset(20px 30px round 10px);
}
相对复杂一些的是polygon()函数。这个函数接受一系列坐标对，用于在盒子表面指定多个点，坐标相对于盒子的左上角，最终把各个点连接起来就是要创建的形状。在“Planets”部分，我们为土星创建了一个多边形。
创建多边形最简单的一种方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且会在检查形状元素时给出预览。这个插件会添加额外的工具，因此既可以通过它看到形状如何影响页面，也可以通过创建并拖动控制点来创建新形状（见图5）。
图5 在Chrome 中通过Shapes Editor 插件绘制的形状
然后就可以把得到的多边形复制粘贴到代码中：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}
多边形中每个点的坐标以百分比表示，这样可以保证最大的灵活度。当然也可以在这里使用任意长度值，比如像素、em，甚至calc()表达式。
2. 形状图片
基于复杂的图片创建多边形会非常麻烦。好在我们可以直接在图片的源文件上基于透明度来创建形状。比如，可以比照预期的形状新创建一张图片。但土星的图片已经是带透明度的PNG格式了，因此可以直接通过它来生成形状。我们要做的就是把shape-outside 的值由polygon()函数修改为指向该图片的url()函数：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
}
如果在Chrome 开发者工具里检查这张图片，会看到如图6 所示的模样。可以看到，图片的透明度数据被用于生成形状了。
图6 图片透明区域的轮廓被用于生成形状
提示：只通过浏览器打开HTML 文件是不行的，就算浏览器支持CSS Shapes 也不行。必须通过Web 服务器取得这个页面，这样引用的图片才会带有合适的HTTP 首部信息，告诉浏览器该图片与CSS 来自同一个域。这种安全机制是较新的浏览器才有的，是为了防止引用的文件对你的计算机造成危害。
默认情况下，形状轮廓会沿图片完全透明区域的边缘生成，但这个值可以通过shape-imagethreshold 属性来修改。默认值是0.0（完全透明），而较大的值（最大为1.0）意味着较高的不透明度也可以用于生成形状边界。比如，修改土星图片的不透明度阈值为0.9，则半透明的土星环将不再被包含在形状内，结果文本会覆盖其上（见图7）。
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-image-threshold: 0.9;
}
图7 使用shape-image-threshold 提高不透明度阈值后，原来图片中半透明的部分在生
3. 形状盒子与边距
除了使用形状函数或图片，还可以使用元素的参照盒子来生成形状。乍一听好像有点不对，毕竟元素盒子都是方形的。不过，形状也能依照圆角生成。
比如，以前面的月亮图片为例，如果我们想改变区块背景的颜色，同时也去掉图片周围的黑色区域（如图11-8 所示），那么可以在图片上使用border-radius 来创建圆形。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
}
图8 给月亮图片应用border-radius
仅有圆角边框还不能生成形状，还得通过shape-outside 属性告诉浏览器，以border-box作为生成形状的依据。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: border-box;
}
这样外部形状就变成了环绕元素边框盒子的圆形。其他能生成形状的参照盒子还有content-box、padding-box 和margin-box。margin-box 是个例外。因为形状是基于浮动区域的，浮动区域也包含外边距，所以这个关键字是专门为形状定义的，并没有box-sizing: margin-box 这种用法。
对于形状而言，参照盒子为margin-box 时，形状仍然会参照圆角边框，但这样一来就可以像定义常规的外边距一样，给月亮图片周围添加一些边距了。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: margin-box;
margin: 2em;
}
这样，文本会环绕着弧形的外边距形状排布。如果在Chrome 开发者工具中检查图片，可以看到此时形状的样子，还有原始的外边距（见图9）。
图9 将margin-box 作为形状的参照后，可以为形状设置外边距
如果想给更复杂的土星图片添加外边距，可以使用另一个属性shape-margin，这个属性用于给整个形状添加外边距，与创建形状的方法无关（见图10）。
.fig-planet {
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-margin: 1em;
}
图10 为土星形状添加shape-margin 属性
CSS 形状虽然可以影响周围文本流，却不允许你修改元素自身的外观。添加圆角边框只是视觉上改变元素形状的一种方式。实际上，通过把元素的部分区域变透明，是可以影响元素自身形状的。
剪切（clipping）使用路径形状定义硬边界，可以基于该边界完全切换元素的可见性。蒙版（masking）不太一样，它用于将元素的某些区域设置为更透明或更不透明。剪切会影响对象的响应区域，而蒙版不会。比如要触发悬停，鼠标必须移到剪切后元素的可见区域。而对于加了蒙版的元素，无论鼠标下面的区域是否可见，只要位于该元素上，都会激活:hover 状态。
一、剪切
剪切最早是在CSS 2.1 中通过clip 属性引入的。但这个属性只能应用给绝对定位的元素，而且只能把这些元素剪切为矩形（使用rect()函数）。没劲！
好在新的clip-path 属性提供了更多选择。它可以使用CSS 形状中的基本形状函数定义如何剪切元素。它还能使用SVG 文档剪切元素，只要通过URL 引用一个<clipPath>元素即可。
下面从使用形状函数定义剪切路径开始。这个特性之前只有Blink 和WebKit 内核的浏览器支持，而且除了不加前缀的属性，还要使用加-webkit-前缀的属性。为简单起见，后面的例子只展示不加前缀的标准属性。
“观星指南”页面中的所有区块都是被剪切过的，因此都有一些向对角线倾斜（见图11）。
图11 页面中的所有区块都被剪切过，因此都有点倾斜
每个区块都有一个stacked 类，其中使用多边形函数指定了剪切路径：
.stacked {
clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}
这个多边形没有前面土星的多边形复杂，因此可以稍微深入地讲解一下。多边形中的每一个点都对应着一对空格分隔的值，值对之间以逗号隔开。
先从左上角开始，0 3vw 表示x 轴剪切长度为0，y 轴剪切长度为3vw。这里使用相对视口的单位保证角度以视口大小为参照。接下来的坐标是右上角坐标100% 0。第三个100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因为这个y 轴坐标是从上方开始计算的。最后，左下角的坐标是0 100%。
因为剪切路径只影响元素渲染后的外观，而不会影响页面流，所以剪切后的元素之间会出现透明间隙（见图11-12）。为消除间隙，可以给每个堆叠的区块应用一个负外边距，而且要比3vm稍大一些，好让相邻的区块边缘能彼此重叠。但我们只希望在支持clip-path 的浏览器中应用这个负外边距，这时候正好可以用上@supports 规则。因为这些新的特效只在较新的浏览器中才存在，所以我们可以放心地这么写：
@supports ((clip-path: polygon(0 0)) or
(-webkit-clip-path: polygon(0 0))) {
.stacked {
margin-bottom: -3.4vw;
}
}
图12 如果只应用剪切，区块之间会出现间隙
在@supports 规则块中，我们测试了浏览器是否支持最小的多边形（只有一个点）。增加这些保障后，区块就可以完美地对齐了。而在不支持clip-path 的浏览器中，区块也会像平常一样上下相接，不会重叠。
使用SVG
可以使用polygon()、circle()、ellipse()和inset() 函数创建剪切路径，与创建CSS形状一样。对于复杂的形状，建议大家还是使用图片编辑器来创建，然后再将最终的图形作为剪切路径的源。我们在页面导航中使用的形状就是这样生成的，如图13 所示。
图13 导航区中复杂的形状是基于SVG 源实现的剪切
使用图形作为剪切源，需要先使用SVG 创建剪切路径，然后再通过一个URL 引用到形状函数中。首先，要在Illustrator、Sketch 或Inkscape 之类的图形编辑器中创建想要的形状。虽然不那么简单，但还是可行的。
导航区块本身是一个包含页内链接的无序列表：
<nav class="stacked section nav-section inverted"> <ul class="wrapper"> <li><a href="#moon">The Moon</a></li> <li><a href="#sun">The Sun</a></li> <li><a href="#planets">Planets</a></li> <li><a href="#milky-way">Galaxy</a></li> <li><a href="#universe">Universe</a></li> </ul> </nav>
在此，我们就不涉及导航本身的样式了，大家只要知道这里用到了Flexbox 水平布局导航项目，将它们固定为100 像素见方的方块就够了。
然后，在支持SVG 的图形编辑器（我们用的是Adobe Illustrator）中创建一张图片。图片的大小也是100 像素见方（见图14）。其中的星球由两个黑色的形状构成，一个圆形和一个旋转后的椭圆形。接着把这个图片保存为SVG 格式，命名为clip.svg。保存过程因编辑器而异，这里
就不说了，我们只关注大体的流程。
图14 使用Illustrator 创建的星球图形
下面在代码编辑器中打开生成的SVG 文件，看上去大概是这样的：
<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45"/> <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50" rx="63.9" ry="12.8"/> </svg>
为了把这个图片转换为剪切路径，需要把其内容包装在一个<clipPath>元素中，并添加一个ID 属性：
<svg xmlns="SVG namespace" width="100px" height="100px" viewBox="0 0 100 100"> <clipPath id="saturnclip"> <circle cx="50" cy="50" r="40.1"/> <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50" cy="50" rx="62.9" ry="12.8"/> </clipPath> </svg>
最后，就可以在CSS 中引用clip.svg 中的这个剪切路径了：
.nav-section [href="#planets"] {
clip-path: url(img/clip.svg#saturnclip);
}
这样就可以把多个剪切源保存在一个SVG 文件中，然后通过URL 的片段ID 分别引用。
二、蒙版
“观星指南”页面的标题好像半隐于地球大气层的后面（见图15）。这种透明渐隐效果是通过蒙版实现的。
图15 页面标题“Stargazing”通过蒙版实现了渐隐效果
Safari 早在2008 年就实现了蒙版，使用的是非标准属性-webkit-mask-image。这个属性允许指定一张图片，并以这张图片作为加蒙版元素透明度层次的来源。作为蒙版的图片中，每个像素都有一个阿尔法级别（alpha level），也就是透明度。如果蒙版图片中的像素是透明的，那么加蒙版元素中对应的像素也不可见。相反，蒙版图片中完全不透明的区域，对应的加蒙版元素的区域也会完全可见。蒙版图片的颜色与此无关，因此灰度图常用作蒙版。
除了图片，还可以使用CSS 渐变来创建蒙版。页面标题的蒙版效果就是这么做的：
.header-title {
mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
rgba(0,0,0,0) 45%,
#000 70%);
mask-size: 100% 200%;
}
相信大家都了解这个语法：mask-image 后面的值非常类似background-image 属性的值，甚至也可以声明多个蒙版。
除了指定蒙版图片，还可以指定蒙版的大小和位置。对于我们这个例子而言，为了把蒙版放到文本底部，我们将它的高度声明为两倍，而没有使用定位。如果我们在这里简单地把渐变图片移动到下面，那么蒙版图片的上半部分就会是透明的，结果就是文本的上半部分不可见。图16展示了渐变蒙版的大小和位置，以及它与文本的相对位置关系。
图16 蒙版图片看起来就像是位于文本上方
在WebKit 最初实现的基础上，蒙版相关的属性得以标准化和扩展，同时也支持了对应的SVG效果。没错，就像clip-path 一样，SVG 中的蒙板也可以应用给HTML 内容。
.header-title {
/*嵌入页面中的CSS，指向嵌入同一页面中的SVG <mask>元素*/
mask: url(#ellipseMask);
}
与前面CSS 渐变等价的SVG 标记如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<radialGradient id="radialfill" r="0.9" cy="1.1">
<stop offset="45%" stop-color="#000"/>
<stop offset="70%" stop-color="#fff"/>
</radialGradient>
</mask>
与剪切路径一样，这里也需要使用objectBoundingBox 坐标系，按照0~1 的比例尺将蒙版缩放到与元素边界匹配。SVG 蒙版元素本身还有一个maskContentUnits 属性，这里也将其设置为与蒙版形状相同的坐标系。
SVG 蒙版源使用明度值（luminance）而非阿尔法级别来应用蒙版。这意味着蒙版较暗的区域对应的加蒙版元素区域会较透明，而蒙版较亮的区域对应的加蒙版元素区域会较不透明。在前面SVG 蒙版的例子中，我们使用了黑白渐变。
浏览器会在你使用蒙版图片时使用阿尔法级别，在你使用SVG 蒙版时使用明度值。在对标准的建议中，有一个mask-type 属性可以切换这个应用蒙版的依据值。
另外，-webkit-前缀版与建议的标准版属性之间也有一些差异。可以参考MDN 中WebKit实现的完整属性和语法。
——
本文很大程度上跳出了沉闷单调的页面盒子世界。我们探讨了如何通过CSS 形状美化页面中的元素，以及如何通过剪切路径画出视觉边界。使用蒙版则可以进一步控制界面中元素的可见性。
通过这些特效的学习，我们也看到了SVG 与CSS 结合的威力，也极大扩展了我们未来设计的想象空间。
——本文节选自《精通CSS：高级Web标准解决方案（第3版）》
CSS畅销经典全面升级
CSS作为Web标准的一部分，是现代网页设计中必不可少的关键元素。鉴于CSS标准化的快速发展，想要成为CSS高手，打造出令人惊艳、辨识度高的网站，就必须充分了解当前CSS规范各模块的新特性、新技术和新思想。
本书是经典CSS参考指南，自第1版出版至今一直畅销不衰。第3版针对当前浏览器支持度足够好的CSS特性全面改写，着眼于如何为更大、更复杂的网站编写优雅、巧妙、易维护的代码。两位作者均是技术与写作才能俱佳的开发高手，他们将自己对现代CSS实践的深刻理解融入书中，结合大量复杂实现情景，清晰展示了如何利用新技术写出高度灵活、易维护和可扩展的代码，并让这些代码在不同浏览器和不同平台上跑起来。
第1章 基础知识
第2章 添加样式
第3章 可见格式化模型
第4章 网页排版
第5章 漂亮的盒子
第6章 内容布局
第7章 页面布局与网格
第8章 响应式Web设计与CSS
第9章 表单与数据表
第10章 变换、过渡与动画
第11章 高级特效
第12章 品控与流程
tml入门基础笔记(简单实用)
一、初识html
1.HTML：Hyper Text Markup Language（超文本标记语言）
java是一门编译性语言
html是一门解释性的标记语言
超文本：文字、图片、音频、视频、动画、超链接
标记：就是指组成HTML的各种标签
2.HTML5的优势：
1、各大浏览器厂商对它的支持
2、市场的需求
3、跨平台
3.W3C标准：
1、结构化标准：指用什么语言去搭建整个网站（html 5）
2、表现化标准：指用什么去装饰整个网站（css3）
3、行为标准：指用什么去实现网站的功能（JavaScript，jQuery）
4.html的基本结构：
<html>
<head>
<title>天猫精选-理想生活上天猫</title>
</head>
<body bgcolor="pink">
大家好！！！！！
</body>
</html>
双标签：有个两个标签成对出现的叫做双标签
表示HTML网页的开始，表示网页的结束
表示网页头部的开始，表示网页头部的结束
表示网页身体的开始，表示网页身体的结束
表示网页标题的结束
标题标签
<h1></h1>....<h6></h6>:会对文字进行加粗，并且改变字体的大小，还会进行换行
段落标签
<p></p>:表示它独占一行，会保留段落之间的间距
加粗
<strong></strong>:表示加粗
斜体
<em></em>:表示斜体
字体设置
<font></font>:表示字体
属性：color颜色
face字体的样式
size字体的大小
单标签：只有一个，开始就结束的叫做单标签
属性：charset = “utf-8”;utf-8表示国际编码格式，所有的字符都能识别
换行标签
<br/>：表示换到下一行
水平线标签
<hr/>:表示水平线
属性：width表示水平线的宽度
size表示水平线的厚度
color表示水平线的颜色
align表示水平线的水平位置，left左边，center中间，right右边
图像标签
<img src="" alt="" title=""/>
src表示的是图片地址
绝对路径：直接写完整图片所在的位置
相对路径：先找到和你的网页所在同一级的图片所在位置，然后再去在这个基础
去找图片的位置，如果图片在下一级那么使用“/”来找到它，如果
上一级使用“..”来找到它
alt表示的是图片加载失败的替代文字
title表示的是鼠标悬浮时图片的提示文字
width表示图片的宽度
height表示图片的高度
特殊标签：
大于符号：>（great than）
小于符号：<（less than）
空格符号：
版权符号：©
注释：
5.超链接标签
<a href="" target=""></a>
1
href表示链接的地址，使用相对路径的方式去使用
target表示连接的方式
_blank表示在新窗口打开
_self表示在本窗口打开
_parent表示在父窗口打开
1、页面间的链接，用于两个页面之间相互的跳转
2、锚链接，用于页面之间定位
①要设置一个锚点，语法锚点
②将点击之后要跳转的超链接设置跳转的锚点位置，语法：
如果不在同一个页面中，先写好要跳转页面所在的位置，然后再写锚点的名字
3、功能性链接 (发邮件、msn、可以打开本地的相应的客户端)
语法：
二、网页媒体元素
1.视频元素<video></video>
属性：src表示添加视频的路径(位置)
controls表示在添加的视频元素上添加播放控件，只有一个属性值
/autoplay表示自动播放（慎用），只有一个属性值
如果属性只有一个值，属性值可以省略不写
source表示引用的视频源路径，一般会引用多个源路径，以避免浏览器不兼容的问 题
2.音频元素<audio></audio>
属性：src表示添加视频的路径（位置）
controls表示在添加的音频元素上添加播放控件，只有一个属性值
/autoplay表示自动播放（慎用），只有一个属性值
source表示引用的音频源路径，一般会引用多个源路径，以避免浏览器不兼容的问 题
3.内嵌框架<iframe></iframe>
属性：src表示添加内嵌内容的路径
name表示这个框架的名字
width表示这个框架的宽度
height表示这个框架的高度
frameborder表示内嵌框架的边框
scrolling表示是否出现滚动条
作用：
1、将多个网页重复的部分抽取出来，通过内嵌框架的方式，放到各个网页中
2、使用<a>标签跳转到指定的框架中，先在指定要跳转到的框架中取一个name，使用target=“name的值”
<a>标签一定要写href属性才能生效，如果不想跳转到任何页面，那么href="#",表示该超链接为空
链接，点击空链接会刷新页面
4.语义化结构标签：主要是为了让结构更加清晰化
<header>表示页面头部内容
<section>表示页面主体内容
<footer>表示页面底部内容
<nav>表示导航栏内容
<aside>表示侧边栏内容
<article>表示页面独立文章内容
三、表单元素
1.表单<form></form>
属性：1、method表示表单的提交方式，有两个值，第一个叫post，第二个叫get
get方式的请求会将表单中所有表单元素信息显示在地址栏中
post方式的请求必须有一个服务器来处理请求，所有表单元素的信息不会显示在地址栏中， 在实际开发中一般使用post方式请求
2、action表单要提交的位置
2.表单元素
语法：
属性： name表示input标签的名字
value表示input标签的值
type表示input标签的元素类型
文本框：专门用来输入文字
语法：<input type="text" name="userName" value="admin"/>，type的值为text
size表示文本框的长度
maxlength表示允许输入的最大字符长度
密码框：用来输入密码
语法：<input type="password" name="userName" value="admin"/>，
type的值为password
size表示文本框的长度
maxlength表示允许输入的最大字符长度
单选按钮
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
1
2
注意：单选按钮的每个input中的name值必须相同，不然不能实现选择一个切换的作用
checked属性表示默认选中
1
2
复选框
<input type="checkbox" name="hobby" value="" />打游戏
<input type="checkbox" name="hobby" value="" checked/>睡觉
<input type="checkbox" name="hobby" value="" />出去约会
1
2
3
复选框可以选择多个，并且可以取消
checked属性表示默认选中
1
2
下拉列表框
<select>表示定义了一个列表框
<option>表示列表项
<select>
<option>--请选择--</option>
<option selected>中国</option>
<option>美国</option>
</select> selected表示默认选中
按钮
1、提交按钮submit，它可以将表单中的信息提交到指定的位置
2、重置按钮reset，它可以将表单中的信息恢复到默认值
3、普通按钮button，它只是单纯起一个按钮的作用，需要和JavaScript和jQuery一起使
用，实现各种功能
4、图片按钮image，src表示图片的路径，也具有提交作用
多行文本域：需要输入多行文字
<textarea>表示定义了一个多行文本域
cols表示文本域的宽度
rows表示文本域的高度
文件域：上传文件
<input type="file" name="files"/>
1
需要设置编码属性enctype="multipart/form-data"，表示将表单数据分为多部分提交
1
邮箱：可以进行邮箱验证
网址：可以进行网址验证
<input type="url" name="url"/>
1
数字：提供输入数字
min表示允许的最小值
max表示允许的最大值
step表示每次增加或者减少的数字间隔
value表示默认值
搜索框：可以搜索提示关键字的文本框
<input type="search" name="search" />
<input type="button" value="百度一下" />
1
2
3.表单的高级应用
1、隐藏域：主要应用于在提交信息时不想让用户看到的信息进行隐藏提交
<input type="hidden" name="hidden" value="666"/>
1
2、只读和禁用属性
只读：表示在网站上用户只能够查看，不能够修改的数据，使用readonly添加只读
禁用：一般表示在满足某个条件之后，才能使用的功能，使用disabled添加禁用
3、表单元素的标注
①选择要点击后跳转文本加上<label>标签
②选择跳转对应的表单元素，给它加上id这个属性（id属性值在整个网页只能出现一
次，不可以有重复的id值）
③在<label>中添加for属性，然后属性值为对应的id值
4.表单的初步验证
为什么要进行表单验证
1、减轻服务器的压力
2、保证数据的可行性和安全性
5.验证的方法
1、placeholder表示这个表单元素期待用户输入什么信息，它是起提示作用，当用户输入
内容时，提示信息隐藏
2、required表示表单元素填写内容不能为空，使用了required的该表单元素必须填写
3、pattern表示表单中的内容必须和输入的正则表达式一致
^表示正则表达式的开始
$表示正则表达式的结束
[]表示在中括号中任选其中一个
\d表示匹配0~9之间的任意一个数
{n}表示前面的一种匹配方式匹配的次数，表示匹配n次
-表示就是-
\w表示匹配所有字母或数字或下划线
\u4E00-\u9FA5匹配汉字
{4,10}表示匹配前面的一种匹配方式4~10次
A-Z表示匹配大写的英文字母
a-z表示匹配小写的英文字母
|表示或者
四、初识CSS3
1.CSS:层叠样式表，它是专门用来设计网页风格的
2.CSS的优点
1、内容与表现分离，便于网页维护
2、网页的表现统一，统一风格
3、丰富的样式，使得页面布局更加灵活
4、减少网页的代码量，增加网页的浏览速度
5、运用独立于页面的CSS，有利于网页被搜索引擎收录
3.CSS样式的语法
选择器{
声明(可以为1~n条)
属性:属性值;
}
选择器：需要添加这些声明的元素（标签）
声明：由属性和属性值组成，中间用“:”,使用“;”结尾
4.在html中添加样式的方式
1、行内样式
在需要添加样式的标签中，添加一个style属性，在style属性中添加声明
2、内部样式
在里面添加一个,然后通过选择器和声明添加样式
3、外部样式
它可以实现表现与内容的彻底分离，可以让样式表重复使用，便于维护和修改，并且
可以极大的减少代码量
①链接外部样式表
语法：
href表示引用的哪一个外部样式表
rel表示使用的是样式表
type表示文本类型为css类型
②导入外部样式表
语法：@import url(“css/第一个外部样式.css”);
区别：链接外部样式表它是先将外部的CSS样式添加到网页中进行加载，再加载网页的
内容，导入外部样式表是先加载网页中的内容，再进行外部样式表的加载
样式表的优先级别
行内样式>内部样式>外部样式，遵循“就近原则”
5.CSS3中的选择器
一、基本选择器
1、标签选择器：以标签名称作为选择器的名称
选择所有网页的该标签元素，比如：p表示选择该网页中所有的p标签
2、类选择器：以类的名称作为选择器的名称，并且在选择器的名称前加上“.”，类
名能够重复使用
3、id选择器：以id的名称作为选择器的名称，并且在选择器的名称前加上“#”，id
名在该网页只能出现一次，具有唯一性
选择器的优先级
id选择器>类选择器>标签选择器
二、层次选择器
1、后代选择器
语法：E F{声明}，E表示的是被匹配的元素，F表示被匹配的E的后代元素
比如：body p{},表示匹配所有body的后代p元素
2、子选择器
语法：E>F{声明}，E表示的是被匹配的元素，F表示被匹配的E的子元素
比如：body>p{},表示匹配所有body的子元素中的p元素
3、相邻兄弟选择器
语法：E+F{声明}，E表示的是被匹配的元素，F表示被匹配的E的相邻兄弟元素
比如：.p1+p{},表示匹配.p1的相邻元素并且为p元素，只匹配后面的元素
4、通用兄弟选择器
语法：E~F{声明}，E表示的是被匹配的元素，F表示被匹配的E的所有兄弟元素
比如：.p1~p{},表示匹配.p1的所有兄弟元素并且为p元素，只匹配后面的
元素
三、结构伪类选择器
1、语法：E>F:first-child，E表示的是被匹配的元素，F表示被匹配的F:first-
child表示被匹配的E的子元素中第一个元素并且这个元素是F元素
2、语法：E>F:last-child，E表示的是被匹配的元素，F表示被匹配的F:last-
child表示被匹配的E的子元素中最后一个元素并且这个元素是F元素
3、语法：E>F:nth-child(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-
child(n)表示被匹配的E的子元素中最后一个元素并且这个元素是F元素
even表示匹配所有偶数行
odd表示匹配所有奇数行
4、语法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-
of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n个
E>F:nth-child(n)表示先匹配所有的儿子，再去找第几个儿子是不是F元素，如果是
就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第几个元素
四、属性选择器
1、E[attr],E表示匹配的E元素，attr表示属性，匹配具有attr属性的E元素
2、E[attr=val],匹配具有attr属性，并且属性值为val的E元素
3、E[attr^=val],匹配具有attr属性，并且属性值以val开头的E元素
4、E[attr$=val],匹配具有attr属性，并且属性值以val结尾的E元素
5、E[attr*=val],匹配具有attr属性，并且属性值中包含val的E元素
六、CSS3美化网页元素
前言：<span>这个标签没有任何实际意义，它只是为了突出显示某个部分，它是一个行内元素，不能够独
占一行，并且该元素所占的区域是根据内容大小决定，不会因为改变宽度和高度改变它的大小
<div>这个标签没有任何实际意义,它只是为了将某些部分装起来，它是一个块元素，会独占一行，
并且该元素所占的区域是根据它的宽度和高度决定，会因为改变宽度和高度改变它的大小
1.字体样式：
1、font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体
可以写多个字体格式，使用“，”隔开，如果同时存在英文和中文字体，英文就显示
英文字体，中文就显示中文字体，并且英文字体要放在中文字体前面
2、font-size字体大小，就是改变字体大小，字体大小的单位使用px
3、font-style
字体风格，normal正常的（默认）、italic（倾斜的）、oblique（倾斜的）
4、font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）
font字体属性，需要满足字体属性设置顺序，风格=》粗细=》大小=》类型
2.文本样式：
1、color
文本颜色
①使用英文单词去表示颜色
②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位
③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明
2、text-align
水平对齐方式，设置文本的水平对齐方式
属性值：center居中，left居左，right居右
3、vertical-align垂直对齐方式，设置文本的水平对齐方式
属性值：middle居中，top居上，bottom居下
4、text-indent设置文本首行缩进，属性值一般使用em相对单位，em表示长度为文本字符
大小的长度
5、line-height设置文本行高，属性值使用px为单位，还可以设置为倍数
6、text-decoration
文本装饰
属性值：①none表示没有任何装饰
②underline表示下划线
③overline表示上划线
④line-through表示删除线
7、text-shadow文本阴影
语法：text-shadow : color x-offset y-offset blur-radius; color阴影颜色
x-offset表示X轴偏移量，正数往右偏移，负数往左偏移
y-offset表示Y轴偏移量，正数往下偏移，负数往上偏移 blur-radius表示模糊半径
2.超链接伪类
1、a:link单击访问前的超链接样式
2、a:visited单击访问后的超链接样式
3、a:hover鼠标悬浮的超链接样式
4、a:active鼠标单击未释放的超链接样式
列表样式
1、list-style-type表示设置列表的标记类型
常用类型：none表示没有标记
disc表示实心圆点
square表示实心正方形
circle表示空心圆点
decimal表示数字
2、list-style-image使用图像代替标记
3、list-style-position表示在哪个位置使用标记
4、list-style设置列表属性，通常使用这个属性
3.背景样式
1、背景颜色background-color
①使用英文单词去表示颜色
②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位
③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明
有一个特殊值，transparent表示透明的意思，它是默认值
2、背景图片background-image
url表示的图片路径
3、背景重复方式background-repeat
repeat表示沿水平方向和垂直方向进行重复
no-repeat表示不重复
repeat-x表示沿水平方向重复
repeat-y表示沿垂直方向重复
4、背景位移background-position：X轴方向偏移量 Y轴方向偏移量
①可以使用像素值来表示偏移量，比如：50px 50px;
②可以使用百分比来表示偏移量，比如：20% 50%;
③可以使用英文字母来表示偏移量，比如：center middle;
5、背景属性设置所有的背景样式
6、背景尺寸background-size
①auto表示背景图片保持原样，默认值
②percentage表示背景图片大小根据容器大小的百分比决定大小，只写一个值表示只
对一个值进行设置，另外一个值会根据图片本身的比例等比例缩放
本身比例为4:3
400px 300px
800px 600px
1200px 900px
③直接使用像素值px来设置图片大小，只设置一个值和百分比一样
④cover放大充满整个容器
⑤contain放大充满整个容器，如果有一个方向充满了整个容器，那么不在放大
4.渐变
1、线性渐变
：颜色沿着一条直线过渡
linear-gradient(渐变方向,颜色1，颜色2，颜色n)
不加前缀方向使用“to 方向”表示往哪个方向进行渐变，加上前缀之后使用“方向”
表示从哪个方向开始渐变
2、径向渐变：从一个起点朝所有方向混合
-radial-gradient(渐变方向,颜色1，颜色2，颜色n)
5.浏览器前缀：(避免兼容问题)
IE浏览器前缀-ms-
Chrome浏览器前缀-webkit-
Safiri浏览器前缀-webkit-
Opera浏览器前缀-o-
Firefox浏览器前缀-moz-
七、盒子模型
1.盒子模型：就是一个虚拟的矩形容器
2.盒子模型的组成：
1、content（内容）：表示主要内容
2、padding（内边距）：表示内容与边框之间的距离
3、border（边框）：表示包着内容的外框，边框是有一定宽度的
4、margin（外边距）：表示边框外部与其他盒子的距离
3.边框border
1、border-color边框颜色
①使用英文字母来表示颜色
②使用十六进制来表示颜色
③使用三原色来表示颜色，rgb(),rgba()
所有的块元素都是一个盒子模型
border-top-color上边框，border-bottom-color下边框
border-left-color左边框，border-right-color右边框
※※※※※※※
可以使用border-color去设置，可以取1~4个值任意一个
如果设置一个值表示对应所有的方向
如果设置两个值，第一个值表示上边框和它对应边框的值，第二个值表示右边框和它
对应的值
如果设置三个值，第一个值表示上边框，第二个值表示右边框和它对应的值，第三个
表示下边框的值
如果设置四个值，第一个值表示上边框，第二个值表示右边框，第三个值表示下边框，
第四个值表示左边框，按照顺时针的顺序依次设置
2、border-width边框的粗细
使用像素值去设置边框的粗细，网页一般使用这种方式
设置边框颜色的方式一样
3、border-style边框的样式
none表示没有边框
solid表示实线边框
dashed表示虚线边框
dotted表示点线边框
设置边框样式的方式和置边框颜色的方式一样
border边框属性
可以设置边框的所有属性，不需要按照顺序
border-left设置左边框的属性
border-right设置右边框的属性
border-bottom设置下边框的属性
border-top设置上边框的属性
外边距margin
margin-top设置上外边距的距离
margin-right设置右外边距的距离
margin-bottom设置下外边距的距离
margin-left设置左外边距的距离
可以使用margin去设置，可以取1~4个值任意一个
和设置边框颜色的方式一样
使用margin设置盒子居中，语法：margin：0px auto;需要满足两个条件
①必须为块元素
②必须设置盒子的宽度和高度
内边距padding
padding-top设置上内边距的距离
padding-right设置右内边距的距离
padding-bottom设置下内边距的距离
padding-left设置左内边距的距离
可以使用padding去设置，可以取1~4个值任意一个
和设置边框颜色的方式一样
4.盒子模型的尺寸
盒子模型的尺存分为盒子模型的宽度和高度
盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度
盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度
盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度
盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度
5.拯救布局
使用box-sizing拯救布局，有3个值
1、content-box：默认值，表示设置的宽度和高度等于内容的宽度和高度，盒子的宽度和
高度通过计算获得
2、border-box：表示设置的宽度和高度等于盒子的宽度和高度
3、inherit：继承父元素的盒子模型模式
6.圆角边框border-radius：为矩形边框设置圆角效果
语法：border-radius:可以设置1~4个值;
设置一个值会对四个角进行设置
设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值
设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值
设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角
设置圆形
①必须盒子的宽度和高度相同
②圆角边框的值必须将四个角的值都设置为宽度的一半或者50%
设置上半圆：宽度不变，高度变为一半，第一个值、第二值为一半，第三和第四个为0
设置下半圆：宽度不变，高度变为一半，第一个值、第二值为0，第三和第四个为一半
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为一半，第二和第三个为0
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为0，第二和第三个为一半
扇形：高度和宽度都为一半，需要哪一个方向的就添加哪个角的值，其他都为0
7.盒子阴影box-shadow
语法：box-shadow:inset x-offset y-offset blur-radius color;
第一个参数表示阴影的类型，不写为外阴影，inset表示为内阴影
第二个参数表示阴影的水平偏移量，正数往右，负数往左
第三个参数表示阴影的垂直偏移量，正数往下，负数往上
第四个参数为模糊半径，模糊范围大小，越往外越模糊
第五个参数为阴影颜色
八、块元素与行内（内联）元素
1.块元素与行内（内联）元素的特性
1、块元素：独占一行，并且可以设置元素的宽高(div,h1-h6,p,列表)
2、行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。
2.display:显示（元素以哪种形式进行显示）
1、block：块级元素的默认值，在元素前后会有换行
2、inline:行内元素的默认值，元素前后没有换行
3、inline-block:行内块元素，元素既有行内元素的特性(可以和其他元素显示在同一行)又有块级元素的特性（可以设置宽高）。
4、none:该元素不被显示。
3.float:浮动:使得块级元素排列在同一行
1、left:左浮动
2、right：右浮动
3、none:元素不浮动，按照标准文档流显示
4.clear：清除浮动
1、left：清除元素左边的浮动
2、right:清除元素右边的浮动
3、both：清除两侧
4、none:默认值，不清除浮动
5.解决父级边框塌陷的方法
1、在浮动元素的后面加空div，并且给这个空div设置样式：clear：both
2、给父级设置高度height
3、给父级添加属性overflow:auto;
4、给父级添加伪类after
#father:after{
content:’’;
display:block;
clear:both
}
6.overflow:属性用来处理溢出
1、visible:可见的，内容元素会被显示出来，但是在父级边框的外面
2、hidden:内容元素会被显示在边框里，但是超出的部分会被隐藏
3、scroll:内容元素会被隐藏，但是浏览器会提供滚动条，滚动以显示超出的内容
4、auto:当内容元素超出父级的高度时就提供滚动条以显示超出的内容，若内容未超出就不显示滚动条。
九、定位与动画
1.定位属性:position
1、static:默认值，没有定位
2、relative：相对定位，相对于元素原本的位置进行偏移，元素原来的位置会被保留，浮动元素设置相对定位后，是相对元素浮动以后的位置进行偏移。
3、absolute:绝对定位，相对于离元素最近的已经设置定位属性的祖先元素为基准进行偏移，元素原来的位置不会被保留，如果没有已经定位的祖先元素，则以浏览器窗口为基准进行偏移。
4、fixed：固定定位，以浏览器窗口为基准进行偏移。
5、定位的元素的层级会比未定位的元素的级别更高，相对定位通常用于给父元素设置定位属性，但是不设置不偏移量，结合绝对定位使用，固定定位用于广告栏，返回顶部的图标，楼层导航等。
6、z-index：改变定位元素的堆叠顺序，值为整数，值越大，级别越高，显示在最上面。
2.动画
1、变形
语法:transform:变形函数;
2、平移函数：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，单位为px；
3、缩放函数：scale(x,y);x代表元素宽度的缩放量，y代表高度的缩放量。
4、倾斜函数：skew(x,y);x代表元素水平方向的倾斜度数，y代表垂直方向的倾斜度数，单位是deg。
5、旋转函数：rotate(x);x代表旋转的度数，为正数时顺时针旋转，为负数时逆时针旋转。
2、过渡transition：是一种动画转换过程，渐慢，渐快等。
语法：transition:过渡样式的属性 过渡花费的时间 过渡函数(过渡的速度) 过渡的延迟时间；
1)使用步骤
A、在元素默认样式中声明元素默认的样式
B、声明元素最终呈现的样式，如悬浮(hover)，获取焦点(focus)时的样式
C、在元素默认的样式中添加过渡属性。
3、过渡函数：
1、ease：默认值，由快到慢
2、linear:匀速
3、ease-in:越来越快
4、ease-out:越来越慢
5、ease-in-out:先越来越快再越来越慢
3.动画animation
1、创建关键帧(浏览器兼容前缀是加在@与keyframes中间的)
语法：@keyframes 动画名称{
0%{元素样式}
25%{元素样式}
…
}
4.调用动画
在元素样式中调用
语法：animation:动画名称 动画次数 动画播放的方向 动画播放状态
1)、动画播放次数：为整数，默认值为1，无限循环infinite
2)动画发生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）
3)动画播放状态：running(播放) paused(暂停)
4)动画播放方向：normal（向前） alternate(偶数次向前)
者：Jiawei Pan
转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw
*请认真填写需求信息，我们会在24小时内与您取得联系。
