首页 / HTML / css3总结笔记_html/css_WEB-ITnose

css3总结笔记_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3总结笔记_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16339字，纯文字阅读大概需要24分钟。

内容图文

属性选择器

E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
实例：百度文库;

测试文字

备注：IE7及以上支持;

结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

实例：新浪头部导航

            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
           测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字    
            测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字

其它伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性

css3绘制叉号

a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) }    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}

文字

文字阴影

text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡

文字阴影应用

最简单用法

text-shadow:2px 2px 4px black

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染后面的，再渲染前面的
几个好玩的例子

//层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

文字描边

webkit-text-stroke:宽度颜色

新增文本功能

Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左到右
注意要配合unicode-bidi 一块使用

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override}

Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

自定义文字

代码格式

@font-face {    font-family: 'miaov';    src: url('1-webfont.eot');    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),         url('1-webfont.woff') format('woff'),         url('1-webfont.ttf') format('truetype'),         url('1-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;}

转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator

弹性布局

弹性盒模型

注意在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box

box-orient 定义盒模型的布局方向

Horizontal 水平显示vertical 垂直方向

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }

box-direction 元素排列顺序

 Normal 正序 Reverse 反序

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }

box-ordinal-group 设置元素的具体位置

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

box-flex 定义盒子的弹性空间

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}

box-pack 对盒子富裕的空间进行管理

start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:justify  ;  }

box-align 在垂直方向上对元素的位置进行管理

star 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

盒模型阴影

用法

box-shadow:[inset] x y blur [spread] color

参数
inset投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影color

box-shadow:10px 10px 30px blue;box-shadow:inset 10px 10px 30px blue;box-shadow:0 0 30px 10px #000; box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;

其他盒模型新增属性

box-reflect 倒影

direction 方向必选 above|below|left|right;
距离
渐变（可选）

img{ -webkit-box-reflect:below;}//上下排列，倒影在下方img{ -webkit-box-reflect:right 10px;}//左右排列，倒影在右方img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//线性渐变，逐渐消失background:-webkit-linear-gradient(red 0,blue 100%);//背景渐变

resize 自由缩放

both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放

.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}

注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式

content-box 标准盒模型 width/height=border+padding+content
border-box 怪异盒模型 width/height=content

.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}

Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线

.wrap{width:900px;border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-width:400px;}//分成了宽度400px的两栏.wrap{ -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid red;}//分成了四列

只有webkit内核实现了该属性

Css3响应式布局

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字

and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型

媒体特性

(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
@media screen{ 选择器{属性：属性值； }
}
@media screen and (max-width:400px) {
}

移动端meta

width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放（no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

新增样式属性

圆角

border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样

border-radius: 10px/5px;border-radius:100px/150px;border-radius:20px 40px 60px 80px/10px 20px 30px 40px;

参数
各种长度单位都可以：px，%。 %有时很方便但宽高不一致时不太好

border-radius:50%;

用法
1个：都一样
border-radius: 一样

 border-radius:20px;

2个：对角
border-radius: 左上&右下右上&左下

 border-radius:20px 40px;

3个：斜对角
border-radius: 左上右上&左下右下

border-radius:20px 40px 60px;

4个：全部，顺时针
border-radius: 左上右上右下左下

 border-radius:20px 40px 60px 80px;

例子：风车

边框

边框图片 border-image

border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式 round 平铺,repeat 重复,stretch拉伸

.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:20px;border-right-width:20px;}.box{width:100px;height:100px; border-width:20px; -webkit-border-image:url(border.png) 27 27 round round;}

边框颜色 border-colors 只在火狐下实现

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

线性渐变

线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上

IE 下的样式格式如下

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');`

参数
起点：从什么方向开始渐变 left、top、left top 默认：top
角度：从什么角度开始渐变 x deg的形式

background-image:-webkit-linear-gradient(60deg,red,blue);background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);

点：渐变点的颜色和位置
black 50%，位置可选

线性渐变实例进度条

 background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);

repeating-linear-gradient

 background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);

性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px 配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

实例：百度音乐图片光影效果

兼容版本

.box{background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}

径向渐变

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字

background:-webkit-radial-gradient(red,blue);background:-webkit-radial-gradient(100px 50px,red,blue);background:-webkit-radial-gradient(100px 50px,circle,red,blue);background:-webkit-radial-gradient(100px 50px,100px 20px,red,blue);background:-moz-radial-gradient(100px 50px,red,blue);

背景

多背景 先写的背景在上面
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;

背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
ackground-origin ： border | padding | content
border-box：从border区域开始显示背景。
padding-box：从padding区域开始显示背景。
content-box：从content区域开始显示背景。
background-clip
border：从border区域向外裁剪背景。
padding：从padding区域向外裁剪背景。
content：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
实例：iphone开机动画

遮罩

Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果

1、通过 translate 来移动元素和用 left top 移动元素有何区别？分别有何优劣？
2、在兼容IE6及所有其他浏览器、不使用JS的前提下：一个未知宽高的块元素如何在屏幕中水平垂直居中？需说明原理。
3、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间宽度固定，两侧宽度自适应屏幕？需说明原理。
4、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间自适应屏幕，两侧固定宽度，要求至少两种方式完成。
5、请在IE6下实现元素（如：DIV）中心点的旋转？
6、对于一个大型网站静态页面的制作，谈谈你对HTML结构的设计、CSS样式表规划及重用性的思考？

内容总结

以上是互联网集市为您收集整理的css3总结笔记_html/css_WEB-ITnose全部内容，希望文章能够帮你解决css3总结笔记_html/css_WEB-ITnose所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/407622.html

来源：【匿名】

【上一篇】给HTML初学者的30条最佳实践_html/css_WEB-ITnose 【下一篇】PHP 和 HTML

更多 ►

【css3总结笔记_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

HTML知识点总结

HTML知识点总结一、需要熟悉的基本快捷键ctrl+c 复制ctrl+v 粘贴ctrl+x 剪切ctrl+tab 切换（具体切换什么，要看是什么软件）alt+F4 关闭程序F2 重命名F5 刷新，比如看网页的时候，想刷新网页，按f5ctrl+z 撤销，就是这一步干错了，就ctrl+z撤销windows+E 打开资源管理器windows+D 显示桌面ctrl+空格切换中英文二、HT...

html5总结1

section标签表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等标签结合起来使用，表示文档结构。例：HTML5中 <section>……</section>HTML4中<div> ……</div>。article标签表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside标签表示article标签内容之外的、与article标签内容相关的辅助信息。header标签表示页面中一个内容区块或整个页面的标题。hgroup标签表示对整个页面或...

总结了一些HTML、CSS的一些简单特性，纯属个人笔记，非文章【代码】

总结了一些HTML、CSS的一些简单特性，纯属个人笔记，非文章前言个人总结了一些容易忘记的HTML、CSS特性，以备查漏补缺，读者朋友们有兴趣的可以看看，也当查漏补缺，但我已在标题中声明，此篇纯属个人笔记，非文章！HTMLtarget属性 target = "_self" (默认在当前页面打开链接) target = "_blank" (在新的浏览器窗口打开链接) 复制代码lable在html中，lable标签通常和input标签一起使用，label标签为input元素定义标注（标记）...

近段时间学习html和ＣＳＳ的一些细碎总结

1、边框圆角属性：border-radius，取值可以是百分比 / 自定义长度，不可以取负值。如果是圆，将高度和宽度设置相等，并且将border-radius设置为100% 2、IE6，IE7，IE8，opera，firfox-2.0等浏览器，不支持边框的圆角效果。我们可以用图片来做。 3、为了克服有的浏览器不能显示某些属性设置的效果，可以专门设置使其识别，如火狐浏览器是 -moz-,谷歌浏览器是 -webkit- ,应用如：-webkit-border-radius:100%; 4、属性元素如input，可...

关于innerHTML与innerTEXT的用法和总结

昨天看到一篇文章是关于innerTEXT()的用法，感觉特别新奇，什么时候js或者jQuery来的这么一个方法了？于是自己测试，最后上网大搜，结果是忽悠人的；innerTEXT()这种写法是不对的，也没有这类方法。后来经过测试，在原生js中倒是可以设置innerTEXT这个属性，类似jQuery的.data()方法，而且所有浏览器都支持。innerHTML是获取某个对象里面的所有HTML，包括文字和标签，这个属性方便、简单而且快速！例图为原文：http://www.cnblogs...

html5 audio总结【代码】【图】

前言　　html5中对音频,视频播放原生支持.最近做了一个音乐播放器,得益于快过年了,才能抽出一点时间来总结一下.总的来说,html5对audio的支持非常强大, 难怪flash要死.浏览器上装播放插件的时代已经接近尾声了.目前大多数浏览器都支持了大部分常用的api,ie8及其以前除外(万恶的ie啊).　　HTML5 音频虽然很健壮，但有其局限性，这主要取决于它的实现。对于音乐播放器（点唱机播放器）或简单的声音效果，它很有效，但是对于声音密集的...

atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform

atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform 1. Absoluti 布局（经常使用） 12. Flow 布局（不经常使用） 13. BorderLayout （不经常使用） 14. BoxLayout（ html默认布局） 25. CardLayout （tab 布局） 26. GridLayout 37. GridBagLayout 38. Fixed 定位（不经常使用） 3 1. Absoluti 布局（经常使用）Html中要把div 属性设置成absoluti.net 的默认布局C++ qt的默认布局简单方便...

HTML5学习总结——HTML5新增属性与表单元素【代码】【图】

一HTML5新增属性1.1contcxtmcnucontextmenu的作用是指定右键菜单。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare"></div><menu id="menuShare" type="context"><menuitem label="分享到QQ空间" onclick="alert(‘QQ‘);"></menuitem><menuitem label="分享到朋友圈" onclick="alert(‘朋友圈‘);"></menui...

HTML中table边框的显示总结

一、1、显示表格的4个边框：<table border frame=box>2、只显示上边框: <table border frame=above>3、只显示下边框: <table border frame=below>4、只显示上下边框: <table border frame=hsides>5、只显示左右边框: <table border frame=vsides>6、只显示左边框： <table border frame=lhs>7、只显示右边框： <table border frame=rhs>8、不显示任何边框： <table border frame=void>二、1、只显示列与列之间的分隔线：<table rul...

HTML选择器的使用和总结

一.基本选择器1.通配选择器：用【*】表示，<html><head><style type="text/css"><html><head><style type="text/css">*{ margin: 0; padding: 0; background-color:#999999; color:#FF0000;}div *{ margin: 0; padding: 0; background-color:#999999; color:#FF0000;}//只在div中起作用</style></head><body> <div> 长子div </div> 2.元素选择器：将某一元素的属性进行设置<html><head>...

HTML表格基础知识总结【图】

表格的基本就是一个框架，难点就是对表格的优化处理。<table frame="hsides" border="1" width="300px" height="100px" align="center" bordercolor="#00FF00"><caption>学生信息</caption><tr><th>学号</th><th>学号</th><th>学号</th></tr><tr id="bg"><th>123</th><th>123</th><th>123</th></tr></table>这一个最简单的表格；效果如下：至于表格的优化可以分为1.边界2.表格背景3.表格位置4.单元格间距，单元格边距。1.边界：b...

HTML5使用总结（一）

自己在“上海某985大学”待了四年，有蛮多的不舍。但是终究还是要离开。下面对这几年HTML5的使用做一个总结。总结是一种技术的沉淀。HTML5大家现在很火，它的标准已经出来。在标准还没有成型的时候，相信我们都已经开始使用HTML5的图表和研究HTML5的游戏引擎了。HTML5跨平台和轻量级，这是本人最喜欢的一点。虽然期间也考虑过Mono.大二（2009年）就开始使用HTML4.0,哪个时候为“页面动画效果、浏览器的兼容性、分辨率的设置”吐了多...

HTML5 Canvas核心技术图形、动画与游戏开发学习总结

save 和 restore 函数的应用保存canvas和恢复canvas clip函数的应用文字的绘制背景图片的绘制离屏canvas 基于时间的运动原文：https://www.cnblogs.com/qianduanjingying/p/8391125.html

[Java面试一]Spring总结以及在面试中的一些问题.（转发：http://www.cnblogs.com/wang-meng/p/5701982.html）【代码】【图】

1.谈谈你对spring IOC和DI的理解，它们有什么区别？IoC Inverse of Control 反转控制的概念，就是将原本在程序中手动创建UserService对象的控制权，交由Spring框架管理，简单说，就是创建UserService对象控制权被反转到了Spring框架DI：Dependency Injection 依赖注入，在Spring框架负责创建Bean对象时，动态的将依赖对象注入到Bean组件面试题： IoC 和 DI的区别？IoC 控制反转，指将对象的创建权，反转到Spring容器， DI 依赖注...

html简单总结

一、Html简介 HTML 是一种标记语言忽略大小写，语法宽松使用 HTML 标记和元素，可以：控制页面和内容的外观发布联机文档使用 HTML 文档中插入的链接检索联机信息创建联机表单，收集用户的信息、执行事务等等插入动画开发帮助文件 HTML 标记的格式组成： <ELEMENT ATTRIBUTE = value> ELEMENT: 元素 - 标识标记 ATTRIBUTE: 属性 - 描述标记 value:...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / css3总结笔记_html/css_WEB-ITnose

css3总结笔记_html/css_WEB-ITnose

内容导读

内容图文

属性选择器

结构性伪类

其它伪类

文字阴影

文字描边

新增文本功能

盒模型阴影

其他盒模型新增属性

Css3分栏布局

Css3响应式布局

移动端meta

圆角

边框

线性渐变

径向渐变

背景

遮罩

内容总结

内容备注

内容手机端

【css3总结笔记_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

CSS3 - 相关标签

HTML - 相关标签

WEB - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程