├── 3D旋转.html ├── CSS3版无缝滚动.html ├── README.md ├── canvas绘制基本图形.html ├── images ├── 38 │ ├── pointer.png │ ├── turntable-bg.jpg │ └── turntable.png ├── 39 │ ├── bg.png │ └── fan.jpg ├── 42 │ ├── backface.jpg │ └── foreface.jpg ├── 43 │ ├── baby.png │ └── xiaoming.png ├── 46 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg ├── 52 │ ├── ball.png │ └── fengche.png ├── 53 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── 69 │ ├── pad.jpg │ ├── pc.jpg │ ├── phone.jpg │ └── phone_landscape.jpg ├── 01.jpg ├── 02.jpg ├── 02 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg ├── 04.png ├── 06 │ ├── bg.jpg │ ├── h5.png │ ├── hover.jpg │ └── sun.png ├── 31.jpg ├── 34.jpg ├── 36.jpg ├── 40.jpg ├── 45.jpg ├── 51.jpg ├── ab.png ├── arc.gif ├── baoya.jpg ├── bg1.png ├── eight.jpg ├── path.gif ├── tainiu.jpg ├── w3c.gif ├── whatwg.gif └── xiaoming.jpg ├── selector作业.html ├── svg画基本图形.html ├── svg画天气趋势图.html ├── svg画笑脸.html ├── 二维变形基础.html ├── 伪类制作小图标.html ├── 伪类选择器1.html ├── 伪类选择器2.html ├── 伪类选择器3.html ├── 位移综合应用.html ├── 作业百度钱包.html ├── 关系选择器.html ├── 动画导航.html ├── 变形中心点控制.html ├── 变形过渡动画.html ├── 变形过渡动画2.html ├── 响应式网站 ├── css │ ├── pad.css │ ├── phone.css │ └── style.css ├── images │ ├── _c16.jpg │ ├── _r1_c1.jpg │ ├── _r1_c2.jpg │ ├── _r2_c2.jpg │ ├── arr.jpg │ ├── banner.jpg │ ├── bg2.jpg │ ├── center.jpg │ ├── dot.jpg │ ├── img │ │ ├── index_r1_c1.jpg │ │ ├── index_r1_c10.jpg │ │ ├── index_r1_c6.jpg │ │ └── index_r1_c8.jpg │ ├── index_r10_c15.jpg │ ├── index_r12_c4.jpg │ ├── index_r14_c6.jpg │ ├── index_r17_c2.jpg │ ├── index_r2_c121212.jpg │ ├── index_r2_c2.jpg │ ├── index_r2_c2111.jpg │ ├── index_r9_c2.jpg │ ├── index_r9_c3.jpg │ ├── jingling1.jpg │ ├── libg.jpg │ ├── line.jpg │ ├── line02.jpg │ ├── list_r2_c2.jpg │ ├── list_r6_c3.jpg │ ├── list_r6_c4.jpg │ ├── list_r6_c8.jpg │ ├── logo.jpg │ ├── r6_c2.jpg │ ├── r6_c8.jpg │ └── sub_logo.jpg └── index.html ├── 圆角画基本图形.html ├── 多背景.html ├── 媒体查询 ├── index.html ├── pad.css ├── pc.css └── phone.css ├── 属性选择器.html ├── 径向渐变.html ├── 抽奖转盘.html ├── 构建立方体.html ├── 正反面切换.html ├── 翻书效果.html ├── 背景尺寸.html ├── 背景渐变.html ├── 背面不可见.html ├── 自发光.html ├── 自定义动画.html ├── 自定义动画练习.html ├── 过渡动画基础.html ├── 透明应用的三种方法.html ├── 透视点控制.html └── 首字下沉.html /3D旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3d旋转 6 | 33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /CSS3版无缝滚动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3版无缝滚动 6 | 50 | 51 | 52 |
53 | 61 |
62 | 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS3笔记 2 | css3的新特性：选择器、盒模型、圆角、盒子阴影，重要的三大模块：变形、过渡、动画 3 | 4 | ## 选择器 5 | 6 | ### 属性选择器 7 | 属性选择器的兼容是从IE7开始兼容，所以目前大部分都可以使用 8 | - el[attr] 选择具有attr属性的元素 9 | - el[attr="value"] 选择attr属性的值为value的元素，两个条件都满足：attr、value 10 | - el[attr*="value"] 选择attr属性值中包含value的元素 11 | - el[attr^="value"] 选择attr属性值以value开头的元素 12 | - el[attr$="value"] 选择attr属性值以value结尾的元素 13 | - el[attr~="value"] 选择attr属性值为value或者value是一个单独独立的部分(如:以空格分隔的) 14 | - el[attr|="value"] 选择attr属性值为value或者是以value-开头的元素 15 | 16 | 属性选择器中的属性是可以一次性写多个，即满足多个属性:el[attr1][attr2] 17 | 18 | ### 关系选择器 19 | 通过元素之间的关系来进行选择 20 | - el1 el2 后代选择器，所有浏览器都兼容 21 | - el1>el2 元素1的儿子或者女儿，IE7开始兼容 22 | - el1+el2 元素1后面紧挨着元素2，兼容同上 23 | - el1~el2 元素1后面的所有直接子元素，兼容同上 24 | 25 | ### 伪类选择器 26 | - :root 选择文档根标签(同html标签选择器) 27 | - el:nth-child(n) 选择元素是其父元素的第n个孩子，IE9开始支持 28 | - el:first-child 选择元素是其父元素的第一个子元素，IE7开始支持 29 | - el:last-child 选择元素是其父元素的最后一个子元素，IE9开始支持 30 | - el:nth-last-child(n) 选择元素是其父元素倒数第n个子元素 31 | - el:only-child 选择元素是其父元素的独生子女元素，即只有一个孩子 32 | - el:nth-child(2n) el:nth-child(even) 选择元素是其父元素中排行为偶数的的孩子 33 | - el:nth-child(2n+1) el:nth-child(odd) 选择元素是其父元素中排行为奇数的的孩子 34 | - el:nth-child(-n+3) 选择元素是在其父元素中排行前三的子元素 35 | 36 | - el:nth-of-type(n) 选择元素在其父元素中的同类孩子中的第n个孩子 37 | - el:first-of-type 选择元素在其父元素中的同类孩子中排行第一的孩子 38 | - el:nth-last-of-type(n) 选择元素为其父元素中的同类孩子中倒数第n个孩子 39 | - el:only-of-type 选择元素为其父元素中的同类孩子中唯一一个孩子 40 | - el:nth-of-type(2n) el:nth-of-type(even) 选择元素为其父元素中的同类孩子中为偶数的孩子 41 | - el:nth-of-type(2n+1) el:nth-of-type(odd) 选择元素为其父元素中的同类孩子中为奇数的孩子 42 | - el:nth-of-type(-n+2) 选择元素为其父元素中的同类孩子中排行前二的孩子 43 | 44 | - :hover 鼠标悬停，IE6只支持a元素，从IE7开始所有元素都支持hover 45 | - :active 激活状态时，IE6和7中只支持a，IE8开始所有元素支持 46 | - el:focus 元素获取焦点时，IE8开始兼容 47 | - el:checked 表单元素被选中时 48 | - el:disabled 表单元素禁用时 49 | - el:enabled 表单元素可用时 50 | - :lang(zh) 当处于某种语言时，IE8开始支持 51 | - :empty 选中没有子元素的元素 52 | - :not(css选择器) 取反 53 | - :target 锚记处于当前状态时 54 | 55 | 以上选择器中如果没有标注则从IE9开始支持。 56 | 57 | ### 伪元素选择器 58 | - el:before el::before 在元素的所有子元素前，一个冒号的写法从IE8开始支持，两个从IE9开始支持 59 | - el:after el::after 在元素的所有子元素后，同上 60 | - el:first-letter el::first-letter 元素的第一个字符，一个冒号的写法从IE6开始支持，两个从IE9开始支持 61 | - el:first-line el::first-line 元素的第一行，同上 62 | - ::selection 元素被选中时，IE9开始支持，设置个别的元素需要直接作用于元素身上，如果所有元素都要则设置为全局的即::selection 63 | 64 | ## 新属性 65 | 66 | ### 颜色 67 | - rgba() a表示不透明度，1表示完全不透明，0表示完全透明 68 | - hsl() h色相 s饱和度 l亮度 69 | - hsla() h色相 s饱和度 l亮度 a不透明度 70 | 71 | ### 圆角 72 | 标准表示法：border-radius:px | %，通常为了兼容都需要加上兼容前缀 73 | - 设置一个值 表示四个角圆角相同 74 | - 设置两个值 第一个值表示左上和右下角，第二个值表示右上和左下角 75 | - 设置三个值 第一个值为左上角，第二个值为右上和左下，第三个值为右下 76 | - 设置四个值 从左上角开始，顺时针依次设置 77 | 78 | 也可以单独给每个角设置： 79 | - border-top-left-radius 左上角 80 | - border-top-right-radius 右上角 81 | - border-bottom-left-radius 左下角 82 | - border-bottom-right-radius 右下角 83 | 84 | 如果是一个正方形，其圆角值大于或者等于宽高一半时变成一个正圆 85 | 如果是一个长方形，其圆角值大于或者等于宽高一半时变成一个胶囊圆角 86 | 如果设置百分比，横向为盒子宽度的百分比，纵向为盒子高度的百分比，如果是长方形其值大于或者等于50%变成一个椭圆 87 | 88 | ### 阴影 89 | 90 | #### 盒子阴影 91 | box-shadow：右 下 羽化值(模糊程度) 延展度 阴影颜色 inset(内阴影) 92 | - 阴影默认字体的颜色 93 | - 阴影不占空间 94 | - 一个盒子可以有多个阴影 95 | - 盒子阴影从IE9开始支持 96 | 97 | #### 文字阴影 98 | text-shadow:右 下 羽化值(模糊程度) 阴影颜色 99 | - 文字阴影没有延展度和内外阴影，其他和盒子阴影一样 100 | - 文字阴影从IE10开始支持 101 | 102 | ### 背景 103 | - background-color 背景色 104 | - background-image 背景图 105 | - background-repeat 背景图平铺 106 | - background-position 背景图定位 107 | - background-attachment 设置背景图是否随滚动条滚动而滚动，默认值scroll，fixed表示固定 108 | - background-origin 背景起源，padding-box背景定位相对于内边距盒子，border-box相对于边框盒子定位，content-box相对于内容盒子定位 109 | - background-clip 背景裁剪，padding-box背景按照内边距盒子裁剪，border-box按照边框盒子裁剪，content-box按照内容盒子裁剪，通常和background-origin搭配使用 110 | - background-size:px | % | cover | contain 背景大小,默认以原始大小呈现，取值设置为px则按照设置来呈现；设置百分比则宽度为盒子宽度的百分比，高为盒子高度的百分比；设置为百分比和auto则为百分比按照设置方向的百分比，auto方向则为自动等比缩放；设置为cover则为缩放背景图刚好覆盖盒子；设置为contain保证显示一张完整图片的情况下缩放盒子到等宽或等高 111 | 112 | #### 背景渐变 113 | - background-image:linear-gradient(开始和结束位置方位名称或者度数(deg)，颜色值1，颜色值2....) 线性渐变 114 | ps:对于线性渐变如果写方位名称w3c标准和WHATWG的写法不一样，w3c是在方位名称前加to 结束方位名称，WHATWG则是起始方位名称，如果写数值也不一样，两者坐标系不同，所以起始度数要不相同，如下图： 115 | 116 | 117 | 118 | 例子： 119 | ~~~ 120 | div:first-child{ 121 | background-image:-webkit-linear-gradient(left,red,blue); 122 | background-image:-moz-linear-gradient(left,red,blue); 123 | background-image:-ms-linear-gradient(left,red,blue); 124 | background-image:-o-linear-gradient(left,red,blue); 125 | background-image:linear-gradient(to right,red,blue); 126 | } 127 | div:nth-child(3){ 128 | background-image:-webkit-linear-gradient(left top,red,blue); 129 | background-image:-moz-linear-gradient(left top,red,blue); 130 | background-image:-ms-linear-gradient(left top,red,blue); 131 | background-image:-o-linear-gradient(left top,red,blue); 132 | background-image:linear-gradient(to right bottom,red,blue); 133 | } 134 | div:nth-child(5){ 135 | background-image:-webkit-linear-gradient(top,red,blue,orange,green); 136 | background-image:-moz-linear-gradient(top,red,blue,orange,green); 137 | background-image:-ms-linear-gradient(top,red,blue,orange,green); 138 | background-image:-o-linear-gradient(top,red,blue,orange,green); 139 | background-image:linear-gradient(to bottom,red,blue,orange,green); 140 | } 141 | div:nth-child(6){ 142 | background-image:-webkit-linear-gradient(top,red,blue 20%,orange,green 240px); 143 | background-image:-moz-linear-gradient(top,red,blue 20%,orange,green 240px); 144 | background-image:-ms-linear-gradient(top,red,blue 20%,orange,green 240px); 145 | background-image:-o-linear-gradient(top,red,blue 20%,orange,green 240px); 146 | background-image:linear-gradient(to bottom,top,red,blue 20%,orange,green 240px); 147 | } 148 | div:nth-child(7){ 149 | background-image:-webkit-linear-gradient(163deg, red, blue); 150 | background-image:-moz-linear-gradient(163deg, red, blue); 151 | background-image:-ms-linear-gradient(163deg, red, blue); 152 | background-image:-o-linear-gradient(163deg, red, blue); 153 | background-image:linear-gradient(287deg, red, blue); 154 | } 155 | ~~~ 156 | 157 | - background-image:radial-gradient(渐变中心点横坐标 渐变中心点的纵坐标,颜色值1,颜色值2) 径向渐变 158 | 159 | ps:颜色值可以为%或者px表示颜色值出现的位置，目前兼容性不好大部分浏览器不支持 160 | 161 | #### 多背景 162 | 从IE9开始，一个盒子可以携带多个背景，多个背景之间以逗号分隔 163 | ~~~ 164 | div{ 165 | background:url("images/ab.png") content-box,url('images/xiaoming.jpg') padding-box,orange; 166 | } 167 | ~~~ 168 | 169 | ## 过渡动画 170 | 171 | - 过渡动画的格式：transition:发生过渡动画的属性名 完成过渡动画的时间 缓动曲线 延迟时间，或者单个写：transition-property属性名 transition-duration过渡动画时间 transition-timing-function缓动曲线 transition-delay延迟时间 172 | - 可以发生过渡动画的属性：凡是有值可以转化为数值的属性都可以，chrome中背景图也可以发生过渡动画 173 | ~~~ 174 | div{ 175 | width: 100px; 176 | height: 100px; 177 | line-height: 100px; 178 | border:1px solid black; 179 | transition: all 1s ease 0s; 180 | text-align: center; 181 | } 182 | div:hover{ 183 | height: 300px; 184 | width: 300px; 185 | border-radius:300px; 186 | line-height: 300px; 187 | border:10px solid blue; 188 | box-shadow: 20px 30px 30px 40px red; 189 | } 190 | ~~~ 191 | 192 | ## 变形 193 | 194 | ### 二维变形 195 | 196 | #### 旋转变形 197 | 语法：transform:rotate(deg) 参数为旋转的度数，如果为正值则为顺时针旋转,如果为负值则为逆时针旋转 198 | 199 | #### 斜切变形 200 | 语法：transform:skew(水平方向斜切角度,垂直方向斜切角度) 201 | 202 | #### 缩放变形 203 | 语法：transform:scale(x轴缩放比例,y轴缩放比例)，不可使用%，只有一个值则两个方向缩放相等的比例 204 | 205 | #### 位移变形 206 | 语法：transform:translate(向x轴正向平移的距离,向y轴正向平移的距离)，平移距离取值可以是像素也可以是百分比，如果为百分比则相对自己而言 207 | 208 | #### 变形中心点的控制 209 | 语法：transform-origin:变形中心点的横坐标 变形中心点的纵坐标，取值可为方位名词、具体像素、百分比，一定要给默认样式加 210 | 211 | ### 三维变形 212 | 三维变形需要加景深，这样会产生一个近大远小、近实远虚的透视效果，perspective:px,需要给不变的元素加即承载变形元素的盒子 213 | 214 | #### 旋转变形 215 | - transform:rotate() transform:rotateZ() 默认的是绕z轴旋转，如果为正值则是顺时针旋转，如果为负值则是逆时针旋转 216 | - transform:rotateX() 绕x轴旋转，如果为正值是点头，如果为负值则是仰头 217 | - transform;rotateY() 绕y轴旋转，如果为正值是向右旋转，如果为负值则向左旋转 218 | 219 | #### 位移变形 220 | transform:translate3D(x,y,z) 3D位移，三个参数分别为三个方向的正向位移，也可以分开写：transform:translateX(x),transform:translateY(x),transform:translateZ(z) 221 | 222 | #### 构建立方体 223 | 构建立方体需要加transform-style属性，需要加在父元素上，transfrom-style:flat(让子元素以二维平面显示，默认) | preserve-3d(让子元素以三维立体呈现) 224 | 225 | #### 透视点控制 226 | 透视点控制需要属性perspective-origin:px | % | 方位名词，默认值为center center，需要设置两个值，第一个为x轴坐标，第二个为y轴坐标 227 | 228 | #### 背景裁切 229 | clip:rect(上,右,下,左)，表示矩形裁切，需要配合绝对定位一起使用 230 | 231 | ## 动画 232 | 定义动画:animation:自定义动画名称 动画时长 缓动曲线 延迟时长 是否停留在终点（forwards表示停留在终点) 运行的次数(默认为1次,infinite表示无数次) 是否交替运行(alternate) 233 | ~~~ 234 | div:nth-child(2) span{ 235 | width: 224px; 236 | height: 224px; 237 | display: block; 238 | background: url(images/52/fengche.png); 239 | animation: xuanzhuan 2s linear 0s infinite; 240 | } 241 | @keyframes xuanzhuan{ 242 | from{ 243 | transform: rotateZ(0deg); 244 | } 245 | to{ 246 | transform: rotateZ(-360deg); 247 | } 248 | } 249 | ~~~ 250 | 251 | ## 响应式 252 | 253 | ### 媒体查询 254 | 255 | #### 内嵌媒体查询 256 | 257 | ~~~ 258 | /* 屏幕宽度 */ 259 | body{ 260 | background: url(../images/69/pc.jpg) no-repeat; 261 | } 262 | @media screen and (max-width: 980px){ 263 | body{ 264 | background: url(../images/69/pad.jpg) no-repeat; 265 | } 266 | } 267 | @media screen and (max-width: 640px) { 268 | body{ 269 | background: url(../images/69/phone.jpg) no-repeat; 270 | } 271 | } 272 | 273 | /* 屏幕方向 */ 274 | @media screen and (orientation:portrait){ /* 竖屏 */ 275 | 276 | } 277 | @media screen and (orientation:landscape){ /* 横屏 */ 278 | 279 | } 280 | ~~~ 281 | 282 | #### 外部媒体查询 283 | 284 | ~~~ 285 | 286 | 287 | 288 | ~~~ 289 | 290 | ### 视口 291 | 292 | 如果网站需要做手机端的适配就需要加视口否则就不需要加视口。 293 | 294 | ~~~ 295 | 296 | 304 | ~~~ 305 | 306 | ### rem单位 307 | rem表示当前尺寸是当前网站根目录文字大小的多少倍，只要是尺寸都可以转成rem单位表示 308 | ### 重新认识百分比 309 | 在移动端经常会适配不同屏幕所以百分比的使用非常广泛，那么百分比到底是谁的百分比就尤为重要了。 310 | - width为百分比，则是相对于父级的宽度 311 | - height为百分比，则是相对于父级高度 312 | - padding为百分比，则是相对于父级宽度 313 | - margin为百分比，则是相对于父级的宽度 314 | - border-width是不可以设置百分比的 315 | 316 | ### 盒子的内减模式 317 | css3中允许设置width和height到底是盒子的那部分的宽度和高度。 318 | 319 | box-sizing:content-box | border-box; 320 | - content-box 盒子的width和height是内容盒子的宽高 321 | - border-box 盒子的width和height是边框盒子的宽高=内容宽高+padding+border 322 | 323 | ### 弹性布局 324 | - 格式：display:flex; 325 | - 用法：在父级元素添加display:flex;在子元素中添加flex:具体的几部分表示把父级的宽度(除固定宽度以外的宽度)分成若干等份，该 子级所占的份数 326 | 327 | ### 盒子的最大宽和最小宽 328 | - max-width 盒子的最大宽，盒子的实际宽度小于等于最大宽度时，盒子的宽度就是实际宽度；盒子的实际宽度大于最大宽度时，盒子的宽度就是最大宽度即：width > max-width ? max-width : width; 329 | - min-width 盒子的最小宽，盒子的实际宽度大于等于最小宽度时，盒子的宽度就是实际宽度；盒子的实际宽度小于盒子的最小宽度时，盒子的宽度就是最小宽度即：width < min-width ? min-width : width; 330 | - max-height 盒子的最大高，同上 331 | - min-height 盒子的最小高，同上 332 | 333 | ps:max-width和min-width从IE9开始兼容 334 | 335 | ## SVG 336 | svg是用xml描述的可缩放矢量图(scalable vector graphics),矢量图所占空间小，文件小，所以传输速度快，缩放不变形，可高清度打印但也很难描述色彩丰富的的逼真效果而且只有高版本浏览器支持。 337 | 338 | ### 使用方法 339 | - 可直接用浏览器打开 340 | - 可以使用img标签显示 341 | - 作为盒子的背景图 342 | - 使用svg标签展示 343 | 344 | ### 基本属性 345 | - fill 给图形填充颜色，默认为黑色 346 | - stroke 描边，默认不带描边 347 | - stroke-width 描边的宽度 348 | 349 | ### 基本图形 350 | 351 | - rect 矩形 352 | ~~~ 353 | 354 | 355 | ~~~ 356 | 357 | - circle 圆形 358 | ~~~ 359 | 360 | 361 | ~~~ 362 | 363 | - ellipse 椭圆 364 | ~~~ 365 | 366 | 367 | ~~~ 368 | 369 | - line 画线段 370 | ~~~ 371 | 372 | 373 | ~~~ 374 | 375 | - polyline 多条线 376 | ~~~ 377 | 378 | 379 | ~~~ 380 | 381 | - polygon 画多边形 382 | ~~~ 383 | 384 | 385 | ~~~ 386 | 387 | - path 路径 388 | ~~~ 389 | 390 | 391 | 392 | ~~~ 393 | 394 | 395 | 396 | 画弧度的参数： 397 | 398 | ~~~ 399 | 400 | 401 | ~~~ 402 | 403 | ### svg动画 404 | 405 | - svg动画是用animate实现，需要svg中的图形标签改为双标签 406 | - 多个动画需要使用多个animate标签，animate标签中需要一个属性：begin 407 | - 让动画停留在终点需要修改fill属性为clear(默认值，回到初始状态)或者freeze(停留在结束状态) 408 | - 动画重复次数使用repeatCount，后面跟上动画需要执行的次数，如果需要无限次运动使用indefinite 409 | 410 | ~~~ 411 | 412 | 413 | 414 | 415 | 416 | ~~~ 417 | 418 | ## canvas 419 | 定义：您的浏览器不支持canvas，从IE9开始支持canvas，注意canvas的宽高需要用html标签属性来设置，如果用css设置里面的文字或图案会变形。 420 | 421 | ### canvas绘图 422 | 423 | #### 绘制矩形 424 | - fillRect(矩形左上角横坐标,矩形左上角的纵坐标,宽度,高度) 填充矩形 425 | - strokeRect(矩形左上角横坐标,矩形左上角的纵坐标,宽度,高度) 描边矩形 426 | - clearRect(矩形左上角横坐标,矩形左上角的纵坐标,宽度,高度) 清除矩形 427 | - .fillStyle="颜色表示法" 设置填充样式，默认填充为黑色 428 | - .strokeStyle="颜色表示法" 设置描边样式，默认描边颜色为灰色 429 | - .lineWidth=数字 设置描边的变宽 430 | ~~~ 431 | var cvs = document.getElementById('cvs'); 432 | if(cvs.getContext){ 433 | var cvs_context = cvs.getContext('2d'); 434 | 435 | //填充矩形 436 | cvs_context.fillStyle = 'skyblue'; 437 | cvs_context.fillRect(10,10,200,200); 438 | 439 | //描边矩形 440 | cvs_context.strokeStyle = 'green'; //描边样式 441 | cvs_context.lineWidth = 3; //描边线的宽度 442 | cvs_context.strokeRect(220,10,200,200); 443 | 444 | //清除矩形 445 | cvs_context.clearRect(20,20,180,180); 446 | } 447 | ~~~ 448 | 绘制矩形中实际是封装好了beginPath()和closePath() 449 | 450 | #### 绘制路径 451 | - moveTo(横坐标,纵坐标) 拿起画笔移动到指定位置 452 | - lineTo(横坐标,纵坐标) 从画笔停留的位置画线段到指定位置，如果没有写moveTo那么第一个lineTo会被认为是moveTo 453 | - 开始绘制新路径之前需要加上beginPath()表示开启新路径，如果绘制的封闭区域，需要在绘制完成后加上closePath()，表示在开始和结束之前画线段封闭路径 454 | - canvas描边的时候是往图形的里面描一半 ，往图形外面描一半 455 | ~~~ 456 | // 绘制三角形 457 | cvs_context.beginPath(); //开启新路径 458 | cvs_context.moveTo(600, 100); 459 | cvs_context.lineTo(650, 200); 460 | cvs_context.lineTo(550, 200); 461 | cvs_context.closePath(); //在开始位置与结束位置之间画线段，封闭路径 462 | cvs_context.strokeStyle = 'rgba(255, 100, 0, 0.5)'; 463 | cvs_context.fill(); 464 | cvs_context.stroke(); 465 | ~~~ 466 | 467 | #### 绘制弧线 468 | - arc(圆心的横坐标,圆心的纵坐标,半径,起始弧度,结束弧度,是否逆时针) 469 | ~~~ 470 | // 绘制弧线 471 | cvs_context.beginPath(); 472 | cvs_context.arc(150, 350, 100, 0, Math.PI, true); 473 | cvs_context.strokeStyle = "#f60"; 474 | cvs_context.stroke(); 475 | 476 | cvs_context.beginPath(); 477 | cvs_context.arc(600, 400, 100, 0, Math.PI, true); 478 | cvs_context.fill(); 479 | ~~~ 480 | 481 | #### 绘制图片 482 | - drawImage(图片对象,绘制图片左上角的横坐标,绘制图片左上角的纵坐标,图片的宽度,图片的高度) 483 | - drawImage(图片对象,在精灵图中的横坐标,在精灵图中的纵坐标,在精灵图中的宽度,在精灵图中的高度,绘制canvas上的横坐标,绘制canvas上的纵坐标,图片的宽度,图片的高度) 484 | 485 | ps:绘制图片时需要加：图片对象.onload = function(){} 要等图片加载完成后才能画 486 | ~~~ 487 | //画图片 488 | var img = new Image(); 489 | img.src = 'images/tainiu.jpg'; 490 | img.onload = function(){ 491 | cvs_context.drawImage(img, 760, 100, 200, 250); 492 | } 493 | ~~~ 494 | 495 | #### 绘制文字 496 | - fillText(需要绘制的文字,横坐标,纵坐标) 填充文字 497 | - strokeText(需要绘制的文字,横坐标,纵坐标) 描边文字 498 | ~~~ 499 | // 绘制文字 500 | cvs_context.beginPath(); 501 | cvs_context.fillStyle = 'green'; 502 | cvs_context.font = '30px "微软雅黑"'; 503 | cvs_context.strokeText('土家肸哥', 790, 400); 504 | cvs_context.fillText('土家肸哥', 790, 400); 505 | ~~~ 506 | 507 | ### canvas动画 508 | canvas的本质是像素化的，所以一旦绘制在画布上就变成像素点无法在得到刚才的图片，只能清除了重新画 509 | 510 | #### canvas变形 511 | - .translate(x轴正向,y轴正向) 平移坐标轴 512 | - .rotate(转的弧度) 旋转 513 | - .scale(x轴缩放的比例,y轴缩放的比例) 缩放变形，canvas中必须写两个参数 514 | - .save() 在变形前将坐标轴保存，只要一restore()前面所有的save()都会失效 515 | - .restore() 将坐标轴恢复原状，恢复到上次save()的状态，如果没有保存，不能恢复 516 | ~~~ 517 | var cvs_context = cvs.getContext('2d'); 518 | 519 | // 在(100, 100)的位置绘制绿色矩形 520 | cvs_context.fillStyle = 'green'; 521 | cvs_context.fillRect(100, 100, 100, 100); 522 | 523 | //在变型前，先将坐标轴保存 524 | cvs_context.save(); 525 | 526 | // 坐标轴向X轴正向移动200px 527 | cvs_context.translate(200, 0); 528 | 529 | // 在(100, 100)的位置绘制绿色矩形 530 | cvs_context.fillStyle = 'green'; 531 | cvs_context.fillRect(100, 100, 100, 100); 532 | 533 | // 在(150, 150)的位置绘制圆形 534 | cvs_context.beginPath(); 535 | cvs_context.arc(150, 150, 50, 0, 2*Math.PI, true); 536 | cvs_context.closePath(); 537 | cvs_context.stroke(); 538 | 539 | // 将坐标轴恢复原状 540 | cvs_context.restore(); 541 | 542 | //再次保存坐标轴 543 | cvs_context.save(); 544 | 545 | // 在(150, 150)的位置绘制圆形 546 | cvs_context.beginPath(); 547 | cvs_context.arc(150, 150, 50, 0, 2*Math.PI, true); 548 | cvs_context.closePath(); 549 | cvs_context.stroke(); 550 | 551 | // 在(500, 100)的位置绘制矩形边框 552 | cvs_context.strokeRect(500, 100, 100, 100); 553 | 554 | // 将坐标轴转30deg 555 | cvs_context.rotate(30*2*Math.PI/360); 556 | 557 | // 在(500, 100)的位置绘制矩形边框 558 | cvs_context.strokeRect(500, 100, 100, 100); 559 | 560 | // 将坐标轴恢复 561 | cvs_context.restore(); 562 | 563 | cvs_context.fillRect(500, 100, 100, 100); 564 | 565 | // 将坐标轴x轴和y轴都缩都放到0.5倍 566 | cvs_context.scale(0.5, 0.5); //在CSS3中，如果只写一个参数，表示x轴与y轴等比缩放 567 | 568 | // 在(100, 100)的位置绘制矩形边框 569 | cvs_context.strokeRect(100, 100, 100, 100); 570 | ~~~ -------------------------------------------------------------------------------- /canvas绘制基本图形.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 绘制基本图形 6 | 14 | 80 | 81 | 82 | 您的浏览器不支持canvas 83 | 84 | -------------------------------------------------------------------------------- /images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/01.jpg -------------------------------------------------------------------------------- /images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02.jpg -------------------------------------------------------------------------------- /images/02/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/1.jpg -------------------------------------------------------------------------------- /images/02/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/2.jpg -------------------------------------------------------------------------------- /images/02/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/3.jpg -------------------------------------------------------------------------------- /images/02/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/4.jpg -------------------------------------------------------------------------------- /images/02/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/5.jpg -------------------------------------------------------------------------------- /images/02/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/6.jpg -------------------------------------------------------------------------------- /images/02/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/7.jpg -------------------------------------------------------------------------------- /images/02/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/02/8.jpg -------------------------------------------------------------------------------- /images/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/04.png -------------------------------------------------------------------------------- /images/06/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/06/bg.jpg -------------------------------------------------------------------------------- /images/06/h5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/06/h5.png -------------------------------------------------------------------------------- /images/06/hover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/06/hover.jpg -------------------------------------------------------------------------------- /images/06/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/06/sun.png -------------------------------------------------------------------------------- /images/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/31.jpg -------------------------------------------------------------------------------- /images/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/34.jpg -------------------------------------------------------------------------------- /images/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/36.jpg -------------------------------------------------------------------------------- /images/38/pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/38/pointer.png -------------------------------------------------------------------------------- /images/38/turntable-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/38/turntable-bg.jpg -------------------------------------------------------------------------------- /images/38/turntable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/38/turntable.png -------------------------------------------------------------------------------- /images/39/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/39/bg.png -------------------------------------------------------------------------------- /images/39/fan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/39/fan.jpg -------------------------------------------------------------------------------- /images/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/40.jpg -------------------------------------------------------------------------------- /images/42/backface.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/42/backface.jpg -------------------------------------------------------------------------------- /images/42/foreface.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/42/foreface.jpg -------------------------------------------------------------------------------- /images/43/baby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/43/baby.png -------------------------------------------------------------------------------- /images/43/xiaoming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/43/xiaoming.png -------------------------------------------------------------------------------- /images/45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/45.jpg -------------------------------------------------------------------------------- /images/46/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/1.jpg -------------------------------------------------------------------------------- /images/46/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/2.jpg -------------------------------------------------------------------------------- /images/46/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/3.jpg -------------------------------------------------------------------------------- /images/46/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/4.jpg -------------------------------------------------------------------------------- /images/46/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/5.jpg -------------------------------------------------------------------------------- /images/46/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/46/6.jpg -------------------------------------------------------------------------------- /images/51.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/51.jpg -------------------------------------------------------------------------------- /images/52/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/52/ball.png -------------------------------------------------------------------------------- /images/52/fengche.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/52/fengche.png -------------------------------------------------------------------------------- /images/53/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/53/1.jpg -------------------------------------------------------------------------------- /images/53/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/53/2.jpg -------------------------------------------------------------------------------- /images/53/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/53/3.jpg -------------------------------------------------------------------------------- /images/53/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/53/4.jpg -------------------------------------------------------------------------------- /images/69/pad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/69/pad.jpg -------------------------------------------------------------------------------- /images/69/pc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/69/pc.jpg -------------------------------------------------------------------------------- /images/69/phone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/69/phone.jpg -------------------------------------------------------------------------------- /images/69/phone_landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/69/phone_landscape.jpg -------------------------------------------------------------------------------- /images/ab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/ab.png -------------------------------------------------------------------------------- /images/arc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/arc.gif -------------------------------------------------------------------------------- /images/baoya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/baoya.jpg -------------------------------------------------------------------------------- /images/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/bg1.png -------------------------------------------------------------------------------- /images/eight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/eight.jpg -------------------------------------------------------------------------------- /images/path.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/path.gif -------------------------------------------------------------------------------- /images/tainiu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/tainiu.jpg -------------------------------------------------------------------------------- /images/w3c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/w3c.gif -------------------------------------------------------------------------------- /images/whatwg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/whatwg.gif -------------------------------------------------------------------------------- /images/xiaoming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/images/xiaoming.jpg -------------------------------------------------------------------------------- /selector作业.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | selector作业 6 | 42 | 43 | 44 |
45 |
    46 |
  • 47 |
  • 48 |
  • 49 |
  • 50 |
  • 51 |
  • 52 |
  • 53 |
  • 54 |
  • 55 |
  • 56 |
57 |
58 |
59 |
    60 |
  • 61 |
  • 62 |
  • 63 |
  • 64 |
  • 65 |
  • 66 |
  • 67 |
  • 68 |
  • 69 |
70 |
71 | 72 | -------------------------------------------------------------------------------- /svg画基本图形.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | svg画基本图形 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /svg画天气趋势图.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | svg画天气趋势图 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /svg画笑脸.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | svg画笑脸 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /二维变形基础.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 二维变形基础 6 | 45 | 46 | 47 | 1. 旋转45度

48 | 49 | 2. 垂直方向斜切10度，水平方向斜切10度

50 | 51 | 3. 水平和垂直方向都缩小到一半

52 | 53 | 4. 向左平移30px，向下平移30px

54 | 55 | 5. 先旋转45度，然后向x轴负向平移30px

56 | 57 | 6. 先水平垂直方向斜切10度，然后向x轴负向平移30px

58 | 59 | 7. 先向x轴负向平移50px，向y轴正向平移50px，然后再缩放到一半

60 | 61 | 8. 先缩放到一半，然后向x轴负向平移50px，向y轴正向平移50px

62 | 63 | 9. 向x正向平移50%，向y轴正向平移50%

64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | 75 | -------------------------------------------------------------------------------- /伪类制作小图标.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 伪类制作小图标 6 | 44 | 45 | 46 |
    47 |
  • 首页
    • 48 |
  • 分类
    • 49 |
50 | 51 | -------------------------------------------------------------------------------- /伪类选择器1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 伪类选择器1 6 | 79 | 80 | 81 |
82 |
div
83 |
div
84 |
85 |
86 |
div
87 |
div
88 |
div
89 |
div
90 |
div
91 |
div
92 |
93 |
94 |
div
95 |
96 | 97 | 1. 文档根标签加灰

98 | 99 | 2. 每家的第二个孩子加橙色背景

100 | 101 | 3. 每家最大的孩子加紫色背景

102 | 103 | 4. 每家最小的孩子加粉色背景

104 | 105 | 5. 每家的倒数第二小的孩子加黑色背景

106 | 107 | 6. 独生子女的孩子加红色背景

108 | 109 | 7. 排行偶数的孩子加绿色背景

110 | 111 | 8. 排行奇数的孩子加蓝色背景

112 | 113 | 9. 排行前三的孩子加灰色背景 114 |

115 | 116 | -------------------------------------------------------------------------------- /伪类选择器2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 伪类选择器2 6 | 87 | 88 | 89 |
90 |
div(儿子)
91 |

p(女儿)

92 |
93 |
94 |
div(儿子)
95 |

p(女儿)

96 |
div(儿子)
97 |

p(女儿)

98 |
div(儿子)
99 |

p(女儿)

100 |
101 |
102 |

p(女儿)

103 |
104 | 105 | 1. 每个section下的第二个div（每家的第二个儿子）加黄色背景

106 | 107 | 2. 每个section下的第一个p（每家的第一个女儿）加橙色色背景

108 | 109 | 3. 每个section下的最后一个p（每家最小的女儿）加绿色色背景

110 | 111 | 4. 每个section下的倒数第二个div（每家的第二小的儿子）加紫色背景

112 | 113 | 5. 每个section下的唯一div（每家的独子）加蓝色背景

114 | 115 | 6. 每个section下的唯一p（每家的独女）加粉色背景

116 | 117 | 7. 每个section下的唯一div和唯一p（每家的独子和独女）加灰色背景

118 | 119 | 8. 每个section下排在奇数的div（排行奇数的儿子）加红色背景

120 | 121 | 9. 每个section下排在偶数的p（排行偶数的女儿）加深红色背景

122 | 123 | 10. 每个section下排名前2的div（大儿子和二儿子）加青色背景 124 |

125 | 126 | -------------------------------------------------------------------------------- /伪类选择器3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 伪类选择器3 6 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /位移综合应用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 位移综合应用 6 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /作业百度钱包.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 百度钱包 6 | 45 | 46 | 47 |
48 |
49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /关系选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 关系选择器 6 | 48 | 49 | 50 |
51 | 金日成section 52 |
53 | 金正日（男div） 54 |

金惠敬（女p）

55 | 56 |
金正哲（男div）
57 |
金正恩（男div）
58 |
59 | 60 |
金万一（男div）
61 |

金敬姬（女p）（张成泽）

62 | 63 |
金英一（男div）
64 |
金平一（男div）
65 |

金庆真（女p）

66 |
67 | 68 | 69 | 1. 选择section的div后代，加蓝色边框

70 | 71 | 2. 选择section的第一级p子代，加橙色边框

72 | 73 | 3. 选择 金敬姬 后面紧挨着的第一个亲弟弟div，加绿边

74 | 75 | 4. 选择 金敬姬 后面紧挨着的第一个亲妹妹p，加红边

76 | 77 | 5. 选择 金敬姬 后面所有的亲弟弟div，加黑边

78 | 79 | 6. 选择 金敬姬 后面所有的亲妹妹p，加紫边

80 | 81 | -------------------------------------------------------------------------------- /动画导航.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 动画导航 6 | 65 | 66 | 67 |
68 |
项目
69 | 76 |
77 | 86 | 87 | -------------------------------------------------------------------------------- /变形中心点控制.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 变形中心点控制 6 | 74 | 75 | 76 |
77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /变形过渡动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 变形过渡动画 6 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /变形过渡动画2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 变形过渡动画2 6 | 19 | 20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /响应式网站/css/pad.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-09 20:59:28 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-09 23:44:37 6 | */ 7 | 8 | /* 平板样式 */ 9 | body{ 10 | background: url('../images/bg2.jpg') no-repeat center top; 11 | } 12 | img { 13 | max-width: 100%; 14 | height: auto; 15 | width:auto\9; /* ie8 */ 16 | -ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/ 17 | } 18 | header{ 19 | width: auto; 20 | } 21 | header h1{ 22 | display: none; 23 | } 24 | 25 | nav{ 26 | width: auto; 27 | } 28 | nav ul:before{ 29 | display: none; 30 | } 31 | nav ul:after{ 32 | display: none; 33 | } 34 | nav ul li{ 35 | width: 11.11%; 36 | padding: 0; 37 | text-align: center; 38 | } 39 | nav ul li:last-child{ 40 | padding-right:0; 41 | } 42 | 43 | .banner{ 44 | width: auto; 45 | } 46 | .banner img{ 47 | width: auto; 48 | } 49 | 50 | .pro-wrapper{ 51 | width: auto; 52 | background: none; 53 | margin-left: 1%; 54 | font-size: 14px; 55 | font-weight: bold; 56 | } 57 | .products{ 58 | width: auto; 59 | height: auto; 60 | } 61 | .products ul{ 62 | padding:0; 63 | width:auto; 64 | } 65 | .products ul li{ 66 | width: 49%; 67 | background: linear-gradient(0deg, #f0f0f0, #fafafa); 68 | border-radius: 10px; 69 | border: 1px solid #cccccc; 70 | margin-right: 1%; 71 | box-sizing: border-box; 72 | margin-bottom: 10px; 73 | padding-bottom: 10px; 74 | height: auto; 75 | } 76 | .qiye-info{ 77 | width: 99%; 78 | height: auto; 79 | overflow: hidden; 80 | background: none; 81 | 82 | } 83 | .qiye-info .info-left,.info-middle,.info-right{ 84 | float: none; 85 | width: auto; 86 | background: #f6f6f6; 87 | border: 1px solid #ccc; 88 | border-radius: 10px; 89 | margin-top: 10px; 90 | } 91 | .img-wrap{ 92 | margin-left:25px; 93 | } 94 | .info-left p{ 95 | float: none; 96 | margin-left:150px; 97 | min-height: 110px; 98 | padding-bottom: 10px; 99 | width: auto; 100 | } 101 | .info-middle ul{ 102 | padding:0 0 20px 0; 103 | } 104 | .info-middle ul li{ 105 | width: 33.33%; 106 | margin: 0; 107 | text-align: center; 108 | } 109 | .info-right p{ 110 | padding-left: 36px; 111 | padding-bottom: 10px; 112 | } 113 | .sub-nav{ 114 | width: 98%; 115 | height: auto; 116 | background: #cccccc; 117 | border-radius: 10px; 118 | margin-top:10px; 119 | } 120 | .sub-nav a{ 121 | font-size: 14px; 122 | font-weight: bold; 123 | display: inline-block; 124 | } 125 | footer{ 126 | height: auto; 127 | width: 98%; 128 | margin: 10px auto 0; 129 | border: 0 none; 130 | border: 1px solid #ccc; 131 | border-radius: 10px; 132 | font-size: 14px; 133 | font-weight: bold; 134 | } 135 | footer div{ 136 | width: auto; 137 | } 138 | footer p{ 139 | margin-left: 20px; 140 | } 141 | footer h2{ 142 | margin-right: 20px; 143 | } -------------------------------------------------------------------------------- /响应式网站/css/phone.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-09 20:59:28 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-09 23:54:39 6 | */ 7 | nav ul{ 8 | display: none; 9 | } 10 | nav select{ 11 | display: block; 12 | width: 100%; 13 | } 14 | footer p{ 15 | float: none; 16 | } 17 | footer h2{ 18 | float: none; 19 | text-align: center; 20 | } 21 | .products ul li{ 22 | width: 99%; 23 | } -------------------------------------------------------------------------------- /响应式网站/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-09 20:59:28 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-10 10:16:55 6 | */ 7 | @charset "utf-8"; 8 | 9 | /* 基本样式 */ 10 | body,div,p,span,ul,li,dl,dt,dd,a,ol,input,img,h1,h2,h3,h4{ padding:0; margin:0; list-style:none; border:0;} 11 | body{ 12 | font-family:"宋体"; 13 | color:#616161; 14 | font-size:12px; 15 | background:url(../images/_r1_c1.jpg) no-repeat center 0; 16 | } 17 | a{ 18 | color:#fff; 19 | text-decoration:none; 20 | } 21 | a:hover{ 22 | text-decoration:underline; 23 | } 24 | 25 | .fl{ 26 | float: left; 27 | } 28 | .fr{ 29 | float: right; 30 | } 31 | 32 | /* 头部样式 */ 33 | header{ 34 | height: 99px; 35 | padding-top:20px; 36 | width: 980px; 37 | margin:0 auto; 38 | } 39 | 40 | /* 导航部分 */ 41 | nav{ 42 | height: 60px; 43 | font-size:14px; 44 | width: 980px; 45 | margin:0 auto; 46 | } 47 | nav select{ 48 | display: none; 49 | } 50 | nav ul li{ 51 | float: left; 52 | padding: 0 22px; 53 | background: url(../images/line.jpg) no-repeat right center; 54 | } 55 | nav ul li:last-child{ 56 | padding-right:30px; 57 | background: none; 58 | } 59 | nav ul{ 60 | height: 60px; 61 | background: url(../images/center.jpg) repeat-x; 62 | line-height: 45px; 63 | font-weight: bold; 64 | } 65 | nav ul:before{ 66 | content: ''; 67 | float: left; 68 | width: 20px; 69 | height: 60px; 70 | background: url(../images/r6_c2.jpg); 71 | } 72 | nav ul:after{ 73 | content: ''; 74 | float: left; 75 | width: 20px; 76 | height: 60px; 77 | background: url(../images/r6_c8.jpg); 78 | } 79 | 80 | .banner{ 81 | width: 980px; 82 | margin:0 auto; 83 | } 84 | 85 | /* 产品列表 */ 86 | .pro-wrapper{ 87 | /*height: 302px;*/ 88 | background: #fff url(../images/index_r9_c3.jpg) no-repeat 0 0; 89 | padding-top: 9px; 90 | width: 980px; 91 | margin:9px auto 0; 92 | } 93 | .products{ 94 | height: 92px; 95 | border-bottom: 1px solid #ccc; 96 | } 97 | .products ul{ 98 | padding-left: 9px; 99 | overflow: hidden; 100 | } 101 | .products ul li{ 102 | width: 236px; 103 | height: 84px; 104 | background: url(../images/_r2_c2.jpg); 105 | float: left; 106 | margin-right: 6px; 107 | } 108 | .products ul li h3{ 109 | height: 30px; 110 | width: 104px; 111 | background: url(../images/jingling1.jpg) no-repeat -7px 0; 112 | margin-top: 4px; 113 | margin-left: 11px; 114 | } 115 | .products ul li:nth-child(2) h3{ 116 | background-position:-7px -30px; 117 | } 118 | .products ul li:nth-child(3) h3{ 119 | background-position:-7px -60px; 120 | } 121 | .products ul li:nth-child(4) h3{ 122 | background-position:0 -90px; 123 | } 124 | .products h3 a{ 125 | width: 100%; 126 | height: 100%; 127 | text-indent: -9999em; 128 | display: block; 129 | } 130 | .products p{ 131 | padding: 0 14px 0 51px; 132 | line-height: 18px; 133 | } 134 | .qiye-info{ 135 | height: 209px; 136 | background: url(../images/index_r12_c4.jpg) repeat-x; 137 | } 138 | .qiye-info .title{ 139 | height: 73px; 140 | } 141 | .qiye-info .title h3{ 142 | float: left; 143 | height: 38px; 144 | width: 185px; 145 | background: url(../images/index_r9_c2.jpg); 146 | margin: 10px 0 0 10px; 147 | } 148 | .qiye-info .title h3 a{ 149 | width: 100%; 150 | height: 100%; 151 | display: block; 152 | text-indent: -999px; 153 | } 154 | .title span{ 155 | float: right; 156 | margin: 20px 12px 0 0; 157 | } 158 | .qiye-info .info-left{ 159 | height: 100%; 160 | width: 323px; 161 | background: url(../images/line02.jpg) no-repeat right 0; 162 | } 163 | .info-left .desc{ 164 | padding: 0 10px; 165 | overflow: hidden; 166 | } 167 | .img-wrap{ 168 | float: left; 169 | } 170 | .img-wrap img{ 171 | border: 1px solid #ccc; 172 | padding: 2px; 173 | } 174 | .info-left p{ 175 | float: right; 176 | width: 190px; 177 | line-height: 20px; 178 | } 179 | .info-left p a{ 180 | color: #398d00; 181 | } 182 | .info-middle{ 183 | background: url(../images/line02.jpg) no-repeat right 0; 184 | width: 407px; 185 | } 186 | .info-middle ul{ 187 | padding-left: 12px; 188 | overflow: hidden; 189 | } 190 | .info-middle ul li{ 191 | float: left; 192 | width: 121px; 193 | margin-right: 10px; 194 | } 195 | .info-middle ul p a{ 196 | color:#616161; 197 | } 198 | .info-middle ul p{ 199 | text-align: center; 200 | line-height: 20px; 201 | } 202 | .info-middle ul a img{ 203 | border: 1px solid #ccc; 204 | } 205 | .info-right p{ 206 | line-height: 20px; 207 | padding-left: 12px; 208 | } 209 | 210 | /* 顶部导航 */ 211 | .sub-nav{ 212 | text-align: center; 213 | background: url(../images/_c16.jpg) repeat-x; 214 | height: 34px; 215 | line-height: 34px; 216 | color: #fff; 217 | border: 1px solid #ddd; 218 | width: 980px; 219 | margin:10px auto 0; 220 | } 221 | .sub-nav ul li{ 222 | float: left; 223 | } 224 | 225 | /* 版权部分 */ 226 | footer{ 227 | margin-top: 1px; 228 | height: 88px; 229 | border-bottom: 3px solid #69ba17; 230 | background: url(../images/index_r17_c2.jpg) repeat-x; 231 | overflow: hidden; 232 | } 233 | footer div{ 234 | width: 980px; 235 | margin:0 auto; 236 | } 237 | footer p{ 238 | float: left; 239 | margin-top: 20px; 240 | line-height: 22px; 241 | } 242 | footer h2{ 243 | float: right; 244 | margin-top: 17px; 245 | } 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | -------------------------------------------------------------------------------- /响应式网站/images/_c16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/_c16.jpg -------------------------------------------------------------------------------- /响应式网站/images/_r1_c1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/_r1_c1.jpg -------------------------------------------------------------------------------- /响应式网站/images/_r1_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/_r1_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/_r2_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/_r2_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/arr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/arr.jpg -------------------------------------------------------------------------------- /响应式网站/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/banner.jpg -------------------------------------------------------------------------------- /响应式网站/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/bg2.jpg -------------------------------------------------------------------------------- /响应式网站/images/center.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/center.jpg -------------------------------------------------------------------------------- /响应式网站/images/dot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/dot.jpg -------------------------------------------------------------------------------- /响应式网站/images/img/index_r1_c1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/img/index_r1_c1.jpg -------------------------------------------------------------------------------- /响应式网站/images/img/index_r1_c10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/img/index_r1_c10.jpg -------------------------------------------------------------------------------- /响应式网站/images/img/index_r1_c6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/img/index_r1_c6.jpg -------------------------------------------------------------------------------- /响应式网站/images/img/index_r1_c8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/img/index_r1_c8.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r10_c15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r10_c15.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r12_c4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r12_c4.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r14_c6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r14_c6.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r17_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r17_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r2_c121212.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r2_c121212.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r2_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r2_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r2_c2111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r2_c2111.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r9_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r9_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/index_r9_c3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/index_r9_c3.jpg -------------------------------------------------------------------------------- /响应式网站/images/jingling1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/jingling1.jpg -------------------------------------------------------------------------------- /响应式网站/images/libg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/libg.jpg -------------------------------------------------------------------------------- /响应式网站/images/line.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/line.jpg -------------------------------------------------------------------------------- /响应式网站/images/line02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/line02.jpg -------------------------------------------------------------------------------- /响应式网站/images/list_r2_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/list_r2_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/list_r6_c3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/list_r6_c3.jpg -------------------------------------------------------------------------------- /响应式网站/images/list_r6_c4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/list_r6_c4.jpg -------------------------------------------------------------------------------- /响应式网站/images/list_r6_c8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/list_r6_c8.jpg -------------------------------------------------------------------------------- /响应式网站/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/logo.jpg -------------------------------------------------------------------------------- /响应式网站/images/r6_c2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/r6_c2.jpg -------------------------------------------------------------------------------- /响应式网站/images/r6_c8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/r6_c8.jpg -------------------------------------------------------------------------------- /响应式网站/images/sub_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TujiaWang/CSS3/a76b618db3a05c177e2ae94b08b48a9aa496f527/响应式网站/images/sub_logo.jpg -------------------------------------------------------------------------------- /响应式网站/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 绿色食品网 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 |
15 | 39 | 42 |
43 |
44 |
    45 |
  • 46 |

    有机蔬菜

    47 |

    主要通过自然降水、施用农家肥人工除草等传统的农...

    48 |
    • 49 |
  • 50 |

    有机蔬菜

    51 |

    主要通过自然降水、施用农家肥人工除草等传统的农...

    52 |
    • 53 |
  • 54 |

    有机蔬菜

    55 |

    主要通过自然降水、施用农家肥人工除草等传统的农...

    56 |
    • 57 |
  • 58 |

    有机蔬菜

    59 |

    主要通过自然降水、施用农家肥人工除草等传统的农...

    60 |
    • 61 |
62 |
63 |
64 |
65 |
66 |

关于我们

67 | 68 |
69 |
70 | 71 |

绿色食品（北京）有限公司立志于有机事业的发展，坚持以人为本，走可持续发展的道路，从农田到餐桌，实行全过程监控体系，以优质的产品为更多的人提供健康的食品安...详细内容>>

72 |
73 |
74 |
75 |
76 |

关于我们

77 | 78 |
79 | 93 |
94 |
95 |
96 |

关于我们

97 | 98 |
99 |

地 址：北京市海淀区知春路未来大厦6层
邮 编：100191
热线电话：010-62358888
邮 箱：lssp@lssp.com
传 真：010-88636666

100 |
101 |
102 |
103 |
104 | 网站首页| 105 | 公司新闻| 106 | 行业动态| 107 | 基地管理| 108 | 会员服务| 109 | 网上购物| 110 | 产品展示| 111 | 关于我们 112 |
113 |
114 |
115 |

电话：010-62358888　传真：010-88636666　客服电话：400-0809-560
绿色食品（北京）有限公司 版权所有 京ICP备11036362号　

116 |

117 |
118 |
119 | 120 | -------------------------------------------------------------------------------- /圆角画基本图形.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 圆角画基本图形 6 | 46 | 47 | 48 |
普通圆角
49 |
设置两个值
50 |
设置三个值
51 |
设置四个值
52 |
单个角设置
53 |
正圆
54 |
上圆角
55 |
下圆角
56 | 57 | -------------------------------------------------------------------------------- /多背景.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 多背景 6 | 17 | 18 | 19 |
多背景
20 | 21 | -------------------------------------------------------------------------------- /媒体查询/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 媒体查询 7 | 8 | 9 | 10 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /媒体查询/pad.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-08 19:36:14 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-08 19:36:27 6 | */ 7 | @charset 'utf-8'; 8 | body{ 9 | background: url(../images/69/pad.jpg) no-repeat; 10 | } -------------------------------------------------------------------------------- /媒体查询/pc.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-08 19:35:21 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-08 19:36:02 6 | */ 7 | @charset 'utf-8'; 8 | body{ 9 | background: url(../images/69/pc.jpg) no-repeat; 10 | } -------------------------------------------------------------------------------- /媒体查询/phone.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: tujia 3 | * @Date: 2016-12-08 19:36:36 4 | * @Last Modified by: tujia 5 | * @Last Modified time: 2016-12-08 19:36:48 6 | */ 7 | @charset 'utf-8'; 8 | body{ 9 | background: url(../images/69/phone.jpg) no-repeat; 10 | } -------------------------------------------------------------------------------- /属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 属性选择器 6 | 54 | 55 | 56 | 猫 57 | 58 | 加菲猫 59 | 猫 和老鼠 60 | 龙-猫 61 | 62 | 63 | 猫-王 64 |

65 | 0. 选择具有.cartoon类的图片，加黄边

66 | 1. 选择具有alt属性的图片，加橙色边

67 | 2. 选择具有title属性的图片，加灰边

68 | 3. 选择满足以下条件的图片：具有title属性，且title属性为"小狗"，加黑边

69 | 4. 选择满足以下条件的图片：具有title属性，且title属性中包含有"猫"，加紫边

70 | 5. 选择满足以下条件的图片：具有title属性，且title属性中以"猫"开头，加粉边

71 | 6. 选择满足以下条件的图片：具有title属性，且title属性中以"猫"结尾，加绿边

72 | 7. 选择满足以下条件的图片：具有alt属性，且alt属性中的"猫"是以空格分隔的独立部分，加青边

73 | 8. 选择满足以下条件的图片：具有alt属性，且 alt属性为"猫"或者以"猫-"开头，加深红色边

74 | 9. 选择具有title和alt属性的图片，加蓝边

75 | 10. 选择满足以下条件的图片：具有title属性，有id属性，有alt属性，加红边

76 | 11. 选择具有.cartoon类的图片，加橙色边（属性选择器的方式）

77 | 78 | 79 | -------------------------------------------------------------------------------- /径向渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 径向渐变 6 | 18 | 19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /抽奖转盘.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 抽奖转盘 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /构建立方体.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 构建立方体 6 | 64 | 65 | 66 |
67 |
    68 |
  • 正面
    • 69 |
  • 上面
    • 70 |
  • 后面
    • 71 |
  • 下面
    • 72 |
  • 左面
    • 73 |
  • 右面
    • 74 |
75 |
76 | 77 | -------------------------------------------------------------------------------- /正反面切换.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 正反面切换 6 | 35 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | -------------------------------------------------------------------------------- /翻书效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 翻书效果 6 | 51 | 52 | 53 |
54 |
55 |
56 |
57 | 58 | -------------------------------------------------------------------------------- /背景尺寸.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 背景尺寸 6 | 36 | 37 | 38 |
我是默认的
39 |
background-size:100px 100px;设定背景图大小
40 |
background-size:100% 100%;宽度与高度与盒子等宽高
41 |
background-size:100% auto;宽度与盒子等宽，高度自动等比例缩放
42 |
background-size:auto 100%;高度与盒子等高，宽度自动等比例缩放
43 |
background-size:cover;缩放背景图，到刚好覆盖该盒子
44 |
background-size:contain;在保证背景图完整显示的情况下，缩放背景图到等高或等宽
45 | 46 | -------------------------------------------------------------------------------- /背景渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 背景渐变 6 | 57 | 58 | 59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 | -------------------------------------------------------------------------------- /背面不可见.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 背面不可见 6 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /自发光.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自发光 6 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 | -------------------------------------------------------------------------------- /自定义动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自定义动画 6 | 69 | 70 | 71 | 1. 从左向右移动(一次)

72 | 73 | 2. 从左向右移动(一次，并停留在终点)

74 | 75 | 3. 从左向右移动(延迟2秒才开始动画)

76 | 77 | 4. 从左向右移动(3次)

78 | 79 | 5. 从左向右交替移动5次

80 | 81 | 6. 从左向右交替移动(无限次)

82 | 83 | 7. 从左向右先快后慢移动

84 | 85 |
86 | 87 | -------------------------------------------------------------------------------- /自定义动画练习.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自定义动画练习 6 | 48 | 49 | 50 |
51 |
52 | 53 | -------------------------------------------------------------------------------- /过渡动画基础.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 过渡动画基础 6 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
文字君
74 | 75 | -------------------------------------------------------------------------------- /透明应用的三种方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 透明应用的三种方法 6 | 47 | 48 | 49 |
50 | 51 |

龅牙哥，茫然弟与无辜女

52 |
53 |
54 | 55 |
56 |

龅牙哥，茫然弟与无辜女

57 |
58 |
59 | 60 |

龅牙哥，茫然弟与无辜女

61 |
62 | 63 | -------------------------------------------------------------------------------- /透视点控制.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 透视点控制 6 | 70 | 71 | 72 |
73 |
74 |
75 | 79 |
80 |
81 | 85 |
86 |
87 | 91 |
92 |
93 |
94 | 95 | -------------------------------------------------------------------------------- /首字下沉.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 首字下沉 6 | 32 | 33 | 34 |
35 |

庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。(具 通：俱)

36 |

予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎?

37 |

若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。(隐曜 一作：隐耀；淫雨 通：霪雨)

38 |

至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。

39 |

嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎？噫！微斯人，吾谁与归？

40 |

时六年九月十五日。

41 |
42 | 43 | --------------------------------------------------------------------------------