html5+css代码.docxVIP

1.css引用方式：①内联式style div{ color:red; }/style②行内式div style=color:green③外联式link href=css/css1.css rel=stylesheet④import方式style @import url(css/css1.css);/style2.相对路径：link href=css/css1.css rel=stylesheet ../返回上一级目录 绝对路径：link href=E:/web Test-43/css/css1.css rel=stylesheet表格：colspan 列合并 rowspan 行合并 cellspacing 单元格间距table cellspacing=0/tabletr td colspan=2a1/td!--行--/trtr td rowspan=2b1/td!--列--/tr①固定表格布局table{ table-layout:fixed;}②如何让表格边框为1px方法1：用边框的上下左右调整方法2：border-collapse:collapse 表格边框合并为单一边框 默认：separate style table{ border-collapse:collapse; } /style③列间隔 行间隔:border-spacing border-spacing:10px 5px;④文字水平对齐 text-align -- left center righttable{ text-align:center; }⑤空单元格 empty-cells:hide隐藏空单元格 show显示空单元格table{ empty-cells:hide; }⑥表格居中table{ margin: auto; }⑦垂直对齐 vertical-align -- top middle bottomtable tr td{ vertical-align:top; }4.圆角问题：border-bottom-left-radius: ;border-bottom-right-radius: ;border-top-left-radius: ;border-top-right-radius: ;border-radius: 10px 0px 0px 10px;伪类：hover--鼠标悬停table tr:hover{ background-color: blue;} --行悬停table tr td:hover{ background-color: blue;} --每个表格悬停table tr th:hover{ background-color:red;} --表头悬停6.表头!--th--tr tht1/th tht2/th tht3/th/tr表格当中添加表格table class=t1 trtd table class=t2 tr td/td /tr /table /td/tr/table透明度：.uname:hover{ background-color: red; opacity: 0.2;}9.焦点：.pwd:focus{ background-color: green; width: 300px;}10.表单及表单控件: action:提交地址 action=提交当前页 method:提交方式 get-默认 post-更加安全form action= method=post/form（1）!--文本输入控件--input type=text name=uname value=uname（2）!--密码输入控件--input type=password name=pwd value=pwd（3）!--按钮控件-- 1）button登录/button 2）input type=button value=登录按钮 name=but01（4）!--提交按钮 整体刷新-- --ajax 局部刷新input type=submit value=登录 name=but02（5）!--重置按钮--input type=reset value=重置 name=but03（6）!--单选控件 默认选中属性：checked-- --value=不同 name=相同input type=radio value=nan name=r1男input type=radio value=nv name=r1女（7）!--复选控件 默认选中属性：checked-- --value=不同 name=相同爱好：input type=checkbox value=xx name=c1 学习 input type=checkbox value=yx nam