html5+css 代码Word文档下载推荐.docx
《html5+css 代码Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《html5+css 代码Word文档下载推荐.docx（18页珍藏版）》请在冰点文库上搜索。
border-collapse:
collapse;
③列间隔行间隔:
border-spacing
border-spacing:
10px5px;
④文字水平对齐text-align--leftcenterright
table{text-align:
center;
⑤空单元格empty-cells:
hide隐藏空单元格show显示空单元格
table{empty-cells:
hide;
⑥表格居中
table{margin:
auto;
⑦垂直对齐vertical-align--topmiddlebottom
tabletrtd{
vertical-align:
top;
4.圆角问题：
border-bottom-left-radius:
;
border-bottom-right-radius:
border-top-left-radius:
border-top-right-radius:
border-radius:
10px0px0px10px;
5.伪类：
hover--鼠标悬停
tabletr:
hover{
background-color:
blue;
}--行悬停
tabletrtd:
}--每个表格悬停
tabletrth:
}--表头悬停
6.表头<
--th-->
th>
t1<
/th>
t2<
t3<
7.表格当中添加表格
tableclass="
t1"
td>
t2"
8.透明度：
.uname:
red;
opacity:
0.2;
9.焦点：
.pwd:
focus{
green;
width:
300px;
10.表单及表单控件:
action:
提交地址action="
"
提交当前页
method:
提交方式get-默认post-更加安全
formaction="
method="
post"
/form>
（1）<
--文本输入控件-->
inputtype="
text"
name="
uname"
value="
（2）<
--密码输入控件-->
password"
pwd"
pwd>
（3）<
--按钮控件-->
1）<
button>
登录<
/button>
2）<
button"
登录按钮"
but01"
（4）<
--提交按钮整体刷新-->
--ajax局部刷新
submit"
登录"
but02"
（5）<
--重置按钮-->
reset"
重置"
but03"
（6）<
--单选控件默认选中属性：
checked-->
--value="
不同"
相同"
radio"
nan"
r1"
男
nv"
女
（7）<
--复选控件默认选中属性：
爱好：
checkbox"
xx"
c1"
>
学习
yx"
游戏
sj"
睡觉
（8）<
--下拉列表multiple:
多选selected:
默认-->
城市：
selectmultiple>
optionclass="
p01"
selected>
北京<
/option>
上海<
哈尔滨<
/select>
（9）<
--多行文本控件-->
简介：
textarearows="
20"
cols="
30"
/textarea>
（10）<
--上传文件控件-->
上传文件：
file"
（11）<
--隐藏控件-->
hidden"
（12）
--html5表单控件-->
--email控件-->
email"
--网址-->
url"
--电话-->
tel"
--日期-->
date"
2016-01-01"
time"
datetime-local"
month"
week"
--<
datetime"
不好使-->
--数值控件-->
number"
--范围控件-->
range"
25"
min="
max="
100"
step="
1"
--颜色控件-->
color"
--搜索控件-->
search"
11.外边距
margin-leftmargin-rightmargin-topmargin-bottom
1）元素（盒子）垂直排列，margin上下合并，取最大值。
2）元素（盒子）水平排列，margin左右累加
margin允许有负值
margin:
20px;
四边
20px40px;
上下左右
20px180px200px;
上左右下
20px700px80px100px;
上右下左
12.内边距
padding-leftpadding-rightpadding-toppadding-bottom
padding不允许负值
padding:
50px;
30px40px;
20px20px40px;
20px40px20px40px;
13.加粗：
font-weight:
border100~900;
简写：
font:
italicbolder20pxarial;
（简写：
20pxarial必写顺序不能颠倒）
14.背景简写：
background:
redurl（"
）no-repeatfixedtop;
简写顺序可变
15.字体单位：
px像素
cm厘米
pt磅
in英寸
百分比对默认字体缩放（不同浏览器默认字体不同，默认最小字体也不同）
em字号倍数，相对于默认字体（父元素或浏览器）
//font-size:
2em;
//
//ptcmin200%原基础上放大50%原基础上缩小em成倍数放大//
16.使红框固定大小
label{
width:
100px;
border:
1pxsolidred;
display:
inline-block;
label>
email:
/label>
username:
17.表示label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点
labelfor="
inp01"
id="
18.颜色的表示方式
1）颜色名如red
2）rgb（）范围0-255redgreenblue黑：
rgb（0,0,0）白：
rgb（255,255,255）
rgb（255,0,0）
3）十六进制表示，如#fea230
#ff0000;
4）十六进制简写：
#223344简写为#234
#234;
19.背景图片定位
background-position:
topright;
url（"
images/1.jpg"
）no-repeattopright;
20.CSS3阴影
box-shadow:
（inset内阴影，省略为外阴影）水平偏移量，垂直偏移量，阴影模糊度，阴影大小，阴影颜色
10px10px10px10pxblack;
（外阴影）
inset10px10px10px10pxblack;
（内阴影）
21.伪类：
被选中（被激活）
.d01:
active{
background:
22.先隐藏，鼠标悬浮时显示（隐藏的模块必须被包含在悬停的模块里）
.d02{
/*隐藏*/
none;
hover.d02{
/*显示*/
block;
divclass="
d01"
d02"
/div>
23.line-height:
10px;
//行高
//与height所设值相同时，文字垂直居中
24.
块级元素：
与同级元素竖直排列，且左右撑满
如：
divullipdddtdl
行级元素：
与同级元素横向排列，且内容自适应，不会左右撑满
spanaimginput
spana：
宽高不能改变
imginput：
宽高能改变（特例）
标准流static：
css规定的默认的块级元素与行级元素的排列方式
display:
将当前元素转换为块级元素
inline;
将当前元素转换为行级元素
行级块元素
25.display与visibility区别？
display不占用空间（后元素补位）visibility占用空间（保留原元素空间）
//隐藏
//显示
visibility:
hidden;
visible;
26.浮动float:
left;
float:
right;
1）浮动的元素会脱离标准流
2）如前面有浮动元素，会依次排在后面
3）浮动是以标准流所在位置为起始点
4）同高度元素横向排满后，会被“挤”到下面
5）不同高度元素横向排满后，挤下后会被其他元素“卡”住
6）清除浮动：
clear:
both/left/right;
7）一个div的范围是由它里面的标准流决定的，与里面浮动的内容无关
27.绝对定位
1）position:
absolute;
leftrighttopbottom
2）对定位脱离标准流
3）绝对定位的元素是以它最近的一个已经定位的祖先元素为基准进行偏移
如果没有已经定位的祖先元素，则会以浏览器窗口为基准进行偏移
4）多个元素绝对定位，后面定位的元素的层级会高于前面（覆盖之前的元素）
5）z-index设定层级
28.相对定位
relative;
2）相对定位不脱离标准流
3）相对定位元素会相对于它原来的位置进行偏移，不受父元素影响
//相对定位、绝对定位允许负值
//相对定位、绝对定位对浮动元素依然有效
29.position:
static;
恢复标准流
30.<
--选项卡特效-->
.tab1_content{
.tab1:
hover.tab1_content{
tab1"
tab1
tab1_content"
31.<
--列表-->
列表类型
list-style-type:
circle;
空心
disc;
实心
square;
实心正方形
decimal;
数字
decimal-leading-zero；
零开头的数字标记
lower-roman;
小写罗马
upper-roman;
大写罗马
列表缩进
list-style-position:
inside;
列表图片
list-style-image:
url（"
简写顺序不能改变
list-style:
circleinsideurl（"
取消样式
--无序列表-->
ul>
li>
/li>
a2<
a3<
/ul>
--有序列表-->
ol>
b2<
b3<
/ol>
--定义列表-->
dl>
dt>
计算机图书<
/dt>
dd>
css计算<
/dd>
java应用<
幼儿图书<
365故事<
唐诗300<
/dl>
32.固定定位
fixed;
2）固定定位脱离标准流（只有相对定位不脱离标准流）
3）固定定位元素是以浏览器窗口或其他显示设备窗口为基准进行偏移
4）固定定位对浮动元素依然有效
33.盒子模型
34.盒子模型
一.
标准模式（严格模式strictmode）:
浏览器按w3c标准解析执行代码
怪异模式（兼容模式quirkmode）:
使用浏览器自己的方式解析执行代码
由于不同浏览器解析执行的方式不同
所以称之为怪异模式
二.如何检测当前执行模式
alert（;
输出：
css1compat标准模式
backcompat怪异模式（ie盒子模型：
实际宽度=width+margin）？
三.标准模式与怪异模式的区别
标准模式：
实际宽度=width+border+padding+margin
怪异模式：
实际宽度=width+border+margin
注意：
ie6\ie7\ie8在怪异模式下会以此方式显示
其他高级浏览器在怪异模式下依然以标准模式显示
实际宽度=width+border+margin
4.如何区别？
1.html5：
有<
DOCTYPEhtml>
表示为标准模式
2.html4：
（1）<
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01//EN
/html4/loose.dtd"
（2）<
-//W3C//DTDHTML4.01Transitional//EN
/html4/strict.dtd"
（3）<
-//W3C//DTDHTML4.01Frameset//EN
/html4/frameset.dtd"
五.
border：
占用空间
outline:
不占用空间
CSS框模型（BoxModel）规定了元素框处理元素内容、内边框、边框、外边框的方式
六.
html结构
css表现
35.html框架<
--过时-->
framesetcols="
20%,80%"
frame>
/frameset>
framesetrows="
定义name使超链接在定义mane的另一个模块中打开
36.内联框架
ahref="
images/2.jpg"
target="
if1name"
图片1<
/a>
test15.html"
网页2<
--内联框架-->
iframesrc="
class="
if1"
/iframe>
两个超链接点击后在名为if1name的内联框架中显示
37.<
--固定宽度布局-->
1）浮动法
.header,.footer,.container{
margin:
0auto;
.header,.footer{
400px;
height:
50px;
1pxsolid#ff0000;
left;
.container{
250px;
.content{
298px;
248px;
.side{
98px;
right;
2）定位法
position:
top:
0px;
left:
300px;
3）display法（table法）
table;
table-cell;
/head>
body>
header"
container"
content"
side"
footer"
/body>
/html>
38.变宽变高布局
/*比例法宽度百分比*/
.header,.footer{
80%;
1pxso
升级会员 