web 前端2 html css一些小问题技巧
html css一些小问题技巧
1 对于儿子块float后，父亲块如果没内容就不见了，如何让父亲块依然跟随飘起了的儿子块撑起来呢？？
用到的属性after方法 公共方法作为继承即可。
1.1 方法1 clear + visibility + height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: '111'; display: block; clear: both; visibility: hidden; /* 将块内的内容隐藏visiability隐藏占高度，display：none隐藏不占高度*/ height: 0; } /*.clearfix:after{*/ /*content: " ";*/ /*display: block;*/ /*clear: both;*/ /*}*/也可以这种写法 .c{ background-color:red; } .c .item{ float:left; width:30px; height: 70px; background-color: green; } </style> </head> <body> <div class='c clearfix'> <div class='item'>123</div> <div class='item'>456</div> </div> </body> </html>
1.2 方法2 overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ background-color:cadetblue; } .clearfix{ overflow: hidden; } .c .item{ float:left; width:30px; height: 30px; background-color: green; /*margin-top: 40px;*/ } .test{ background-color: cadetblue; } .test:after{ content: "后"; } .test:before{ content: '前'; } </style> </head> <body> <div class='c clearfix'> <div class='item'>123</div> <div class='item'>456</div> </div> <!--<div class="test">内容</div>--> </body> </html>
2 hover控制 其后代 儿子 兄弟变化
hover后面加选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ele{ background-color: #dddddd; border: 2px solid transparent;先设置好边框让它先是透明的。这样就不会有跳动感。 } .ele:hover{ border: 2px solid red; } .ele:hover .ele-item{ color: red; } </style> </head> <body> <div class="ele"> <div>123</div> <div class="ele-item">123</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ele{ height: 200px; width: 200px; overflow: hidden; /* 规定宽度高度后，如果内容超过大小就会隐藏非常重要*/ position: relative; /* 如果子块要用absolute父亲如果不用relative 则会导致 儿子会一直往上 找 一直找到html*/ } .ele .content{ background: rgba(0,0,0,.6); /*透明度 的表示 a 还可以用opacity*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; /*隐藏该标签的内容不显示*/ color: white; text-align: center; } .ele:hover .content{ /* 悬浮控制其内部元素 这里一定要是*/ visibility: visible; } .ele .content .c1{ font-size: 32px; padding: 30px 0; } .ele .content .c2{ font-size: 18px; color: red; font-weight: bold; } </style> </head> <body> <div class="ele"> <div class="img"><img src="1.jpg"></div> <div class="content"> dsfsa <div class="c1">Alex</div> <div class="c2">1000-2000</div> </div> </div> </body> </html>
hover控制 其后代 儿子 兄弟变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } /*.ss{*/ /*}*/ .bottom{ height: 40px; width: 500px; background-color: brown; border: 1px solid black; position: relative; /*z-index: 1;*/ } .wrapper{ background-color: black; height: 100px; width: 100px; opacity: 0.6; position: absolute; bottom: 0; top: 400px;; right: 0; left: 0; visibility: hidden; /*display: none;*/ /*z-index: 2;*/ } .content{ background-color: chartreuse; width: 200px; height: 200px; position: fixed; top:50%; left: 50%; margin-left: -100px; margin-top: -100px; visibility: hidden; /*display: none;*/ /*z-index: 3;*/ } .ss:hover .content{ visibility: visible; /*display: block;*/ } .bottom{ cursor: pointer; } .bottom:hover+.wrapper{ /*display: block;*/ visibility: visible; } </style> </head> <body> <div class="ss"> <div class="bottom"> <span>asddddd</span> </div> <div class="wrapper">水电费</div> <div class="content">范德萨</div> </div> </body> </html> hover控制 其后代 儿子 兄弟变化
3 fixed 区别 与 relative absolute
位置只有两种情况
fixed 固定在漂浮 以浏览器为边界
absolute一般结合relative 以relative为边界，如果某个定义了absolute的块的父亲没有relative就会向上找，一直找到html，如果遇不到relative
position_fixed_relative_absolute区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position 区别 fixed 和 relative absolute</title> <style> .boddd{ height: 2000px; min-width: 1000px; width: 100%; background-color: #9c9c9c; } .c1{ width: 600px; height: 50px; background-color: #3a1638; margin: 0 auto; } .c2{ width: 50px; height: 30px; background-color: goldenrod; } </style> </head> <body> <div class="boddd"> <div class="c1" style="position: relative"> <div class="c2" style="position: absolute;bottom: 3px;left: 70px"></div> </div> <div style="position: fixed;width: 90px;height: 90px;background-color: #1a66b3;bottom: 30px;right: 30px"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 2000px;background-color: red;"> <div style="position:relative;background-color: green;width: 500px;height:130px;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;width: 40px;height: 40px;background-color: pink;"> </div> </div> </div> <div style="position: absolute;right:10px;bottom:10px;width: 40px;height: 40px;background-color: violet"></div> </body> </html>
4 block 和inline-block区别
对于margin来说 margin-top 值为负值则向上飘，margin-left值为负时向左移动。加入某个div在浏览器顶部，使用了margin-top为负值：
block 则会往上飘 会消失一部分
inline-block 则不会动，前提是对body没有做margin操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div style="margin-top: -30px; display: inline-block">123</div> <div style="margin-top: -13px; display: block">123</div> </body> </html>
5 引用字体映射文件 font awesomes 文件 作为图标
引用字体映射文件 font awesomes 文件 作为图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css" /> </head> <body> <span class="fa fa-cut"></span> </body> </html> 引用字体映射文件 font awesomes 文件 作为图标
6 选项的正三角 倒三角变化显示
选项的正三角 倒三角变化显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid green; border-left: 30px solid transparent; display: inline-block; } .down{ border-top: 30px solid green; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; display: inline-block; } .c1{ border: 30px solid transparent; border-top: 30px solid blue; margin-top: 0px; display: inline-block; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid green; margin-top: -200px; } </style> </head> <body> <div style="background-color: red"> <span class="c1"></span> <span style="display: inline-block;margin-top: 10px;">1</span> <span>2</span> <span style="display: inline-block;">3</span> </div> <!--<span style="margin-top: 20px;">1111111</span>--> <!--<div style="margin-top: -20px;">123</div>--> <!--<div style="margin-top: -20px;">456</div>--> <style> </style> <div> <div class="menu"> <span>内容</span> <span class="icon"></span> <div class="content"> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 30px solid transparent; border-top:30px solid green; display: inline-block; margin-top: 40px; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid green; display: inline-block; margin-top: 10px; } </style> </head> <body> <div style="height: 100px;background-color: #1a66b3"> <div class="c1"> </div> </div> </body> </html>
我的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 20px solid transparent; border-top: 20px solid red; display: inline-block; /*!*border-left: transparent;*!再加一层透明，做出小三角*/ margin-top: 20px; /*计算好高度*/ } .c1:hover{ border: 20px solid transparent; border-bottom: 20px solid red; display: inline-block; /*border-left: transparent;*/ margin-top: 0; } </style> </head> <body> <div class="c1"> </div> </body> </html>
7 对于img标签 放在a标签内部 在ie浏览器内显示是有个蓝色的边框的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0;/*去掉图片的边框*/ } </style> </head> <body> <a href="http://www.etiantian.org">asdf</a> <a href="http://www.etiantian.org"> <img style="height: 300px;width: 400px;" src="1.jpg"> </a> </body> </html>
8 页面布局 后台管理通用 上、左、右结构。重要
除了标题顶部之外
左侧的 菜单选项 利用absolute并设置 一定固定宽度，
右侧利用absolute并设置left距离左侧的宽度，而右侧则为0即可沾满了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 ; } .pg-header{ height: 48px; background-color: #dddddd; } .pg-body .body-menu{ position: absolute; width: 180px; background-color: antiquewhite; left: 0; } .pg-body .body-content{ position: absolute; left: 182px; right: 0; background-color: blueviolet; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="body-menu"> <ul> <li>11</li> <li>11</li> <li>11</li> <li>11</li> </ul> </div> <div class="body-content"> ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> </div> </div> </body> </html>
9 visibility 的hidden 隐藏内部元素不会使其块高度发生变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 20px;visibility: hidden;">123</div> <div style="height: 20px;">345</div> <div style="height: 100px;background-color: red;overflow: auto;"> <h1>sdf</h1> </div> </body> </html>
10 承接第8个点， 后台管理右侧添加滚动条
overflow 为scroll 或者auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 ; } .pg-header{ height: 48px; background-color: #dddddd; } .pg-body .body-menu{ position: absolute; width: 180px; background-color: antiquewhite; left: 0; } .pg-body .body-content{ position: absolute; top: 48px; left: 182px; right: 0; bottom: 0; background-color: blueviolet; overflow: auto; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="body-menu"> <ul> <li>11</li> <li>11</li> <li>11</li> <li>11</li> </ul> </div> <div class="body-content"> <h1> </h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1> </div> </div> </body> </html>
11 提示按钮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>第一</td> <td>第二</td> <td> <div style="position: relative;"> <a>删除</a> <div style="position: absolute;left: 38px;top: -2px;"> <input type="button" value="确定" /> <input type="button" value="取消" /> </div> </div> </td> </tr> <tr> <td>第一</td> <td>第二</td> <td> <div style="position: relative;"> <a>删除</a> <div style="position: absolute;left: 38px;top: -2px;"> <input type="button" value="确定" /> <input type="button" value="取消" /> </div> </div> </td> </tr> <tr> <td>第一</td> <td>第二</td> <td>删除</td> </tr> <tr> <td>第一</td> <td>第二</td> <td>删除</td> </tr> <tr> <td>第一</td> <td>第二</td> <td>删除</td> </tr> <tr> <td>第一</td> <td>第二</td> <td>删除</td> </tr> <tr> <td>第一</td> <td>第二</td> <td> <div style="position: relative;"> <a>删除</a> <div style="position: absolute;left: 38px;top: -2px;"> <input type="button" value="确定" /> <input type="button" value="取消" /> </div> </div> </td> </tr> </table> </body> </html>
12 弹出的遮罩层的对话框
z-index 和 遮罩层透明度
两种透明表示 opacity 和 rgba
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .model{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); z-index: 2; } .content{ height: 300px; width: 400px; background-color: white; position: fixed; top: 50%; left:50%;先确定中心点位置。在移动 z-index: 3; margin-left: -200px; margin-top: -200px; } </style> </head> <body> <div style="height: 2000px;background-color: red"> <h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1> </div> <div class="model"></div> <div class="content"></div> </body> </html> 弹框
13 网页的搜索框内的小人或者小锁或者图片在input最右侧，而且输入不被其遮盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .user{ position: relative; width: 250px; } .user input{ height: 30px; width: 170px; padding-right: 30px;/*留出图标的位置*/ } .user .ren{ position: absolute; top: 8px; left: 180px; } </style> </head> <body> <div class="user"> <input type="text"> <span class="ren">R</span> </div> </body> </html> 搜索框的锁在框右侧
14 实现事件绑定使得input值加减
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid green; border-left: 30px solid transparent; display: inline-block; } .down{ border-top: 30px solid green; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; display: inline-block; } .c1{ border: 30px solid transparent; border-top: 30px solid blue; margin-top: 0px; display: inline-block; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid green; margin-top: -200px; } </style> </head> <body> <div style="background-color: red"> <span class="c1"></span> <span style="display: inline-block;margin-top: 10px;">1</span> <span>2</span> <span style="display: inline-block;">3</span> </div> <!--<span style="margin-top: 20px;">1111111</span>--> <!--<div style="margin-top: -20px;">123</div>--> <!--<div style="margin-top: -20px;">456</div>--> <style> </style> <div> <div class="menu"> <span>内容</span> <span class="icon"></span> <div class="content"> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </body> </html>
随记
随记
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
一、知识点的补充 1、 a. 一般情况 .c1 .item{} .c2 .item{} <div class='c1'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> <div class='c2'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> b. 公共插件 .box1{} <div> <div class='box1'> 2、clear:both 现象： div clear:both; 问题：不可能每次都在最后添加一个标签 ？？？：某个东西，帮助自动在最后添加标签 3、hover的应用 a. hover后加选择器 b. hover（oh） 4、position fixed 固定在屏幕的某个位置：top left ... relative absolute 5、小尖角 6、图标 图片(PS自己) css 自己画font（fontawsome） 7、a标签中嵌套图片(默认样式) 8、目录 day8 - app - s1.html - s2.hmtl - css - commons.css - script - commons.js - plugin - bootstrap - bxslider - ... 9、important 二、实例讲解 1、后台页面布局 overflow:auto; position: absolute; 2、提示框 边缘标签：relative，absolute 3、Tab display:none 4、登录 relative，absolute padding 5、html+css 6、bxslider 7、加减（JS） 三、答疑 |
加减框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: " "; display: block; visibility: hidden; } .left{ float: left; } .wrap{ width: 200px; height: 30px; background-color: #c0cddf; border: solid #000000 1px; } .minus{ height: 30px; width: 30px; border: none; text-align: center; line-height: 30px; cursor: pointer; } .plus{ height: 30px; width: 30px; border: none; text-align: center; line-height: 30px; cursor: pointer;手型。鼠标变手型 } .count input{ padding: 0; height: 30px; width: 138px; /*text-align: right;*/ /*text-align-last: right;*/ 新输入的内容靠右 border: none; border-right: solid black 1px; border-left: solid black 1px; } </style> </head> <body> <div class="wrap clearfix"> <div class="minus left">-</div> <div class="count left"> <input type="text"> </div> <div class="plus left">+</div> </div> </body> </html>
