- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 08_03导航圆角背景应用
无标题文档body, ul { margin: 0; padding: 0;}li { list-style: none;}a { text-decoration: none;}body { background-color: #23232f; padding: 20px;}.nav { background: #0f0f14 url(img/navL.png)
2014-11-07 00:14:21
321
原创 08_02导航圆角背景2
无标题文档.menu { width: 221px; background: black;}/*btn不平铺，且拉伸。局限性：为导航选项宽度过大时，有缝隙。*/.btn { width: 71px; background:url(img/btnM.png) no-repeat; float: left; margin-left: 2px;}/*btnL删除*/.btnR
2014-11-06 21:57:02
297
原创 08_01导航圆角背景1
无标题文档.menu { width: 221px; background: black;}.btn { width: 71px; background: url(img/btn.png) repeat-x; float: left; margin-left: 2px;}.btnL { background: url(img/btnL.png) no-repeat;}
2014-11-06 21:48:39
317
原创 07_08表单Demo4
无标题文档*{ margin: 0; padding: 0; }table{ border-collapse:collapse;}th{ font-weight:normal;}form{ margin:50px auto; width: 600px; height: 625px; font-family:宋体;}/*控制列宽*/form table .col1{ width:
2014-09-23 20:00:57
263
原创 07_07表单Demo3
无标题文档 * { margin: 0; padding: 0;}img { border: none;}table { border-collapse: collapse;}body { background: #ffffff;}form { width: 522px; height: 575px; margin: 50px auto;}form tab
2014-09-20 01:01:19
324
原创 07_06表单Demo2
无标题文档body { margin: 0 auto;}img { border: none;}table { border-collapse: collapse; font: 12px 宋体; color: #333333;}th,td{padding: 0;}select,button{ margin: 0;}.all { width: 720px; mar
2014-09-15 14:07:26
282
原创 07_05表单Demo1
使用table来布局的演示* { margin:0; padding:0;}table { border-collapse:collapse;}input,select { font-family:Arial, Helvetica, sans-serif; font-size: 12px;}.required { font:0.8em Ver
2014-09-15 14:03:48
443
原创 07_04表单背景bug
无标题文档 /*默认样式重置*/ input{padding: 0;margin: 0;} .inputPic{width: 300px;height: 30px;border: 1px solid red; background: url(images/Pic.png) 0 center no-repeat; } .divPic{width: 300px;height: 30px
2014-08-26 16:28:48
372
原创 07_03简单表单
无标题文档<!--默认样式重置--> input {padding: 0;margin: 0;}select { margin: 0;}textarea { padding: 0; margin: 0;}form { width: 700px; height: 650px; border: 1px solid black;}span { border:
2014-08-26 16:27:19
261
原创 07_02.表格合并及实例
Document body { margin: 0;}img { border: 0;}table { border-collapse: collapse;}th, td { padding: 0;}.wrap { width: 385px; height: 272px;}.wrap .tit { width: 383px; height: 26px; b
2014-08-25 21:55:09
414
原创 07_01.简单表格
Document body{margin: 0;} /*去单元格间隙*/ table{border-collapse: collapse;width: 566px;height: 300px;text-align: center; } /*重置默认样式*/ th,td{padding: 0; border: 1px solid black;}
2014-08-25 18:22:54
232
原创 06_05.固定定位
Document body{height: 2000px;} .box1{width: 300px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;} /*固定定位：以当前可视文档为基准→→跟随滚动条移动，不以最近父级定位元素为基准*/ .father{width: 400px;height: 40
2014-08-24 00:46:57
309
原创 06_04.遮罩效果（滤镜+div）
Document body{margin: 0;} .cover{width: 100%;background: black; height: 100%;position: absolute;top: 0;left: 0;} /*滤镜*/ .cover{opacity: 0.5;} /*兼容IE7、8*/ .cover{filter:alpha(opacity:50);} /*
2014-08-23 22:18:43
925
原创 06_03.绝对定位实例
Document a{text-decoration: none;} .wrap{width: 300px;height: 300px;padding: 10px;border: 2px solid black;margin: 50px auto;position: relative;} .wrap a{width: 100px;background: #00bcff;height:
2014-08-23 01:50:23
309
原创 06_02.绝对定位absolute、层级
Document /* 1.元素设置position:absolute后，元素脱离文档流 2.元素设置position:absolute后，元素具有float的特性 3.元素设置position:absolute后，元素以最近的已设置position属性的父级元素为基准进行偏移；如没有符合条件的父级元素，则以整个文档为基准 4.层级用z-index:[number]设置，数
2014-08-22 00:34:54
4084
原创 06_01.相对定位relative
Document div{width: 200px;height: 100px;} .box1{width: 100px;background: red; position: relative;top: 100px;left: 100px;} .box2{background: green;} .box3{background: blue;}
2014-08-21 23:04:04
303
原创 05_04.IE6最小高度bug
Document /* bug：当元素高度小于19px，会被当做19px处理。 解决方法：如下注释部分。 */ .box{height: 1px;background: blue;/*overflow: hidden;*/}
2014-08-01 00:20:05
269
原创 05_03.IE6LI间隙bug
Document body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} a{text-decoration: none;} .list{width: 300px;} /* bug:当li内元素浮动后，li之间出现间隙。 解决方法：如下注释部分。 */ .list li{height:
2014-08-01 00:00:14
357
原创 05_02.IE6双边距bug
Document body{margin: 0;} .wrap{float: left;border: 10px solid red;background: yellow;} /* bug：当子块级元素有浮动且有横向margin值时，子块级元素在浮动方向的margin值，扩大两倍。 解决方法：如下注释部分↓↓ */ .box{float: left;wid
2014-07-31 22:55:04
453
原创 05_01.IE6同行元素浮动bug
Document.box{width: 400px;}/*div.right加浮动前，文字会与div.left有3px间隔*//*需求：几个div并在一排；解决：div.left浮动后，div.right也加浮动*/.left{width: 100px;background: red;height: 500px;float: left;}.right{width: 300p
2014-07-30 22:59:07
266
原创 04_03.清浮动
Document body{margin: 0;} .main{width:906px;border:5px solid black;margin:0 auto;} .main::after{content: "";display:block;clear:both;} .left{float:left;width:250px;border: 1px solid red;}
2014-07-24 21:06:19
364
原创 04_02.float简单布局
Document body{margin: 0 auto;} .main{width: 900px;margin: 0 auto;} .main .left{width: 300px;float: left;} .main .left div{height: 298px;background: green;border: solid 1px blue;} .main .ce
2014-06-01 19:30:52
318
原创 04_01.float
Document .a{width: 100px;height: 100px;background: red;float: left;} .a1{width: 50px;height: 50px;background: black;} .b{width: 200px;height: 200px;background: blue;} .b1{width: 120px;heig
2014-05-29 23:14:42
522
原创 03_03.inline-block
Document img{width: 100px;height: 50px;} div{display: inline-block;width: 100px;height: 100px;background: red;} span{display: inline-block;width: 100px;height: 100px;background: blue; } 1
2014-05-29 22:02:00
514
原创 03_02.块元素与内联元素
Document /*块元素*/ body,h1,h6,p,dl,dd{margin: 0;} h1{width: 100px;height: 100px;background: red;} p{width: 100px;height: 100px;background: blue;} ul,ol{margin: 0;padding: 0;} ul{width:
2014-05-29 20:46:57
472
原创 03_01.重置默认样式
Document body,h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0;} ul,ol{list-style: none; padding: 0; margin:0;} img{border: none;} a{text-decoration: none;} strong标签 em标签 span标签 a标签
2014-05-24 17:35:51
350
原创 02_05.a伪类
Document div{display: block;} div,ul,li{margin: 0;padding: 0;} ul{ list-style: none;} .menu{ width: 990px;height: 44px;background: #BE0000; margin: 0 auto; } .menu li{float: left; heigh
2014-05-24 14:51:42
261
原创 02_02.常见标签
p{ text-indent: 2em; } span{ font-weight: bold; } 标题1 该文字在p标签内，标签内通常为段落。其中：1.对浏览器重要的信息用strong标签着重表示并显示为加粗。 2.次要的信息用em标签着重表示并显示为斜体。 标题2 一段文字中，如需要控制其中
2014-05-17 22:02:54
330
原创 02_01.img标签
img{ width: 200px; height: 250px; } img标签使用src属性调用图片地址 当src地址写错时，如下图所示：（图片挂掉，并在图片上显示alt的属性值）
2014-05-15 23:27:19
261
原创 01_10.常见样式总结
1.width2.height3.border4.background5.padding6.margin7.font-family8.font-size9.color10.font-weight11.font-style12.text-decoration13.text-indent14.letter-spacing15.word-spacing16.text-align17.line-heigh
2014-05-15 21:34:30
337
原创 01_09.常见文本样式
1.常见文本样式对比 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。 我是正常的，我是正常的。
2014-05-15 20:34:25
386
原创 01_08.盒子box模型
box box实际宽：150px + 20px + 40px + 21px + 41px. box实际高：100px + 10px + 30px + 11px + 31px. #b1{ width: 150px; height: 100px; background:white; border:solid green; border-width: 10px 20px 30px
2014-05-14 23:13:09
285
原创 01_07.margin属性
第一类：两个box同级 第一种： m1,无margin m2,无margin 第二种： m3,margin-botoom：10px m4,无margin 第三种： m5,无margin m6,margin-top：10px 第四种： m7,margin-bottom：10px m8,margin-top：10px 第五种：
2014-05-14 22:16:06
305
原创 01_06.padding属性
1.box：150*150 我是内容，我外面是box，嘿嘿。。 2.box：150*150........padding:30px 我是内容（我好像胖了30px，把box挤大了.....） 3.box：90*90..........padding：30px box，你回到原来那样吧..我还是想念原来那个你.. 尽管回到了原来，但是我们之间还是有了距离。。。
2014-05-14 22:01:40
252
原创 01_05.border属性
1.设置border-style属性 2.只设置border-color、border-width属性（tip：如不设置border-type属性，默认为none） 3.设置border属性，完爆上面的属性 !!border属性有多个同类属性值时，其值遵循上、右、下、左的次序渲染。 4.设置上、右、下、左边框相同的属性 5.设置两类属性
2014-05-14 21:52:00
342
原创 01_04.background属性
1.默认背景 2.默认背景水平重复 3.默认背景垂直重复 4.默认背景不重复 （tip：如果水平、垂直任意一项规定了值，另一项为居中） 5.默认背景水平方向居左，垂直居下 6.默认背景垂直方向居上，水平居右 7.缩写
2014-05-14 21:37:42
332
原创 01_03.样式表嵌入方式
样式 /*内部样式表*/ #nbys{ width: 200px;height: 200px;background-color: green; } 这是一个box（被行间样式表控制） 这是另一个box（被内部样式表控制） 这是id为many的box，并且该.h
2014-05-14 21:17:59
348
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人