a1 t1 t2 t3
7. 表格当中添加表格
8. 透明度 :
. uname:hover{ background -color : red; opacity: 0.2; }
9. 焦点 : .pwd:focus{
backgr ound -color : green ; width: 300px; }
10. 表单及表单控件 : action: 提交地址 action="" 提交当前页 method: 提交方式 get- 默认 post- 更加安全
( 1 ) value ="uname">
( 2 ) type="password" name="pwd" value =" pwd >
( 3 ) 1 ) 登录 2 )
( 4 ) -- ajax 局部刷新
( 5 ) " 重置 " name="but0 3 ">
( 6 ) -- value=" 不同 " name=" 相同 " 男 女
( 7 ) -- value=" 不同 " name=" 相同 " 爱好: name=" c1" > 学习 name="c1" > 游戏 name="c1" > 睡觉
( 8 ) 城市: multiple > 北京 上海 哈尔滨
( 9 ) 简介:
( 10 ) 上传文件:
( 11 )
( 12 )
>
>
< input type="search">
11. 外边距 margin-left margin-right margin-top margin-bottom 1 ) 元素(盒子)垂直排列, margin 上下合并,取最大值。 2 ) 元素(盒子)水平排列, margin 左右累加 margin 允许有负值
margin:20px; 四边 margin:20px 4 0px; 上下 左右 margin:20px 180px 200px; 上 左右 下 margin :20px 700px 80px 100px; 上 右 下 左
12. 内边距
padding-left padding-right padding-top padding-bottom
padding 不允许负值
padding:50px; 四边 padding:30px 40px; 上下 左右 padding:20px 20px 4 0px; 上 左右 下 padding:20px 4 0px 20px 4 0px; 上 右 下 左
13. 加粗:
font-weight: border 100~ 900;
简写:
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. 使红框固定大小
label{
width: 100px; border:1px solid red; display: inline-block; }
email:
user name:
17. 表示 l abel 标签 要绑定的 HT ML 元素 , 你点击这个标签的时候 , 所绑定的元素将获取焦点
email: type="text" id="inp01">
18. 颜色的表示方式 1 ) 颜色名 如 red
color:red; 2 ) rgb() 范围 0-255 red green blue 黑: rgb(0,0,0) 白: rgb(255,255,255)
color:rgb(255,0,0) 3 ) 十六进制表示,如 #fea230
color:#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 10px black; ( 内阴影 )
21. 伪类:被选中(被激活) .d01:active{ background: blue; }
22. 先隐藏,鼠标悬浮时显示(隐藏的模块必须被包含在悬停的模块里)
.d02{ /* 隐藏 */ display: none; } .d01:hover .d02{ /* 显示 */ display: block; }
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; 将当前元素转换为行级元素 display: inline-block; 行级块元素
25. display 与 visibility 区别? display 不占用空间(后元素补位) visibility 占用空间(保留原元素空间) display: none; // 隐藏 display: block; // 显示 visibility: hidden; // 隐藏
visibility: visi ble; // 显示
26. 浮动 float:left;
f loat:right; 1 ) 浮动的元素会脱离标准流 2 ) 如前面有浮动元素,会依次排在后面 3 ) 浮动是以标准流所在位置为起始点 4 ) 同高度元素横向排满后,会被“挤”到下面 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; left right top bottom 2 ) 相对定位不脱离标准流 3 ) 相对定位元素会相对于它原来的位置进行偏移,不受父元素影响 // 相对定位、绝对定位允许负值 // 相对定位、绝对定位对浮动元素依然有效
29. position:static ; 恢复标准流
30.
.tab 1 _content{ display: none; } .tab1:hover .tab1_content{ display: block; }
tab1 class="tab1_content">11111111111
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("images/1.jpg"); 简写 顺序不能改变 list-style:circle inside url("images/1.jpg"); 取消样式 list-style: none;
a111111111 a222222222< /li> a333333333 b111111111 b222222222 b333333333 计算机图书 css 计算 java 应用 幼儿图书 365 故事 唐诗 300
32. 固定定位 1 ) position: fixed; left right top bottom 2 ) 固定定位脱离标准流(只有相对定位不脱离标准流) 3 ) 固定定位元素是以浏览器窗口或其他显示设备窗口为基准进行偏移 4 ) 固定定位对浮动元素依然有效
33. 盒子模型
34. 盒子模型 一 . 标准模式(严格模式 strictmode ) : 浏览器按 w3c 标准解析执行代码 怪异模式(兼容模式 quirkmode ) : 使用浏览器自己的方式解析执行代码 由于不同浏览器解析执行的方式不同 所以称之为怪异模式 二 . 如何检测当前执行模式 alert(window.top.document.compatMode); 输出: css1compat 标准模式 backcompat 怪异模式 (ie 盒子模型:实际宽度 =width+margin) ? 三 . 标准模式与怪异模式的区别 标准模式:实际宽度 = width+border+padding+margin 怪异模式:实际宽度 =width+border+margin 注意: ie6\ie7\ie8 在怪异模式下会以此方式显示 其他高级浏览器在怪异模式下依然以标准模式显示 实际宽度 =width+border+margin
4. 如何区别? 1.html5 :有 表示为 标准模式 2.html4 : (1) (2) (3)
五 . border :占用空间 outline: 不占用空间 CSS 框模型( Box Model )规定了元素框处理元素 内容、内边框、边框、外边框 的方式
六 . html 结构 css 表现
35. html 框架 < frameset rows="20%,80%"> 定义 name 使超链接在定义 mane 的另一个模块中打开
36. 内联框架
图片 1 网页 2
两个超链接点击后在名为 if1name 的内联框架中显示
37. 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 solid #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; border: 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,.foot er,.container{ margin:0 auto; } .header,.footer{ width: 400px; height: 50px; border: 1px solid #ff0000; } .container{ 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-ce ll; }