html5+css-代码

《html5+css-代码》由会员分享，可在线阅读，更多相关《html5+css-代码（25页珍藏版）》请在装配图网上搜索。

1、I.css引用方式：内联式<style>divcoloured;</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="sty

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

3、;tr><td rowspan="2">b1</td><!-歹！J-></tr>固定表格布局 tabletable-layoutfixed;如何让表格边框为1px方法1:用边框的上下左右调整方法2： border-collapse:collapse表格边框合并为单一边框默认：separate<style> tableborder-collapse:collapse;</style>列间隔 行间隔:border-spacing border-spacing:10Px 5px;文字水平对齐 text-

4、align - left center right table text-align:center; 空单元格empty-cells:hide隐藏空单元格show显示空单元格table empty-cells:hide; 表格居中table margin: auto; 垂直对齐 vertical-align - top middle bottomtable tr tdvertical-align:top; 4 .圆角问题：border-bottom-left-radius:;border-bottom-right-radius:;border-top-left-radius:;border-t

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

6、t;/tr>7 .表格当中添加表格<table class="t1"><tr><td><table class="t2"><tr><td></td></tr></table></td></tr></table>8 .透明度：.uname:hoverbackground-color: red; opacity: 0.2;)9 .焦点：.pwd:focusbackground-color: green;widt

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

8、sword" name="pwd" value="pwd>(3) <!-按钮控件->1 ) <button> 登录 </button>2 ) <input type="button" value="登录按钮"name="but01">(4) <!-提交按钮整体刷新->-ajax局部刷新<input type="submit" value=" 登录"name="but02”&g

9、t;(5) <!-重置按钮->重置"name="but03"><input type="reset" value="不同"name="相同"不同"name="相同"学习游戏睡觉(6) <!-单选控件 默认选中属性：checked-value="<input type="radio" value="nan" name="r1"> 男<input type=&qu

10、ot;radio" value="nv" name="r1"> 女(7) <!-复选控件默认选中属性：checked-value=" 爱好：<input type="checkbox" value="xx" name="c1" ><input type="checkbox" value="yx" name="c1" ><input type="checkbox&qu

11、ot; value="sj" name="c1" >(8) <!-下拉列表 multiple: 多选 selected: 默认-> 城市：select multiple<option class="p01" selected>北京 </option><option class="p01"> 上海 </option>哈尔滨</option><option class="pO1"></select>

12、(9) <!多行文本控件>简介：<textarea rows="20" cols="30"></textarea>(10) <!-上传文件控件>上传文件:<input type="file">(11) <!-隐藏控件><input type="hidden">(12)<!-html5 表单控件<form action=""><!-email 控件<input type="e

13、mail"><! 网址<input type="url"><! 电话<input type="tel"><!- 日期<input type="date" value="2016-01-01"><input type="time"><input type="datetime-local"><input type="month"><input typ

14、e="week"><!-<input type="datetime"> 不好使一<!-数值控件<input type="number"><!-范围控件-><input type="range" value="25" min="0" max="100" step="1"><!- 颜色控件-><input type="color">

15、<!- 搜索控件-><input type="search"></form>11.外边距margin-left margin-right margin-top margin-bottom1 ）元素（盒子）垂直排列，margin上下合并，取最大值。2 ）元素（盒子）水平排列，margin左右累加margin 允许有负值margin:20px;四边margin:20Px 40px; 上下左右margin:20Px 180px 200px; 上左右下margin:20px 700px 80px 100px; 上右下左12 .内边距padding

16、-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 100900;简写：font:italic bolder 20Px arial ;（简写：20Px arial 必写 顺序不能颠倒）14 .背景简写：background: red url（""） no-r

17、epeat fixed top;简写 顺序可变15 .字体单位：px像素cm厘米pt磅in英寸百分比 对默认字体缩放（不同浏览器默认字体不同，默认最小字体也不同）em字号倍数，相对于默认字体（父元素或浏览器）/font-size:2em;/pt cm in 200% 原基础上放大50%原基础上缩小em成倍数放大16 .使红框固定大小labelwidth: 100px;border:1px solid red;display: inline-block;<label>email:</label><label>user name:</label>en

18、iail:Ls巳r门am巳二17 .表示label标签要绑定的HTM沅素，你点击这个标签的时候,所绑定的元素将 获取焦点<label for="inp01">email:</label><input type="text" id="inp01">18 .颜色的表示方式1 ）颜色名如redcolor:red;2 ）rgb（） 范围 0-255 red green blue 黑：rgb（0,0,0） 白：rgb（255,255,255）color:rgb（255,0,0）3 ）十六进制表示，如#fea2

19、30color:#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内阴影，省略为外阴影）水平偏移量，垂直偏移量，阴影模糊度，阴影大小，阴影颜色box-shadow: 10px 10px 10px 10px black;（外阴影）box-shadow:inset 10px 10px 10px 10

20、px black;（内阴影）21 .伪类：被选中（被激活）.d01:activebackground: blue;22 .先隐藏，鼠标悬浮时显示（隐藏的模块必须被包含在悬停的模块里）.d02/* 隐藏*/display: none;.d01:hover .d02/* 显示*/display: block;<div class="d01"> <div class="d02"></div> </div>23.line-height:10px; / 行高/与height所设值相同时，文字垂直居中24 .块级元素：

21、与同级元素竖直排列，且左右撑满如：div ul li p dd dt dl行级元素：与同级元素横向排列，且内容自适应，不会左右撑满如：span a img inputspan a :宽高不能改变img input:宽高能改变（特例）标准流static : css规定的默认的块级元素与行级元素的排列方式display: block;将当前元素转换为块级元素display: inline;将当前元素转换为行级元素display: inline-block;行级块元素25 .display 与 visibility 区别？display 不占用空间（后元素补位）visibility占用空间（保留原元

22、素空间）display: none; / 隐藏display: block; / 显示visibility: hidden; /隐藏visibility: visible; /显示26 .浮动 float:left;float:right;1）浮动的元素会脱离标准流2）如前面有浮动元素，会依次排在后面3）浮动是以标准流所在位置为起始点4）同高度元素横向排满后，会被“挤”到下面5）不同高度元素横向排满后，挤下后会被其他元素“卡”住6）清除浮动：clear:both/left/right;7） 一个div的范围是由它里面的标准流决定的，与里面浮动的内容无关27 .绝对定位1）position: a

23、bsolute; left right top bottom2）对定位脱离标准流3）绝对定位的元素是以它最近的一个已经定位的祖先元素为基准进行偏移如果没有已经定位的祖先元素，则会以浏览器窗口为基准进行偏移4）多个元素绝对定位，后面定位的元素的层级会高于前面（覆盖之前的元素）5）z-index设定层级28 .相对定位1）position: relative; left right top bottom2）相对定位不脱离标准流3）相对定位元素会相对于它原来的位置进行偏移，不受父元素影响/相对定位、绝对定位允许负值/相对定位、绝对定位对浮动元素依然有效29 .position:static;恢复标准

24、流30 .<!-选项卡特效-><style>.tab1_contentdisplay: none;.tab1:hover .tab1_contentdisplay: block;<style><div class="tab1">tabi<div class="tab1_content”>11111111111v/div></div>31 .<!-列表->列表类型list-style-type: circle;空心list-style-type: disc; 实心list-st

25、yle-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("images/1.jpg");简写顺序不能改变list-style:circle inside url("images/1.jp

26、g");取消样式list-style: none;<!-无序列表-><ul><li>a111111111</li><li>a222222222</li><li>a333333333</li></ul><!-有序列表-><ol><li>b111111111</li><li>b222222222</li><li>b333333333</li></ol><!-定义列表-&

27、gt;<dl><dt> 计算机图书</dt><dd>css 计算 </dd><dd>java 应用 </dd><dt> 幼儿图书</dt><dd>365 故事 </dd><dd> 唐诗 300</dd></dl>32 .固定定位1）position: fixed; left right top bottom2）固定定位脱离标准流（只有相对定位不脱离标准流）3）固定定位元素是以浏览器窗口或其他显示设备窗口为基准进行偏移4）固定定位

28、对浮动元素依然有效33 .盒子模型盒子模型marain toomaraln-leftborder-topbar-leftpaddina-tODma rain-ria httestoaddina-leftbedeiJhtborder-bottommarain-bottom-标准盒子模型margin topborder-toppadding-topcontentpadding bottomborde7nghtborder-bottommargin-bottomwidth-IE盒子模型ma 而sA.ghtmargin topborder-topdcfing topcontentpadding bot

29、tomborder-bottommargin-bottomwidthborder.rightEdd -ngOKbcrde 工 eHCSS悔模型（Box Model）想定了元素底处理元素沟的还工整31y的庄心CSS框模型概述border 边框）margin建卜边距padding （内边距）hfrtgihi信度）element阮素）晒曲th34.盒子模型标准模式（严格模式strictmode ）:浏览器按w3c标准解析执行代码怪异模式（兼容模式quirkmode）:使用浏览器自己的方式解析执行代码 由于不同浏览器解析执行的方式不同 所以称之为怪异模式二.如何检测当前执行模式alert（patMod

30、e）;输出：csslcompat 标准模式backcompat怪异模式（ie 盒子模型：实际宽度=width+margin） ?三.标准模式与怪异模式的区别标准模式：实际宽度=width+border+padding+margin怪异模式：实际宽度=width+border+margin注意：ie6ie7ie8在怪异模式下会以此方式显示其他高级浏览器在怪异模式下依然以标准模式显示实际宽度=width+border+margin四.如何区别？1 .html5 : <<!DOCTYPE html>g示为 标准模式2 .html4(1)<!DOCTYPE HTML PUBLI

31、C "-/W3C/DTD HTML 4.01/EN ">(2)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN ">(3)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Frameset/EN ">border :占用空间outline: 不占用空间CSSIf模型(Box Model)规定了元素框处理元素内容、内边框、边框、外边框的方式六.html结构 css表现35 .html 框架 <!-过

32、时-><frameset cols="20%,80%”> <!-歹！J-><frame></frameset><frameset rows="20%,80%"> <!- 行-><frame></frameset><frame>定义name使超链接在定义mane的另一个模块中打开36 .内联框架<a href="images/2.jpg" target="if1name"> 图片 1</a>

33、<a href="test15.html" target="if1name”> 网页 2</a><!-内联框架-><iframe src="images/1.jpg" class="if1" name="if1name"></iframe>两个超链接点击后在名为iflname的内联框架中显示37 .<!-固定宽度布局-><style>38 浮动法.header,.footer,.containermargin:。auto;

34、.header,.footerwidth: 400px;height: 50px;border: 1px solid #ff0000;float: left;.containerwidth: 400px;height: 250px;.contentwidth: 298px;height: 248px;border: 1px solid #ff0000;float: left;.side width: 98px;height: 248px;border: 1px solid #ff0000;float: right;39 定位法.header,.footer,.container margin:

35、。auto;.header,.footer,.containerwidth: 400px;height: 50px;border: 1px solid #ff0000;position: relative;top:50px;.containerwidth: 400px;height: 250px;position: relative;top:50px;.contentwidth: 298px;height: 248px;border: 1px solid #ff0000;position: absolute;top:0px;left:0px;.side width: 100px;height:

36、 248px;border: 1px solid #ff0000;position: absolute;top:0px;left:300px;3)display 法(table 法).header,.footer,.containermargin:0 auto;.header,.footerwidth: 400px;height: 50px;border: 1px solid #ff0000;.containerwidth: 400px;height: 250px;border: 1px solid #ff0000; display: table;.contentborder: 1px sol

37、id #ff0000; display: table-cell;.side border: 1px solid #ff0000; display: table-cell;</style></head><body><div class="header"></div><div class="container"><div class="content"></div><div class="side"></d

38、iv></div><div class="footer"></div></body></html>38.变宽变高布局/*比例法宽度百分比*/.header,.footerwidth: 80%;height: 100px;border: 1px solid #000000;margin: 0 auto;/*高度自适应布局*/.contentwidth: 80%;margin: 0 auto;border: 1px solid #000000;float: left;/* 最小高度*/min-height: 30

39、0px;/* 最大高度*/max-height: 500px;39.变宽布局/*单侧变宽布局*/*定位法-适合高度等高的元素*/.header,.footerwidth: 80%;height: 100px;border: 1px solid #000000;margin: 0 auto;.containerwidth: 80%;height: 400px;margin: 0 auto;position: relative; 相对定位.contentwidth: 50%;height: 400px;border: 1px solid #000000;margin: 0 300px 0 0;.s

40、idewidth: 300px;height: 600px;border: 1px solid #000000;position: absolute; /绝对定位top:0;right: 0;/*高度不一致-浮动法*/.content_wrapwidth: 100%;height: 400px;float: left;margin-left: -300px;.contentheight: 400px;border: 1px solid #008000;margin-left: 300px;.sidewidth: 296px;height: 450px;border: 1px solid #000000;float: right;<div class="content_wrap"><div class="content"></div></div><div class="side"></div>40.