htmlcss 代码

1、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");</style>2.相对路径：<link href="css/css1.css" rel="

2、;stylesheet"> ./返回上一级目录 绝对路径：<link href="E:/web Test-43/css/css1.css" rel="stylesheet">3. 表格：colspan 列合并 rowspan 行合并 cellspacing 单元格间距<table cellspacing="0"></table><tr> <td colspan="2">a1</td><!-行-></tr>

3、<tr> <td rowspan="2">b1</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;文字水平对

4、齐 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

5、: ;border-top-right-radius: ;border-radius: 10px 0px 0px 10px;5. 伪类：hover-鼠标悬停table tr:hover background-color: blue; -行悬停table tr td:hover background-color: blue; -每个表格悬停table tr th:hover background-color:red; -表头悬停6.表头<!-th-><tr> <th>t1</th> <th>t2</th> <th>

6、;t3</th></tr>7. 表格当中添加表格<table class="t1"> <tr><td> <table class="t2"> <tr> <td></td> </tr> </table> </td></tr></table>8. 透明度：.uname:hover background-color: red; opacity: 0.2;9.焦点：.pwd:focus backg

7、round-color: green; width: 300px;10.表单及表单控件: action:提交地址 action=""提交当前页 method:提交方式 get-默认 post-更加安全<form action="" method="post"></form>（1）<!-文本输入控件-><input type="text" name="uname" value="uname">（2）<!-密码输入控件->

8、;<input type="password" name="pwd" value="pwd>（3）<!-按钮控件-> 1）<button>登录</button> 2）<input type="button" value="登录按钮" name="but01">（4）<!-提交按钮 整体刷新-> -ajax 局部刷新<input type="submit" value="登录&qu

9、ot; name="but02">（5）<!-重置按钮-><input type="reset" value="重置" name="but03">（6）<!-单选控件 默认选中属性：checked-> -value="不同" name="相同"<input type="radio" value="nan" name="r1">男<input type=&qu

10、ot;radio" value="nv" name="r1">女（7）<!-复选控件 默认选中属性：checked-> -value="不同" name="相同"爱好：<input type="checkbox" value="xx" name="c1" >学习 <input type="checkbox" value="yx" name="c1" &

11、gt;游戏 <input type="checkbox" value="sj" name="c1" >睡觉（8）<!-下拉列表 multiple:多选 selected:默认->城市：<select multiple> <option class="p01" selected>北京</option> <option class="p01">上海</option> <option class="p0

12、1">哈尔滨</option> </select>（9）<!-多行文本控件->简介：<textarea rows="20" cols="30"></textarea>（10）<!-上传文件控件->上传文件：<input type="file">（11）<!-隐藏控件-><input type="hidden">（12）<!-html5表单控件-><form action=&q

13、uot;"> <!-email控件-> <input type="email"> <!-网址-> <input type="url"> <!-电话-> <input type="tel"> <!-日期-> <input type="date" value="2016-01-01"> <input type="time"> <input type=&

14、quot;datetime-local"> <input type="month"> <input type="week"> <!-<input type="datetime">不好使-> <!-数值控件-> <input type="number"> <!-范围控件-> <input type="range" value="25" min="0" m

15、ax="100" step="1"> <!-颜色控件-> <input type="color"> <!-搜索控件-> <input type="search"></form>11. 外边距margin-left margin-right margin-top margin-bottom 1）元素（盒子）垂直排列，margin上下合并，取最大值。 2）元素（盒子）水平排列，margin左右累加 margin允许有负值margin:20px; 四边ma

16、rgin:20px 40px; 上下 左右margin:20px 180px 200px; 上 左右 下margin:20px 700px 80px 100px; 上 右 下 左12. 内边距 padding-left padding-right padding-top padding-bottompadding 不允许负值padding:50px; 四边padding:30px 40px; 上下 左右padding:20px 20px 40px; 上 左右 下padding:20px 40px 20px 40px; 上 右 下 左13. 加粗：font-weight: border 1009

17、00;简写：font:italic bolder 20px arial ;（简写：20px arial 必写 顺序不能颠倒）14.背景简写：background: red url("") no-repeat fixed top;简写 顺序可变15.字体单位：px 像素cm 厘米pt 磅in 英寸百分比 对默认字体缩放（不同浏览器默认字体不同，默认最小字体也不同）em 字号倍数，相对于默认字体（父元素或浏览器）/font-size:2em;/pt cm in 200%原基础上放大 50%原基础上缩小 em成倍数放大/16.使红框固定大小labelwidth: 100px; b

18、order:1px solid red; display: inline-block;<label>email:</label><label>user name:</label>17.表示label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点<label for="inp01">email:</label><input type="text" id="inp01">18. 颜色的表示方式 1）颜色名 如red color:re

19、d; 2）rgb() 范围0-255 red green blue 黑：rgb(0,0,0) 白：rgb(255,255,255) color:rgb(255,0,0) 3）十六进制表示，如#fea230color:#ff0000; 4）十六进制简写：#223344简写为 #234 color:#234;19. 背景图片定位background-position:top right;简写：background:url("images/1.jpg") no-repeat top right;20.CSS3 阴影box-shadow:（inset内阴影，省略为外阴影）水平偏移量

20、，垂直偏移量，阴影模糊度，阴影大小，阴影颜色box-shadow: 10px 10px 10px 10px black; （外阴影）box-shadow:inset 10px 10px 10px 10px black; （内阴影）21. 伪类：被选中（被激活）.d01:active background: blue;22.先隐藏，鼠标悬浮时显示（隐藏的模块必须被包含在悬停的模块里）.d02 /*隐藏*/ display: none;.d01:hover .d02 /*显示*/ display: block;<div class="d01"> <div cl

21、ass="d02"></div> </div>23. line-height:10px; /行高 /与height所设值相同时，文字垂直居中24.块级元素：与同级元素竖直排列，且左右撑满 如：div ul li p dd dt dl行级元素：与同级元素横向排列，且内容自适应，不会左右撑满 如：span a img input span a：宽高不能改变 img input：宽高能改变（特例）标准流static：css规定的默认的块级元素与行级元素的排列方式display: block; 将当前元素转换为块级元素display: inline;

22、将当前元素转换为行级元素display: inline-block; 行级块元素25.display 与 visibility区别？display 不占用空间（后元素补位） visibility 占用空间（保留原元素空间） display: none; /隐藏 display: block; /显示 visibility: hidden; /隐藏 visibility: visible; /显示26.浮动 float:left; float:right; 1)浮动的元素会脱离标准流 2)如前面有浮动元素，会依次排在后面 3)浮动是以标准流所在位置为起始点 4)同高度元素横向排满后，会被“挤”到

23、下面 5)不同高度元素横向排满后，挤下后会被其他元素“卡”住 6)清除浮动：clear:both/left/right; 7)一个div的范围是由它里面的标准流决定的，与里面浮动的内容无关27.绝对定位 1)position: absolute; left right top bottom 2)对定位脱离标准流 3)绝对定位的元素是以它最近的一个已经定位的祖先元素为基准进行偏移 如果没有已经定位的祖先元素，则会以浏览器窗口为基准进行偏移 4)多个元素绝对定位，后面定位的元素的层级会高于前面（覆盖之前的元素） 5)z-index 设定层级28.相对定位 1)position: relative;

24、 left right top bottom 2)相对定位不脱离标准流 3)相对定位元素会相对于它原来的位置进行偏移，不受父元素影响 /相对定位、绝对定位允许负值 /相对定位、绝对定位对浮动元素依然有效29. position:static; 恢复标准流30. <!-选项卡特效-><style>.tab1_content display: none;.tab1:hover .tab1_content display: block;<style><div class="tab1"> tab1 <div </div&g

25、t;31.<!-列表->列表类型list-style-type: circle;空心list-style-type: disc;实心list-style-type: square;实心正方形list-style-type: decimal;数字list-style-type: decimal-leading-zero；零开头的数字标记list-style-type: lower-roman;小写罗马list-style-type: upper-roman;大写罗马列表缩进list-style-position: inside;列表图片list-style-image: url(&q

26、uot;images/1.jpg");简写 顺序不能改变list-style:circle inside url("images/1.jpg");取消样式list-style: none;<!-无序列表-><ul> <li>a111111111</li> <li>a222222222</li> <li>a333333333</li></ul><!-有序列表-><ol> <li>b111111111</li> &

27、lt;li>b222222222</li> <li>b333333333</li></ol><!-定义列表-><dl> <dt>计算机图书</dt> <dd>css计算</dd> <dd>java应用</dd> <dt>幼儿图书</dt> <dd>365故事</dd> <dd>唐诗300</dd></dl>32.固定定位 1)position: fixed; le

28、ft right top bottom 2)固定定位脱离标准流（只有相对定位不脱离标准流） 3)固定定位元素是以浏览器窗口或其他显示设备窗口为基准进行偏移 4)固定定位对浮动元素依然有效33.盒子模型34. 盒子模型一.标准模式（严格模式strictmode）:浏览器按w3c标准解析执行代码怪异模式（兼容模式quirkmode）:使用浏览器自己的方式解析执行代码 由于不同浏览器解析执行的方式不同 所以称之为怪异模式二.如何检测当前执行模式alert(patMode);输出：css1compat 标准模式 backcompat 怪异模式 (ie盒子模型：实际宽度=width+margin)？三.

29、标准模式与怪异模式的区别标准模式：实际宽度=width+border+padding+margin怪异模式：实际宽度=width+border+margin 注意：ie6ie7ie8在怪异模式下会以此方式显示 其他高级浏览器在怪异模式下依然以标准模式显示 实际宽度=width+border+margin4. 如何区别？ 1.html5：有<!DOCTYPE html>表示为 标准模式 2.html4： (1)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN /TR/html4/loose.dt

30、d"> (2)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN /TR/html4/strict.dtd"> (3)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Frameset/EN /TR/html4/frameset.dtd">五.border：占用空间outline:不占用空间CSS框模型（Box Model）规定了元素框处理元素 内容、

31、内边框、边框、外边框 的方式六.html结构css表现35.html框架 <!-过时-><frameset cols="20%,80%"> <!-列-><frame></frameset><frameset rows="20%,80%"> <!-行-><frame></frameset><frame>定义name 使超链接在定义mane的另一个模块中打开36.内联框架<a href="images/2.jpg"

32、 target="if1name">图片1</a><a href="test15.html" target="if1name">网页2</a><!-内联框架-><iframe src="images/1.jpg" class="if1" name="if1name"></iframe>两个超链接点击后在名为if1name的内联框架中显示37.<!-固定宽度布局-> <style&g

33、t; 1)浮动法 .header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; float: left; .container width: 400px; height: 250px; .content width: 298px; height: 248px; border: 1px solid #ff0000; float: left; .side width: 98px; height: 248px; border: 1px s

34、olid #ff0000; float: right; 2)定位法 .header,.footer,.container margin:0 auto; .header,.footer,.container width: 400px; height: 50px; border: 1px solid #ff0000; position: relative; top:50px; .container width: 400px; height: 250px; position: relative; top:50px; .content width: 298px; height: 248px; bord

35、er: 1px solid #ff0000; position: absolute; top:0px; left:0px; .side width: 100px; height: 248px; border: 1px solid #ff0000; position: absolute; top:0px; left:300px; 3)display法（table法） .header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; .co

36、ntainer width: 400px; height: 250px; border: 1px solid #ff0000; display: table; .content border: 1px solid #ff0000; display: table-cell; .side border: 1px solid #ff0000; display: table-cell; </style></head><body><div class="header"></div><div class="container"> <