前端点滴（CSS3）----倾尽所有
css3选择器
相比于css，css3增设了许多css伪类选择器
具体如下：
| 选择器 | 例子 | 说明 | css |
|---|---|---|---|
| element1~element2 | p~ul | 选择前面有 <p>元素的每个<ul>元素。 | 3 |
| [attribute^=value] | a[src^=“https”] | （条件选择器）选择其 src 属性值以 “https” 开头的每个<a>元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | （条件选择器）选择其 src 属性以 “.pdf” 结尾的所有<a> 元素。 | 3 |
| [attribute*=value] | a[src*=“abc”] | （条件选择器）选择其 src 属性中包含 “abc” 子串的每个<a> 元素。 | 3 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个<p> 元素的每个<p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p>元素的每个<p>元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个<p> 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个<p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个<p>元素的每个 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 3 | |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个<p> 元素。 | 3 |
| :root | :root | 选择文档的根元素。 | 3 |
| :empty | p:empty | 选择没有子元素的每个<p>元素（包括文本节点）。 | 3 |
| :target | #news:target | 选择当前活动的 #news 元素。 | 3 |
| :enabled | input:enabled | 选择每个启用的<input> 元素。 | 3 |
| :disabled | input:disabled | 选择每个禁用的<input> 元素 | 3 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
| :not(selector) | :not( p ) | 选择非<p> 元素的每个元素。 | 3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
css3盒子模型
css除了标准的盒子模型，IE模型外，css3增设了弹性盒子（Flex Box）。
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
例如：
<style type="text/css">
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 3000px;
background: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="left">左栏</div>
<div class="middle">中间</div>
<div class="right">右栏</div>
</div>
</body>
关于弹性布局的一些属性以及说明
| 属性 | 属性值 | 说明 |
|---|---|---|
| display | flex | 弹性布局的重要参数，相当于清浮后的float：left |
| flex-direction | row（默认值）:主轴为水平方向，起点在左端、row-reverse:主轴为水平方向，起点在右端、column:主轴为垂直方向，起点在上沿、column-reverse:主轴为垂直方向，起点在下沿 | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | wrap、no-wrap、wrap-reverse、继承 | 如果一条轴线 排不下，是否换行 |
| flex-flow | flex-direction && flex-wrap | flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap |
| justify-content | flex-start 、flex-end 、center 、space-between、space-around | 定义了项目在主轴上的对齐方式，具体表现如下图 |
| align-items | flex-start 、 flex-end 、 center 、baseline 、 stretch | 定义项目在交叉轴上如何对齐，具体表现如下图 |
| align-content | flex-start 、flex-end 、center 、space-between、space-around | 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，具体表现如下图 |
| ordert | number | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 |
| flex | auto（1 1 auto）和none（0 0 auto） | flex-grow（放大比例），flex-shrink（缩小比例）和flex-basis（分配基础）的简写，默认值为0 1 auto。后面两个属性可选 |
justify-content：
align-items：
align-content：
css3背景和边框
css3背景
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小（相对于父元素的宽度和高度的百分比的大小）。
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
新的背景属性
| 顺序 | 描述 | 例子 | CSS |
|---|---|---|---|
| background-clip | 规定背景的绘制区域。 | background-clip: content-box/padding-box/border-box; | 3 |
| background-origin | 规定背景图片的定位区域。 | background-origin: content-box/padding-box/border-box; | 3 |
| background-size | 规定背景图片的尺寸。 | background-size:100% 100%; | 3 |
CSS3 多重背景(multiple backgrounds)
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
css3边框
CSS3 圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中，很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角：这是圆角边框！
语法：border-radius: 1-4 length|% / 1-4 length|%;
实例：
border-radius: 2em 1em 4em / 0.5em 3em;
/*相当于*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影
语法：box-shadow: h-shadow（水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） spread（阴影的大小） color（阴影的颜色） inset（从外层的阴影（开始时）改变阴影内侧阴影）;
实例：
box-shadow: 10px 10px 5px #888888;
CSS3 边界图片
有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框。
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像
语法：border-image: source（url） slice（向内偏移） width（边界的宽度） outset （边框外部绘制 border-image-area 的量）repeat（是否应重复（repeat）、拉伸（stretch）或铺满（round））|initial|inherit
实例：
在 div 中使用图片创建边框
div{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
css3渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
渐变相关属性：background-image。
线性渐变
语法：/*水平渐变 */background-image: linear-gradient(direction（to bottom、to top、to right、to left、to bottom）, color-stop1, color-stop2, ...);
/*角度渐变 */background-image: linear-gradient(angle（deg）, color-stop1, color-stop2);
注意：线性渐变 - 从上到下（默认情况下），CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
径向渐变
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
具体情况：
- 颜色结点均匀分布（默认情况下），例如：
background-image: radial-gradient(red, yellow, green); - 颜色结点不均匀分布，例如：
background-image: radial-gradient(red 5%, yellow 15%, green 60%); - 形状渐变，例如：
background-image: radial-gradient(circle/ellipse , red, yellow, green);
css3 文本效果/字体
css3 文本效果
CSS3 的文本阴影
CSS3 中，text-shadow属性适用于文本阴影。
语法：text-shadow: h-shadow（水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） spread（阴影的大小） color（阴影的颜色） inset（从外层的阴影（开始时）改变阴影内侧阴影）;
实例：
h1{
text-shadow: 5px 5px 5px #FF0000;
}
彩色字体的实现
<style>
/*由于内核不同 需加前缀谷歌-webkit- (私有化)*/
/**
*原理：
*1.设置文字颜色为透明色 -webkit-text-fill-color:transparent;
*2.设置盒子背景为渐变色 background-image: linear-gradient();
*3.将背景裁切到“文字字符范围” -webkit-background-clip:text;
*/
.color_text{
font-size: 50px;
-webkit-text-fill-color:transparent;
-moz-text-fill-color:transparent;
text-fill-color:transparent;
/*先写私有的再写公有的*/
background: linear-gradient(90deg,red,orange,yellow,green,violet,blue,pink,gray,red) 10px 0 / 100px 100px;
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
}
</style>
<body>
<div class="color_text">
这是彩色字体！This is the colorful text！
</div>
</body>
CSS3 的盒子阴影
阴影的一个使用特例是卡片效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<div class="polaroid">
<img src="..." alt="hello" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
语法：text-overflow: clip（截取）|ellipsis（省略）|string（使用给定的字符串来代表）;
CSS3 单词拆分换行
单词拆分语法：word-break: normal（浏览器默认的换行规则）|break-all（允许在单词内换行）|keep-all（只能在半角空格或连字符处换行）;
单词换行语法：word-wrap: normal（允许的断字点换行）|break-word（在长单词或 URL 地址内部进行换行）;
css3 2D/3D转换（transform）
2D转换
2D变换方法：translate()，rotate()，scale()，skew()，matrix()；
translate()平移
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。translateX()，translateY()的简写
语法：transform: translate(X轴，Y轴);
rotate()旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
语法：transform: rotate(deg);
scale()缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，scaleX()，scaleY()的简写
语法：transform: scale(倍数,倍数);
skew() 倾斜
语法：transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
3D转换
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。（观察距离） | 3 |
| perspective-origin | 规定 3D 元素坐标原点位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) 定义 | 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
css3动画与过度
css3动画
定义动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
例如：
@keyframes donghua
{
from {background: red;}
to {background: yellow;}
}
@keyframes donghua
{
0%{background: red;}
25%{background: yellow;}
50%{background: yellow;}
75%{background: yellow;}
100%{background: yellow;}
}
绑定动画
div{
animation: donghua 5s;
-webkit-animation: donghua 5s; /* Safari 与 Chrome */
}
语法：animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
| 属性、属性值 | 说明 | 属性值 |
|---|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 | name |
| animation-duration | 动画指定需要多少秒或毫秒完成 | ms、s |
| animation-timing-function | 设置动画将如何完成一个周期 | linear（动画从头到尾的速度是相同的）、ease （默认。动画以低速开始，然后加快，在结束前变慢）、ease-in （动画以低速开始）、ease-out （动画以低速结束）、ease-in-out （动画以低速开始和结束） |
| animation-delay | 设置动画在启动前的延迟间隔。 | ms、s |
| animation-iteration-count | 定义动画的播放次数。 | n（一个数字，定义应该播放多少次动画）、infinite（指定动画应该播放无限次（永远）） |
| animation-direction | 指定是否应该轮流反向播放动画。 | normal （默认值。动画按正常播放）、reverse （动画反向播放）、alternate（动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放）、alternate-reverse （动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放） |
css3过渡
语法：transition: property duration timing-function delay;
| 属性 | 描述 | 属性值 | CSS |
|---|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | property duration timing-function delay | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | none、all、 property（自定义transfrom逗号隔开） | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | ms、s | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 同上animation-timing-function | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | ms、s | 3 |
实例：
transition: all 1s linear 2s;
实例二：
html
<div></div>
css
div{
width: 200px;
height: 200px;
background-color: #f00;
transition: all 2s;
}
div:hover{
background-color: #00f;
transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}
css3多列布局
CSS3 多列属性：
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3 创建多列
column-count 属性指定了需要分割的列数。
实例：
html：
<div class="column">
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
css
.column{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。
实例：
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
CSS3 列边框
column-rule-style 属性指定了列与列间的边框样式：
实例
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule:1px solid red;
}
css3指定元素跨越多少列
以下实例指定<h2>元素跨越所有列：
实例：
/*在多列内，用作标题*/
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
指定多列的宽度
column-width 属性指定了列的宽度。
实例：
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px; /*多列的宽度都为100px*/
}
css3用户界面
css3图片
圆角图片
设置border-radius
实例：圆角图片
img {
border-radius: 8px;
}
实例：椭圆形图片
img { /*宽高不同*/
border-radius: 50%;
}
缩略图
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
<body>
<img src="xxx.jpg" alt="xxx" width="400" height="300">
</body>
缩略显示
<style>
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="xxx.jpg">
<img src="xxx.jpg" alt="xxx" width="400" height="300">
</a>
</body>
图片滤镜 filter
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
图片 Modal(模态)、图片模盒
结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
html：
<body>
<img id="myImg" src="xxx.jpg" alt="hello" width="300" height="200">
<!-- 模盒 -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
css：
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* 模盒 (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/* 模盒内容 (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* 模盒标题 */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* 动态 */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* x按钮 */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
js：
<script>
// 获取模态窗口
var modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];
// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>
css3按钮
button默认样式
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
动态按钮
鼠标移动到按钮上后添加箭头标记
html
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
css
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 15px; /*>>的位置*/
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
css3 分页
分页：
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
<body>
<h2>圆角样式</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
面包屑：
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
<body>
<h2>面包屑导航</h2>
<ul class="breadcrumb">
<li><a href="#">首页 </a></li>
<li><a href="#">前端 </a></li>
<li><a href="#">HTML 教程 </a></li>
<li>HTML 段落</li>
</ul>
</body>
css3多媒体查询
多媒体查询语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS 代码...;
}
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
-
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
-
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
-
all: 所有设备，这个应该经常看到。
-
print: 用于打印机
-
screen: 用于电脑屏幕，平板，智能手机等。
-
speech: 用于屏幕阅读器
实例：
@media screen and (min-width: 480px) {
body {
background-color: green;
}
}
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
