Python学习-day14-前台总结
以下博客为转载
http://www.cnblogs.com/evilliu/p/5760232.html
一：针对上节作业：
1：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAAzCAIAAAAy3ow+AAABmklEQVR4nO3YsWqDUBTGcR/sLJnyCO4dXDvYNVkyZRE6ZHYq9AUkayanhqCDEKGDULkQ6At0uR2spRdyrTVXPff2+w8ShIiHHwcTPYn45c19A+hK3vl8llLiyOqIXeEYVDgGFY5BhWNQ4RhUOAYVjkGFY1DhGFQ4BhWODVR5QYMaXeXdaP3veLJmnBEq2qACFSWoaIMKVJSgog0qUFFyTeX1+SHYnYxcqteMIo188qNUGJ3RKZUPcXi8DyZVSbdERLRNTcxIRM0HZ1ROu6DNchUickalSexXtqp8L8oIKhdRv+mqxcUNlSpLD1/FIRERhXF7Is0qZip1mR87X84d81LzWLRIpXi6o678OPvzjM03ZWtjVKXMf31pmpfWq1TJetmBslwnmm3puSvSsIr4F7uiNMJzRTr0G6zJepVm36CiDbtir0q0IKJFBJWr/fgX2bTai9uu2G/GItmEm6S4fUYnVcw38YxQ6dWMM0JFG1SgogQVbVCBihJUtFmpggY0rgoaNahwDCocgwrHoMIxqHAMKhyDCsegwrFPQvqu2Gn1PGMAAAAASUVORK5CYII=" alt="" />实现：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 border: 0;
9 border-left: solid red 1px;
10 border-right: solid red 1px;
11 height: 16px;
12 float: left;
13 margin-bottom: 0;
14 width: 40px;
15 text-align: center;
16 }
17 .b{
18 width: 85px;
19 height: 19px;
20 border: solid red 1px;
21 }
22 a{
23 text-align: center;
24 display: inline-block;
25 width: 20px;
26 line-height: 20px;
27 margin: 0;
28 float: left;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="b">
34 <a>+</a>
35 <input class="a" type="text" value="1"/>
36 <a>-</a>
37 </div>
38 </body>
39 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAA1CAIAAAD6Tl+QAAACU0lEQVR4nO2ZPW7bQBCF9yYpcwwfwaXLHCFH8RFcCnCKHCE9CSFlgLhIs/OGlSOnUckU+0/JkiVT9jB5H2iJ3Jl9u8sPbmynqqpQhC8FVKGAJlDda27T6dhx2hxMZx1IQd4jmkbsTNoTcubRhmHYbDY/Hx7W63V/jK5rHrpp+cDM+Nn1XdPY9V3fu3BeKAAo8isI+w4PsYowXHWlnlgKXakXimYoj+9E5heXSzG9CgqvEdUrLhtKIeUU5TivONow6O/Hx6enP++FA0QgQPkAAIk/4StXpBqNN/FeABEBROpRxHHJoSm7akOc2i6bS9VqEjfbTq4aZbLNZR/NxSGBxIXiViQTFgh39XiuC9LM/FBqbStyfz2/DOXJcc0qqMS36ahvptta9NGceBHvxXvxIuLDk4iIL0t4771IvmLRi/hYSrWS4n2eH+qpLcanVvEpqywUZ+XkmhIrJcCne0nbiIss+2ju/v4LL5uXG4lV6MYudGMXurEL3diFbuxCN3Z5xo1z/9FllefdnJn3tkd9/XJ0cyno5pQ8upkNK25+rW5uVvpmy82ZcDEsuNn+uPv0wblrumk5x407UD39qN9vP159/vrt7ppuJry/m3G7HcdRV3QzxYCbcRzpZh8nuHH7eMnElzCjm+ObPJZgBP7e0M0x6GYXuvm33BzM498FZoNu6OZC0M0peXQzG3O7WRyGT8r/ey7ODTEA3diFbuxCN3ahG7vQjV3oxi50Yxe6sQvd2IVu7EI3dqEbu9CNXejGLnRjF7qxC93YhW7sQjd2oRu7/AW2i1rx1SA/+AAAAABJRU5ErkJggg==" alt="" />
需要注意:
让标签周围外距为0：margin:0 auto;
让标签内的文本水平居中：text-align: center；
让标签垂直居中：line-height: 20px;
在display: inline-block;中默认有3px的边距。解决方法float。
2：改造标签;我们通过改造标签的属性来改造标签的样式。
3：<img>标签默认带有边框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <a href="http://www.jd.com">
9 <img src="15.jpg">
10 </a>
11 </body>
12 </html>
如上代码在低版本的IE 会出现边框。需要加入如下样式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 img{
8 border: 0;/*需要加入该样式才可以*/
9 }
10 </style>
11 </head>
12 <body>
13 <a href="http://www.jd.com">
14 <img src="15.jpg">
15 </a>
16 </body>
17 </html>
二:html标签的补充
<img>标签的补充。
1）当图片不显示的时候，往往会出现显示一些波浪号等其他的符号。这时候用alt属性，当图片不显示的时候，会显示alt的内容。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <img src="1.jpg" alt="图片缺失">
9 </body>
10 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAAAnCAIAAACJwp1mAAAEe0lEQVR4nO2Y2U8bRxjA+a9yKVUU9aFPeaqCS1OplVr1IVL7UFWVKlW4SVzSVCQlGIPBHLEpOCE2DiCUpgmkwUHBJ4eNL2zHELBZU4MP2LXHO9MHnBS8pwOhmWV+mgf729mZb+bn+bx2HSLgTN3/nQDhQBB/eEP84Y2gv6fHmKMUcEDE/B1lHu8PeC1cwp/JZBoYGBw0mwcHeZrZbPZ4POVy+QgTfucozF9/LJH8J1ekNpn0VqVRW0x6i97IMrYHo/39fzidTgDA4WdWJ5ib0CWRW+R3U5Q/o9EUiKVj62xotRRJgmgKLCVBaBWE10pxCty9b/N6PfF4/MmTCZqmKyPKozoPGRHJSzJvOUb++u4YZyPUwjJwR5lXG6DMwgLNzr0semLM4nJx4J7N6XTQNB2LxUZGRjKZDOLsDu9mHdwf7+eA+PuP3WX09vV5QtR8AiQzgGUhQghCSBfZ2TjtSzB374/p2nUGQ3dnZ6derzcaTejd+9uNV/mo6XwfI3/dPb2eILW1A0sAgnKl0UXWE91xhfOhlfzKeiG5UaA26aX4Wk9PL5La2Tfx6jzk+RMZQeRqTcVcUf4M3T3uwPrsy6IjXHBGtnebI1yYCW87woXZ2PZCgvYldsJrJf/SuqG7B+3fRKFPPa8t+VvMOwIS9Sd5b9XCcUHCX2eXwRVYd0fp54u56UB+Xwvmp4OF6WDheSDvjjKeINV3x4g49Y1b7rhveSP86Yqq5fVX61yK8teh73IuppwResqXs/vzdn/O7s9N+bN2f9bu343k7f6cN15KpMsMU0RvWxtl+hPvL15dZc6lKH/tHXqHPzUT2vl7PvtsITs5v/HQm7C43MPuub/mVp8ubE75co5IKbjCsPD1iJzvv70vuH2EIhJ576/SQudSsixzz7Gi/LXpOmZ8qRfB7Qlv5oFrsenxzYahc5es5z4bPn955FLXlG0quBldZViIIITFYuX8cStbZTJ5l0S6of0FuU6qLIvfLrJwXJBYhratfcaXmg5sm6af/fDwO5XldL3lRL3lpMp6SmU99fX4hYnYOIQIQkRRaYOhGwk8+1XPWuPzCDfI1SAphrc/F0X5a21te7GQHPa6vh//5qLlZL3lhMpakff5yPmZ1UnAlgALNndK7gCl1eqQPBPE32Eh4a/ldusj17x68keV5czF1/I+GT795dhHkYyvzIISW3wcHdM62u1zyy23tUjg+6961sPwt3dwOWJkTqoof823bl4d/ekr2wXVvTMNQ2cbhs5+av3g20cfp/KvWMgCAPq92i9GP7w8prr1Z0vz781I+LddVUTkrXicV5ukP/lTKMqfRvPLFc1V9bVGtaZRrWm80vSzzqDL0VsQQoSQ1Tp8/bfrak2jWqO+1qT59cYNJPuRb18Stf8fvbeD5MGSX1SRwvy9zYiyHwIl+9c6FDcuVMC5nd90O+7+cAevhRN/1eC1cDF/x5ajFHBAavvXivC+QfzhDfGHN8Qf3hB/eEP84Q3xhzfEH94Qf3hD/OEN8Yc3xB/eEH948y+S+IuxL16z4AAAAABJRU5ErkJggg==" alt="" />
各个标签的默认值补充：
1）<input> text类型标签的默认值:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <input type="text" value="1" />
10 </span>
11 </body>
12 </html>
效果：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPMAAAAjCAIAAADOqqtHAAAA5ElEQVR4nO3bIbUCURiF0WlCjCeJQATki0AEorAmARKJRCKRSCIMBntZCBj4z907wRGfPcMEiYZvD4CPUDaZlE2mZtkjjOOcLb7Xs7Ln3MEPKt2Asmkq3YCyaSrdgLJpKt3Ay2VfdqvV7vrxPfyQDsq+7P//hkHZnQkv+3bYLhfLzWat7N6kl306nm/TdNwquzfhZT8ouz/KJpOyyaRsMimbTMomUx9l05/SDSibptINKJum0g0om6bSDSibptIN+EHyzJwtvpfvOpmUTSZlk0nZZFI2mZRNJmWTSdlkUjaZlE2mO7x0p4dhdqoFAAAAAElFTkSuQmCC" alt="" />
2）<input> radio类型的默认值：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 男：<input type="radio" name="a" checked="checked" />
10 女：<input type="radio" name="a" />
11 </span>
12 </body>
13 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAAAzCAIAAADOy6f0AAACeklEQVR4nO2XzcqqUBRAe9r7IkIToQcxBw5u+RtlIITUCQeCQW0oECcXOUMn6h0EEZ9mdtTvur+7F06KOKzN0l1Nlr+XdKG4JiWBBEqFBkqFBkqFBkqFBkqFBkqFBkqFBkqFBkqFhp+fajL5ITO+GWPyjt6Frter53m6ruu67nne7XbreOD3pOpdu8r7VO1fdiTP88Ph4Pv+5XJJkiRJkvP5vNvtGGN5ngsfO3SqgbSrjCjVfr/3ff9PhfvYwscOnWog7SpjWYAAsN1u4ziO43ixWMxms+l0ulwu7++s12sAEDh26E7P2lWEtWsZy1Nl2/bxeAQATdN+PaFpGgAwxmzbbnPO23ur3/vsoV1Le+02jCWVqqqn0wkAJEl6TiXLMgBEUaSqqsCxg27s8km7FmHtWsayAOfzeXMqRVE+PbOq13uqh/arVALar/hMfbjVb5omY6xhAZqm+emZ35Dqof1qAQpov6LnVMKPWhiGjuPcJ9Q0TZZlSZLunQDAsqwwDDuqNoj1ol1FQLuBJj+BL2fhmbMsc113tVpVB3Ycx3XdLMs+G6zOrf2H/5V2Ax/41Q7T40pJ03Sz2ViWxRiLoiiKIsaYZVmu66ZpKnbmo8Fwq3sI7VraDvBq1L6eqrIsi6LgnAdBYBiGoiiKohiGEQQB57woCrEzW1qNU/urZKsPNa6OLy873r9ZlnHO73/4OecdF8izT4Pb2LRrEfyZMPRW6U6zOUbEv2lHOzNe82ZQSv+fUCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0UCo0/AWXu9/oy4a8zwAAAABJRU5ErkJggg==" alt="" />
3）<input>标签checkbox类型的默认值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 basketball：<input type="checkbox" name="fav" checked="checked" />
10 football：<input type="checkbox" name="fav" />
11 swimming：<input type="checkbox" name="fav" checked="checked"/>
12 pingbang：<input type="checkbox" name="fav" />
13 </span>
14 </body>
15 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAccAAAAoCAIAAAAE+6YGAAAEH0lEQVR4nO3bP2/aUBSHYX82K2OkbJEyJVOkzFnJmjWfAjVYylJKB0+ZggeGDN4isVWJKpKhmyd3QEHG94/vvT7GBt5HqAJjLuceDj+sVo3+AQDkRH0XAAAHhVQFAEmkKgBIin7/+s2NGzdu3KRuUQkAkEOqAoAkUhUAJJGqACCJVAUASaQqAEgiVQFAEqkKAJJIVQCQRKoCgCRSFQAkkaoCiqLIsmw2m/1UzGaz+XxeFEXfNQ4dPWyPHrYn0kNSVcB8Ps+y7NMgy7KXl5e+axw6etgePWxPpIfGVI2iKIoEMrfHdaJvjseDTafTlWKxWFxfXy8Wi9VqNZ1OfdeMKqTq3LseVgX00N3Qpj1MF3Ooar/HfrtkJzKHtr1J7bzfdUyvEvxckyT5s+3t7e3i4uLk5OTs7Oz19TVJEq8Fq7XJzt8e9bDGt4deDiNVxedQS2SPg01VkTkcbqpqr48E313wcx2Px8ttNzc3cRzHcfzw8LBcLsfjsdeC3XV+j3pY49vDIyQ+h90ZbKqKzCGpKmD9SeR5fnd3l+f5/f39epRvb2/DEoFUJVUDiM9hd449Ve1/rVZ7KtpWXaf6rH0d7SJh9ZS7SoQ8z6+uruI4Pj8/X4/y5eVlnue+0xwptE+ZXmJap3q8HGoPBVNV3X71Trk9io1d1Z6stsuyjuO7+Ldti9Qcqk1TC265R9P6pW4Od9zDzlO11gX1fvVh43HTCS4PA+oxrWM/HmD9SYxGo/jb6enp8/Nz8HWWdu/ahwfWQ5FU1RbvO42Wl9iXsvfc/VUBBOfQNCeWI157DMiWXfaw21S1P1R/UizrmD4J0++Me7KY6nGpSluS9nyLzSexGeinp6fg6yxtbYKpan/Yew/FU7V2sJdUtS+rPaffOZSaK0uq2l9uz5Yd9LCHVLXcV7+Wm4eO31XTswH1WN5FMBEmk8mm6aPRaP0vA1WPj49eC/aSqsPpoZZXD01fS/VPy166TtVqndr6G7dZIziHsnOlbsd3DnvpYfAchqSq71fO94WmZ6WSxeXdvaRpmqap6WNYP+u14O5T9fB6WCtygKkq2L01wR52NFe+5/seb0+khw255jI3Xjt3WUf7MKAe0zqW42G/b+/v72maTiaTH4okSdI0/fj48Fqw01Q9+B76zmHjkY5StaxcZ6nnDKeHXr3Svlzdo1S2mNYve+1h89WitrhIoR6snVm7r66jLUDteMt6LMdNizcqiuLr6+uvwefnp/v/v26szf24dkfH3EPLffV8tQml0urqHZd11GVrZddKctzvRkc9NB1vs8fIZw73rofC188AHFkSoXdSxXS9x2H2cBBFAMfJdEnYL9mSut7jAHs4lDoA4DCQqgAgiVQFAEmkKgBIIlUBQBKpCgCSSFUAkESqAoAkUhUAJP0HoxWPGLvDvWIAAAAASUVORK5CYII=" alt="" />
4）select标签的默认值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <select>
10 <option >北京</option>
11 <option>大连</option>
12 <option selected="selected">沈阳</option>
13 </select>
14 </span>
15 </body>
16 </html>
默认情况显示的是第一个标签。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAAAuCAIAAACZL8HfAAABR0lEQVRoge2ZQQ6CMBBFe7M5L4bujNs5TG/gBXBhgkSYlhY+TOC/sKhY4s/jxzYQ3gRJODvAxQmv54sH7ggDQUK/WOgXC/1ioV8s9IuFfrHQLxb6xWL6TSnFGB+eiDGmlI60sx3Tb9/3R+ZYic9UGUy/XdcdmWMlPlNlaPEbQvgbFGfuBf2ak3fhvn6nJ/NsiXtTv7uUVESmt0FEqlL5pMLvvIPfwVxuW3lVdTpTVdekcs7W/i4qszwWaz5WeLG8+VQ+gaxvzX7HCi+WN5/KJyi/zYubiFjlzafySbXf+f9v4Qcqlz5VtcqbSeWW6vVtKO3P/j7uu8e4st/fNSW/a8Zt3MvvYG/apt9a1zZwC78n4jNVBvrFwue/WPj+Agvfv2GhXyz0i4V+sdAvFvrFQr9Y6BcL/WKhXyz0i4V+sdAvFvrFQr9YPuIslQUThCEOAAAAAElFTkSuQmCC" alt="" />
添加默认值。修改显示。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIEAAAAjCAIAAAA8Fv7iAAABNElEQVRoge2ZUQ7CIBBEudmet6acYQ/DQfBHGyyLAk2ZYud9Qa3JZJ+wRFwkaBw6AKGDC0AHeOgADx3goQM8RQchBO/940p470MII6szhqKDdV1H5qjkmqkOUnSwLMvIHJVcM9VBDjlwbnQ7ubuDvOKmA5ewm24Pu7m7g/guel7WtLi7wa7odJDTsxfl5TYftjoQkdSoiDSlmpezHJjv5NMUVU0dqGpTqnk5pR/ETwf1/WBbCuYiMFP9AT39IB1/EdPRD7alYC6CUqrZ6T+bnuEgxigipUVQk2pGOh2Utvv8o1YHqlpaBD9TTUrnXvR9YB5VzWkrd3fQdCRNX6jvyT+5u4PXF6zNp/6HTwc5/M8ODx3g4f0BHt6j4eF9Mh46wEMHeOgADx3goQM8dICHDvDQAZ4ndCfdYBxbFFgAAAAASUVORK5CYII=" alt="" />
5）<textarea>默认值：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <textarea>
10 123
11 </textarea>
12 </span>
13 </body>
14 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAAAzCAIAAACsZIueAAABDUlEQVR4nO3YUW6DMBRFQa+WvXWVLx9VqzQ4dmkuSVvPfKEnS4B0JBtaQVp79QPwD6mKPFWRpyryVEXe3areWMOzqzrjfvwqqiJPVeSpijxVkaeqidZu36V9mA6XpaqRbj376+5wZaqa+E5Vg/VrUtXEoJLuJnj+E/0Bqpq4F8rR+VJUNXF0m1NVqWqq+w14aP2CVDUxOK13h6oqVY3t/0K1rwYrV6Yq8lRFnqrIUxV5qiJPVeSpijxVkacq8lRFnqrIUxV5qiJp27ZSFUHvSZWqSPlMqlRFxHVSpSoed52UcxUB+6RKVTyim1SpijO8oCpW8NSq4MdURZ6qyFMVeaoiT1XkqYo8VZGnKvIuqZ1ZY0howFIAAAAASUVORK5CYII=" alt="" />
总结：
1：<input>标签的默认值，通过设置value(text)。或者通过checked=checked(radio checkbox)
2：<select>标签的默认值，通过selected=selected来设置。
3：<textarea>通过在标签之间设置值来设置默认值。
三：Css补充：
1：当我们的需求一个样式要全局生效而不是被其他同样的样式覆盖掉，需要使用!important.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 color: red;
9 }
10 .b{
11 color:black;
12 }
13 </style>
14 </head>
15 <body>
16 <span class="a b">just test</span>
17 </body>
18 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAZCAIAAAAzGN7QAAAAv0lEQVRYhe2VyxaAIAhE+f+fpl2ljgRGj6NzV0XG6M1KlDTI1xP4I5QCoBQApQBcUkREZCF9lAJ4b6lRrVmPYaAPpaBbPE3Pr0/1KsFTeEtV9CS24z314dyjm3dcuXJ4qVeHp6HEN3P1USlGh2jiXuntiMRczZWi/e09MLlQh8RcTZdi1B+Vkpir96UY23itb4qWv6TqwPjah/8CzXjYPz/XnhM8np4LKYb+iVlrtU4oBUApAEoBUAqAUgCUAtgApkI1Ky/YgG8AAAAASUVORK5CYII=" alt="" />
aaarticlea/png;base64,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" alt="" />
这种优先级下面的优先级高于上面的优先级。
用!important来增加 class="a"的优先级。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 color: red !important;
9 }
10 .b{
11 color:black;
12 }
13 </style>
14 </head>
15 <body>
16 <span class="a b">just test</span>
17 </body>
18 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAzCAIAAAAByVFyAAABEElEQVRoge2VXQ6CMBAG9/7nMRzMC9QXQ0zpzw6pGMNMeJBS9tsMto2nEOLXDfwZsT02r/wVRQj6YuiLoS+Gvhj6YuiLoS+Gvhj6YuiLoS9GwldECbW+0RfjKhHU+KovtPpL6wvWm+d9rsdqbTZvm69Ug5nE4/zM+OncHLlClZTmo9548xYlXpk77Ss3i/saVKCJ+0jvf7Qwd9pXblbCV+mvl+NbKHFaYWHutK/crJyvwfhXfS3MnZbHTfT2e/evURO7qerH4Dyi51TyfFyeO26q/6S/Bm/MqU30xuiCoS+Gvhj6YuiLoS+Gvhj6YuiLoS+Gvhj6YuiLoS+Gvhj6YuiLoS+Gvhj6YuiLoS+Gvhgvw9eVLTeRPaIAAAAASUVORK5CYII=" alt="" />
aaarticlea/png;base64,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" alt="" />
应用场景：当我们要求隐藏标签的时候，使用display:none的时候，我们希望在使用这个样式的时候，就是隐藏标签。而不是被display:block等覆盖，可以使用display:none !important;来解决这个问题。
2）属性选择器：我们自定义属性选择器，来查找对应的标签。通过[]形式查找。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a[cc=evil]{
8 color:firebrick;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="a" cc="tom">just test</div>
14 <div class="a" cc="evil">just test</div>
15 <div class="a" cc="jack">just test</div>
16 <div class="a" cc="evil">just test</div>
17 </body>
18 </html
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABMCAIAAABmsOfuAAAB30lEQVR4nO2aQZaDIBAFOYv3X+WCzGK+vgli+xE0E17VKnaQxhIweXbKkHPOOX16AP8FRAhECEQIRAhECEtESimlyZUhQjx3ea0qR6k3+0HE2szp6O/SKJZJ9bB6ShF0Mu7bO/FreV3rxdVWvzqKVw+bMj6Q90YRQQ+tGbfI0Z3vzztSRD6euv6AgvZBD/15B4sI4reK6M/bKyKYovPvEfn9UVJ8CHZpZ/eO21f7H5LX3WZa7+fXcSIi0DwZ81+hCSIEIgQiBCKEJeK1LK9luXsonwUR4rml0apylHqzH0SIcxG/62Lrrlgm1cPqKUXQybhv78Sv5XVnRHG11a+O4tXDpowP5L1RRNBDa8YtcnTn+/OOFJGPp64/oKB90EN/3sEigvitIvrz9ooIpuj8e0R+f5QUH4JduvWHmfnUGJI3EhEsh/k4EeE//L8d/n0KRAhECEQIRAhKhwQiBKVDa7MhyaxM3y6ieP1ZfRO9b7w/xX+NGrR34tfyUkO1NrswLHNAQQ+tGbfI0Z3vz0sN1drswrDMuXf30jBPfEhEMEXn3yMyNVQTQw2VmP8KTRAhECEQIRAhKB0SiBCUDglECGqoBDVUghoqQQ2VoIZKUEMlqKES1FAJaqgE/z4FIsQPSwGPccDfuhsAAAAASUVORK5CYII=" alt="" />
3)在使用width百分比的时候，需要注意一个问题：在定义百分比的时候，需要在外层定义这个标签的宽度。才可以使用百分比。
问题：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl0AAABICAIAAABDZNd9AAADgklEQVR4nO3dXW7bMBREYe5/KemCuojuoC/tQ9DQ1Z99LWms0N/BeXBuGI6JJB7ECKT28fGDJEl+2v4AAIB/6EUAADp6EQCAjl4EAKCjFwEA6OhFAAA6ehEAgM5CL/7+9ZMkyTPM91wVvUiSzJnvuSp6kSSZM99zVfQiSTJnvueq3OnF1lpr7cHTPr44ue3Lj/DyJ+Bc1W1Jnme+56rc/3ux9GpSekWLbfvyI7z8CThXdVuSJ5nvuSp6MXGElz8B56puS/Ik8z1XZbUX2w23R9oe3s53rjxw22TW3ZXVxXMHONfOlWefay3r7KEsWe9gvueqLPdi+/8VZPvxGUNZaw5wLlmyZG1sNbz5nqtS68WvySd3v7tPr9y/bTKrurK6ePKFY5zrhT8ba9uuDUuLdw5lyRrefM9VKffi14fzB2uPn1i5f9tkVmlldfHEMc712p+NuwvunuukoSxZ72C+56p4H/W6WYsOcC5ZsmRtbDW8+Z6r8tD/3Uy+f/P5GUNZaw5wLlmyZJV+60cy33NVXO+GJJkz33NV9CJJMme+56roRZJkznzPVdGLJMmc+Z6rohdJkjnzPVdFL5Ikc+Z7ropeJEnmzPdclSPvv0iS5LanNFlrrS3U2ZO7zUeTM+hFkuRRHtVe0zLTiyTJ7+hR7TUts0Avrl2dKDaUJUuWLFnjZc37bD5/Yjjf+WlcN1yWLFmyZEWzbltt/njncD8H3H/xvKEsWbJkyRova9pDS/NHhu0ivfj14eKaA4eyZMmSJWvIrEnVbZTc9nDxs/vxPqosWbJkyYpmLZZZu/j7qJ9P/ZbbI83nZwxlyZIlS9aoWbd9Np/vHJ7ViyRJHu4h1XUqepEkmTPfc1X0IkkyZ77nquhFkmTOfM9V0YskyZz5nquiF0mSOfM9V0UvkiRz5nuuivsvkiRz5nuuivtMkSRz5nuuil4kSebM91wV91+UJevqWeRI5nuuiuuGy5J16SxyMPM9V8X9F2XJ+gZZ5DDme66K+y/KknX1LHIk8z1XxfuosmRdOosczHzPVXH/RVmyrp5FjmS+56q43g1JMme+56roRZJkznzPVdGLJMmc+Z6rstCLAAC8LXoRAICOXgQAoKMXAQDo6EUAADp6EQCAjl4EAKCjFwEA6OhFAAA6ehEAgI5eBACgoxcBAOjoRQAAOnoRAICOXgQAoKMXAQDo/AVkAYmQ4W3KWAAAAABJRU5ErkJggg==" alt="" />内容溢出.当窗口变小的时候。
采用外部标签定义宽度来解决。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA5CAIAAACzjKeMAAACE0lEQVR4nO3cQW7jMBBEUd7/gjlEbpBNsgtk2ZTESCUp7Vf4iwzR4TchozAeeNi+J/n6/ACAw2mKBkAaRQMgjqIBEKdbNK211trWXTYPn7nt5Ue4/AU41+i2CLH0N5qhxzP0Fjlt28uPcPkLcK7RbZFA0WSPcPkLcK7RbZHgRdG0SR5GFxen6zsnD9z2TNfq5Ojwi6f1/8+1czJ9rp4rvVjfNSua2SNZ/jmxyNWjwLm43ta1tWh+V6altTD858n9257pGp0cHZ79Yo1zXfje6G3bWxwa3rlY3LW9aJ4fYW94z+T+bc90DU2ODj8/rQLnuva9sTqweq7QYnmXj053dL2kwLm43ta18o/Bs995Xk8scvUocC6uN3X5ZjCANIoGQBxFAyCOogEQR9EAiKNoAMRRNADiHHMfDQAscNg1EQDQQ9EAiHPYfTQHLnJxcVVzzYpmOrf6c2KRi4urnmvXfTS5RS4urlKu7UXz+8eXMwcucnFxFXP56MTFxRV3uY+Gi4sr7/LNYABpFA2AOIoGQBxFAyCOogEQR9EAiKNoAMRxHw2AOK6JABBH0QCI4z4aLq77usrgP1Vycd3UVQn30XBx3dpVA/fRcHHd11UGH524uG7qqoT7aLi47usqg28GA4ijaADEUTQA4jwUjYhIIopGROJRNCISj6IRkXgUjYjEo2hEJB5FIyLxKBoRiUfRiEg8P58LhVgsa/Z+AAAAAElFTkSuQmCC" alt="" />
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANEAAAAZCAIAAAAg41xhAAAA70lEQVRoge3aTQ6CMBiE4Z4fS/EOPYlbb9MT6AJR+UnUhMw3hvfJt8EaaphZCCHdAK0U/QNwOHQOanQOanQOanQOaqkBWnQOah86d4GKJm8HdM6FJm8HdM6FJm8Hj87VWjeXo4M4EGHowVJrrdZK58Jpc4+U6mRzOTqIAxEHH4jOuRAHH4jOuRAHH4j/cy60uUfivtWFMPRgPJ9zocnbAZ1zocnbAZ1zocnbAe+VQI3OQS1dAa1UcldyV/pxTtOsP/lm6TXDOGU109L/7ZVPJc937De3GL/Z7Tb9anY8+XyG5cXMQ8lvl/R5mBdz/mXufPCdnc2F8K8AAAAASUVORK5CYII=" alt="" />
底端出现左右拉取的横条。
代码：
1 <div class="a" style="width: 1200px ">
2 <div class="a" style="width: 20%;">> </div>
3 <div class="v" style="width: 80%;">>dadadadaddadadadad
4 dadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad
6 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
7 </div>
注意：在使用宽度的百分比的时候需要在外部标签定义标签的长度。
4）对于在滑动网页的时候，标题栏一直在头部的网页实现方法：
利用postion的fixed 以及top:0 left:0 right:0
通过top:0,left:0,right:0来拉取宽度，而不是通过我们定义宽度。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 /*width: 2200px; 注意不需要定义宽度*/
9 position: fixed;
10 top: 0;
11 margin: 0 auto;
12 left: 0;
13 right: 0;
14 height: 50px;
15 background-color: red;
16 color:black;
17 line-height: 50px;
18 padding-left: 5px;
19 }
20 .c{
21 float: left;
22 height: 3500px;
23 margin-top: 50px;
24 color: black;
25 }
26
27 </style>
28 </head>
29 <body>
30 <div class="a">
31 标题一 标题二 标题三
32 </div>
33 <div class="c">
34 热点
35 </div>
36
37 </body>
38 </html>
aaarticlea/png;base64,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" alt="" />
5）实现输入框左边或者右边有图片。如下效果：
aaarticlea/png;base64,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" alt="" /> aaarticlea/png;base64,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" alt="" />
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 width: 200px;
9 position: relative;
10 height: 37px;
11 }
12 .b{
13 width: 150px;
14 /*border: 0;*/
15 height: 35px;
16 line-height: 37px;
17 padding-right: 50px;
18 }
19 .c{
20 position: absolute;
21 right: 0;
22 top:0;
23 height: 37px;
24
25 }
26 </style>
27 </head>
28 <body>
29 <div class="a">
30 <input class="b" type="text" />
31 <img class="c" src="2.png">
32 </div>
33 </body>
34 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAAAwCAIAAAAEtdiiAAACOklEQVR4nO3Yy46bMBiG4bn/O+mtRGBsbMwpBARxQJwPm7abdIEaTavITZhhrJl+j7zyAli8kvn9cgUw4cX0B8B/CuWBGSgPzEB5YMb98r7BJ9QvPz9gre/asby3Pxo+2MeUd32nPFDe1zEs3/de/fLjivLgL8v+UB7cgfLADJQHZqA8MAPlgRkoD8xAeWAGygMzHklnmqamaZRSRVEURVFV1TiOKA/e5JHslFJSSs/zgiDwfV9KeTwe27ZFebCdPpp5nsuyFEIkSVLXdd/3XddVVRXHcRiGwzCgPNhIH804jrfI5nm+7Xdd5/v++XxGebCRPppbYa+zW5ZlmqYsy5IkQXmwkaaYPM8dx7FtmzEm/sQ5p5QSQnzfb5oG5cHTNMVEUWTbNqWUUsoYc12Xc845d12XMUYpdRyHEKKUQnnwNH15hBBKqeu6QoiiKPq+V0p5nve6v8vlgvLgafry1uw453Ecd1237sdxvB64a3woD7Z4pDwhRBRFdV3P89y2bRAEnufd4ivLEuXB0x4sT0qZZdk4jmmaSinXi2WUB9v9szzGGOdcCHE6nYZhSNP0NuEyxnDawkb68tYJYx1s8zyfpinP8/WcXccLTBiwkaaYMAwPh8MaH6WUc77+3tHfCCG4VYGNNMWkaWpZlm3bzj2EEMuyhBB1XaM8eJo+mneB8uAOlAdmoDwwA+WBGSgPzEB5YAbKgy9u3/IANPYqD2BvKA/MQHlgBsoDM1AemIHywAyUB2agPDDjFzMo3qTjrR9UAAAAAElFTkSuQmCC" alt="" />
实现核心思想：通过postion：relative absolute 实现一个标签相对另一个标签的位置。位置通过 top:0 、left:0、right:0等其中2个属性确定位置。正方形或者长方形确定其中2个边位置那形状也确定了。！！！！
6）对于写html网页的时候。建议如下分以下目录：
1 目录介绍
2 ├── App
3 │ ├── *.html#存放html文件
4 │
5 │
6 ├── css
7 │ ├── *.css#存放css文件。
8 │
9 ├── js
10 │ ├── *.js#存放js文件。
11 │
12 ├── picture
13 │ ├── #存放图片。
7)在使用图标的时候，可以使用插件。
Font Awesome
下载地址:http://fontawesome.io/
使用方式：解压到css目录中。注意css目录下有2个文件：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAAAwCAIAAADhKx3OAAAC3UlEQVR4nO2aPXIjIRCFuRaJy6WqzTb0VjlysFVmc9/DhBv5ALqAyXyE0QHYY+gA2mA0/HYzGlkjLPf7SgHFQNOGB4Olpz7+/j4AwajeCYDOQAHSgQKkAwVIBwqQDhQgHShAOqwC3hh2u9018wNrs1gB2+0WIvhOzCigrtzv9xDBd2KxAgJMP2+1UkoZd7kcwZqwChiGYRiGpY+81Vj824JVwMu/P6d8il7OKG398jSgnG60FPBof93db+7uN41y0QsKuDlaChjXePxsfv54fn+qy2kXZ9TEuJpJRVxfZ5S29vhEW581I+VzvFpkcaeGzoTQsTYGDPGqGM303LG1cbFVkhoRn5yG8Wk9NJVMN05VwPP7U1j4tFz0KtYmTlBcKWfCH+6tTmaJmQxvzRRlChJbO6O1HkNMQ6fH0NSQCN9ML0TMUq3kR8TNw5JNvth5d6oCwsIX5aJXtg/pmShmsFZA2EOxf7lppubOaOud0daHUOnGLo+ZfBvPp0eV6fhc2AMxNFHTk+Y94PUhvO/HwuPrQ1EuejUVkO/VrJLfF97qMFux1dgxWXtHhSdj1ScFmx6jgMbasU+TodmaPqz3v0B1zBLSOEEBSXNvdfoq1VqHEyG8C7KbweHgzLGFdWHEsNdn0yPLdHxNPHXWemJoIpmeXPj7gHwP8FetUgHTOU9sifgG0MbEGSvkkPZs3/rilM+mx5Tpq139NN5Qi0GoZLqx+HeBue8EwY0BBUgH/gDpQAHSgQKkAwVIBwqQDhQgHThFpQOnqHTgFJUOnKLXpfgJ4wsAp+h1uSEFwCkqBDhFpQOnKJXe+U7Rue6F39DWwYnpXNVxCqcold7nnKKt7lmceh6Y9MihLnRuwinaSG+5U3S2O6skPkysUms4TuEUbaS33Cm6ogKqP4GtWQacoo30znOKfkIBPRyncIo20jvDKXopBVzPcQqfoHSgAOnAHyAdKEA6UIB0oADp/AdNe0E+bcNPhAAAAABJRU5ErkJggg==" alt="" />其中min文件是压缩文件，里面的内容由一行组成。在调试过程中不建议使用min，以方便查看样式。在上线的时候使用min。
使用图标：点击官网的icons或者访问：http://fontawesome.io/icons/
查找对应图标。并点击。查看样式css代码。比如：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAAAmCAIAAAB1fEOyAAAB30lEQVRoge3Vv2vCQBTAcf+Wmw4Kh3DL6eSWIRDaQehSKC4dGmgHO0gLHTp0ETK4CK6CCEKGdhEhUyeHQsDi0KUubg4ly22vg8YfJRYS86zE9x01IbkPj5ccUJjl/vsFMh754ka+uJEvbuSLG/niRr64kS9u5Isb+eJGvriRL27kixv54ka+uO3D17UZY7a7hycdXhi+rs0iigPsOwYzHD/+o/V741wKIdTNy3f8uxFK0zfaNSyOV1LfWfuS5e/6OvaNaKXl+7ftvnwTzz1a6fhu6q5O6DvGzvtBj3tVS0kppVRWtTfWy19NwRljjAvzoT/deInDMU7Dd01xjhg1zLG+byvf2eut5GZ9GABAMKybXNYGGmDWqYjTZ2+iQU+8R4Nx29WQ1fkNfW13c2ITLgdYc/pomBsLdVDLLyijrs6or2svBLct4dhHXjq5NmNcqGKYEpwZjr9YDydCFUuls4tyIdO+W2Z2h124dPIdgxWe3n7/P+tUeP6qNwUAgMC7z7DvfGYNx4mY3cRHXTl9tso83L+gJ16z2Z8CfLXK7Dh8fcdA+FyvOwWjbtVSUiolpbKq3VEAAHrcvi4JIYvHsB+o7ZEvbuSLG/niRr64kS9u5Isb+eJGvriRL27ki9sPCBs1Ih9bYa4AAAAASUVORK5CYII=" alt="" />
点击查看：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAAB8CAIAAAD8VbDKAAALfklEQVR4nO3c0WsT2QLH8f2PfDhPQyglL5EoW+0iFrou2EVYWh+C2Idme7llCxcqTUEIeNnb0lzqVbq4KRTtwl7tglrYq7UUqVuwSpolBKQEg04fxrQ492GS6SRzJpkkk/Z0+/3gg57OnDOZmfPLOWemfmEGJ5fL7e/vB1ghgJPpiwDrIpgABIJgAqAcggmAcggmAMohmAAoh2ACoByCCYByCCYAyiGYACiHYAKgHIIJgHIIJgDKIZgAKIdgAqCc4x9MxmZ6tD8a/fbWmnHYTQPojGMeTPqz6SthYbk0/fpQ2wbQKccgmIzCn5nMxtMHaYeZyXh8sD/SpQmHy7PbgTcO4AgoHExGYf3e+MCX1eFT1/Bineryj6ev90e6NBEKR6/MbLRzZC+TF4QQF5Iv26mkgQAPFzh2FA2m/OPkdxH/iVTWd+sPrwpf3urThNB6Ysnbt5OTP7UXKZ0PpkAPFzh2FAwmY23WXjdqjndUrEycFsGtQnU8mII9XODYUS2YjLVbX4daSiVRb5FpcViIBlO9JnQ8mII9XODYUSyYrC7vpnV9OTA+8+DpRuadbpqmafzxz0vujUaWfNVod3gj+9v09wO94VC5jUj/9enfso3fOvAIJkd1Wlekd+B7aWX6xr3Jg3X7ULh3YPzehu7ncIETQ6lgKvx01bWupEW+cXRco/BnJpPJZJ7PXXXP9gbvFtx1bj+Yisfj354VQoiz38bj8Xj83/8zTdPILo31aEIIreviYDwejw9etLIiPLyYb3CckmAysumRiCZE6MzA98nb6ZlJqzqtZ+xXR2322w2hMwPX4vH4tYEzISGE0PqS5bewvA4XOFFUCqbC3cGaUOoZSW8aps8HdPXeFpDMjV7PXtbCV6af2YMV01hL9mlCiLOJZ/UP1BVMxtrNC0KI8HDaMUQysunhsBDa4F07moyHY2GtZ2zJsVV+cTgshNCu/uRIVaZyOOFUCqalEWfwhK/MrhmmaeobczEfD+i6hxcl46UKaU9/s7lZO9N6ONbdIOJM0x1M+buDmhBnJ1ZqqyssDndXB11hc7N2PLY9e1kI0T32sMHhAieHSsFkdUcrla7e3TRM09i86yeUhNAuz9Z9guXd08uTQ2vpyueyds1W1khPvtPSiCbE6YmV6lL9XSaTyfxZMDwOjmDCCadkMF24uWY089qA1nerwQMyWU/Xn00PnTl4Aqh1XRxN/3LTETnWeo/T1INt03QFkzXMuvSPtMSP104LIWLp8ljKyC6NX3TMSENnhpKP5wgmoJpKwWSvMV2YepJ5Mu07lW461ok8uHv669nLmhBaz8i95+900zT1d8/vJ8pNliPH/YSs6gd2MDlGeh7KmxoPx8JCiPCV5H9fFwzTNAqvn86N9Fg5RTABNpWCKZ+OdfvKogPVq9feXD3dyhbXMvfazV7R9FTOeh1S+kywirE4rNUuc5umaaRjBBNQRZVgcv43Af5okdjchp9QMk1JT/fo+i2tMVXmco1e1PaqnDUmoIYawWT9apgQQmh9N+/fT17/qt7b39WvNvni6umvpy8JIbpj6apnZPlf4qdbCKbKvLBv4nH1Izd9Y2503H4tyvj1b92isoJmMzZ/vEQwAVWUCKY/bvWVI8d+uGZkf/85+cNgfzRqvZetdUWivQPXfkjef/6uqUiyuHt6YWk0ogmhRb5L/Px0I/P84e3k9a+6wuHuVoLJNPOPE1+HrNC8NjmTTt9O/jDYHw4JoUWG/mP/avHLf30dEkKEvhqdefg8s/H0wcz4N5FIOEwwAVWUCCazsPT3MyEtMtLwnetWSXu6vnFvfKC3/F+LWL9BstbSVO6gvslrA73RcEiIUDga7R+cnPu95pdSjOxv09f7o+GQ0Loi0f7ByXsbOlM5oIYawQQADgQTAOUQTACUQzABUA7BBEA5BBMA5RBMAJRDMAFQDsEEQDkEEwDlEEwAlEMwAVAOwQRAOQQTAOUQTACUQzABUA7BBEA5BBMA5RBMAJRDMAFQDsEEQDkEEwDlEEwAlEMwAVAOwQRAOUEGUz6fL5VKAVYI4GQKMpgKhcKHDx8+f/4cYJ0ATqAgg2lvby+fz3/48GFvby/AagGcNEEGk2mae3t7hUIhn8/nAKBVAQcTALSPYAKgHIIJgHIIJgDKIZgAKIdgAqAcggmAcggmAMohmAAoh2ACoByCCYByCCYAyiGYACiHYAKgHIIJgHIIJgDKIZgAKIdgAqAcggmAcggmAMoJOJj29/d1XS8Wi+8BoFVBBtP+/n6xWNzd3f306VMJAFoVZDDpur67u3vUnwjAsRdkMBWLRcZKANoXZDC9f//+qD8OgL8CggmAcggmAMohmAAoh2ACoByCCYByCCYAyiGYACiHYAKgHFWDKbfaF0uNvmhl15Xl9XOp9XOp9cRWYIcjpd+JvYpOFUor2ej5rTsZx08y+aHzr6LnX9WW+9T67oUb5R2zT5pv1qN174/Znp1crMVrtJNIvV1pts6dXMy9l7SwJZ06S51rKLfaF1t+VPXPFntcJ/wFg6lUKpVKH+cXOh5MpSdTr6JThVImP1R9izyZejU0r7dTbTu7lzL5oTaCyd2618ds018rmDzOUnvXoomGmvZmaaFvaefg3wST1JulhVOpreA+12EF09C87rr59DuxVzdav9vb3L3NziBp3eNjHh3vYKq3U+eDSXKWOhNMroZqU6aarHNtjcYWpnP12qlfZ6cpEUyPUqlTE6tvnP+MpU75y2974nau6g6rDSbHZo7ynVysUhhb/Viv0B/9TsyaBFX+TBVKpZJjhlV/ktXm7hWuzpCZ33Lt7q7Tq3X/pCd5ZXk9sWqf0vI1kk635ddIYieReruy9bbmGsmn8I6reXCHNCqs1LCTSL2dX90M6GaI5TOlUqlUuHE+e8e+ItZJXsnaZzszv1X1d7/XvaYTNSh/seyMKq8e51XnITjyYNoajaVkwbwzPdE4mFaW188tS0Pde8Tk+JJcWZZsIymsuo8br17VG/I4b7vO7O4KJsdNX1rJVrqHV51tj9dKpVLtST63kNuu/N1x6nxdI+mPE6nKdd96W/cLaSdhX6yDOr0K7Xp2EqnN+R2Phpq7GSQjpsKN8/ZkuXDD+qk0mBpdOJc3SwunnMtG9TqXe7gk73GuOg/JkQZTvWmtn2CybyA3101f+YJ1fkluW1+G1dEmLWyKfDbkeyTid3dHoXvp/aAzOL51nd/bXofUVjDJTrI0/Uulks9r5CysjFkcIVIbYdV1br21M/FgS2lhbdzYweTVkE/yYHINf2TB5HXh6nuxfMqao9XpXC+WZeMg7x5n13mIlBgxyVaXgg0mx5buO8y69WuSyFnY7ojJ8XXXyoipud1rO4N8Kd2zzjaCSX6SfQdT3WtU21DQweQsrN9QECMmX8HU/DMQ6YjJ3bkepaQ9ixGTi2wq6yeYPs4v+JvK7eRilZt+ZblmNcreILCV0dq+nZnfcqwvND1ianJ32VTO1RO862w9mDxOst9ganiNHC35DaaDOj/OL6w75mKuQuf8zldDfhVu1D478wgm63JY72rYU7kmFs79rjHlVvvky0aSHneS15jKHA8OdqYnyktxPpbArXvLOfh3lhx8odkro7HVXEK2ZeWmlBY2x9237ZXmrTvz2eancr53P3gFqWrF1DkpcKxuSOtsZyonO8nSYPJ/jaSkeSGvc7uydJ3YOthLWlg1FCqPngIIJsfJdyx+u+LGXimvuhyyCyfl/6nco5R71Une43gqB+BQ1LxUqTCCCYByCCYAyiGYACiHYAKgHIIJgHIIJgDKIZgAKIdgAqAcggmAcggmAMoJMpiKxeKnT5+O+hMBOPaCDCZd13d3d4/6EwE49oIMpv39/WKxuLu7y7gJQDuCDCYrm3RdLxaL7wGgVQEHEwC0j2ACoByCCYByCCYAyvk/q0PdzDjGwUoAAAAASUVORK5CYII=" alt="" />
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"/><?--引用插件css文件-->
7 <style>
8 .c{
9 color: red;/*给引用的样式添加新的样式*/
10 }
11 </style>
12 </head>
13 <body>
14 <i class="fa fa-leaf c" aria-hidden="true"></i><!--注意class引用多个样式-->
15 </body>
16 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAAdCAIAAABZgsdLAAABBElEQVRYhe2WrY6DQBRG71sgkX0EZGUlEolErpxHGIms7CNUIkdWIpFI5EjkqSihYYFNmhQmy8zJVaO+k/uTEXxFXAdwRjD3j0/NW/KYotoky778aW4bzJ2yHKpIiQURJKPbK+BmrJjbhp8zIqv12DfmBiyZtxXJuvNxzTvS0TAiv1K39ACo8f2Q016Xg16c01hsg845RZOGX24Okn6bmflDIUJS0IJRRPNRjzC9g6TfZt5zjQimpyqWN1z//xUHFsyNWj9sMdfaRchNmJq/+qxu6PT3hGcl3RGGfGRqfs9I9HDJe0ttMOZ9249F+Lf7RzD3j2DuH8HcP4K5fwRz/wjm/vEE6wB0fm4ZAUAAAAAASUVORK5CYII=" alt="" />
8）对于float实现子标签飘起来：
以后再使用float的时候 ，网页需要有如下部分。好处自动撑起背景色。因为高度的不确定性。
1 .clearfix:after{
2 content: '.';/*.撑起背景色*/
3 display:block;/*默认是内联标签*/
4 clear: both;/*让子div float起来*/
5 visibility: hidden;/*隐藏.*/
6 height: 0;/*让原先的.占有高度变为0*/
7
8 }
9 <div class="clearfix">
10 <div class="inner" style="float: left">OK</div>
11 <div class="inner1"style="float: left">good</div>
12 </div>
code:需要注意的是：背景色是在clearfix中定义的。不是在after中定义的。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .clearfix{
8 background-color: red;
9 }
10 .clearfix:after{
11 content: '.';/*.撑起背景色*/
12 display:block;/*默认是内联标签*/
13 clear: both;/*让子div float起来*/
14 visibility: hidden;/*隐藏.*/
15 height: 0;/*让原先的.占有高度变为0*/
16
17 }
18 .inner{
19 float: left;
20
21 }
22 .inner1{
23 float: left;
24 height: 50px;
25 background-color: #EEEE00;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="clearfix">
31 <div class="inner">OK</div>
32 <div class="inner1">good</div>
33 </div>
34 </body>
35 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAABUCAIAAABP+WbNAAAByklEQVR4nO3bS07CYABG0e5/PYZlMXADOiDBprQV9edW8dycQa1oSJMvPMTpVVLbdPQdkP5dVifVTaeXE1Ca3iS1WZ1UZ3VSndVJdVYn1VmdVGd1Up3VSXXbq5umLzmfH+ur9wd+LauDmtVBzeqg9snqrn38wOzM/PhBY7tkdTyTvdUtxrZ//LhHOavjyWyubrq96fbBm9XB3b6/usUNrA7u9M3VTRurW7R4ebY4uXP+9luHXykYZeRj3WJmq8fzL7fOrx4ffqVglJGv60atbvX84VcKRhn8bsrW00irg6sfrW5+fLsWq4NVg/9eN2/I67rrrzr8SsEoIz+bsr+irSefq+fne1vcAfjrRn4Oc2d1P3f4lYJRBn/6eeexy+rgwv8cQM3qoGZ1ULM6qFkd1KwOalYHNauDmtVBzeqgZnVQszqoWR3UrA5qVgc1q4Oa1UHN6qBmdVCzOqhZHdSsDmpWBzWrg5rVQc3qoGZ1ULM6qFkd1KwOalYHNauDmtVBbXt1kh6T1Ul1VifVWZ1UZ3VSndVJdVYn1VmdVGd1Up3VSXVWJ9VZnVRndVKd1Ul1VifVWZ1UZ3VSndVJdVYn1VmdVGd1Up3VSXXvX36rMhpeoaMAAAAASUVORK5CYII=" alt="" />
9）尖角的图标的形成。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .a{
8 display: inline-block;
9 border-left: solid red 15px;
10 border-right: solid gold 15px;
11 border-bottom: blue solid 15px;
12 border-top: solid black 15px;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="a"></div>
18 </body>
19 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAqCAIAAAClYzUyAAAA3ElEQVRYhe3QuxHDIBRE0deiKpA6E125HBzIYxkE77sMDtiIGYJ7gPLs0WzAEizBPwoSDdmxce8s74jOEfmXRYBFfPJWAQpx5x2COKLI+wQRRJ13C3yIRj4isCLa+aBAj+jm4wINgstDBDxCyKMEPYScBwqeCFUeK/hFaPNwwYUw5EcIEu3Hdk4TJNqvowEBFHzzNgRKUOUNCIigmdci4gImr0IEBWJeRkQEyryAcAtMeQ7hEzjyXYRD4M63EVZBMN9AmASQfI3QC4D5AqEUwPM3QvsHM7YES5Bzzm9ohO5gBIl+BgAAAABJRU5ErkJggg==" alt="" />
如果想取其中的一一个三角，可以用transparent透明色。来遮盖其他三角。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .a{
8 display: inline-block;
9 border-left: solid transparent 15px ;
10 border-right: solid transparent 15px;
11 border-bottom: blue transparent 15px;
12 border-top: solid black 15px;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="a"></div>
18 </body>
19 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAmCAIAAAAEBC8sAAAAoUlEQVRYhe3WwQ2AMAiFYTbtaCxhOpgL4M2DsbU8INKEPwzw3Xh0Jo7+BsyifvS0R5K4wqEVDq1waFvhmJkCaq054CJ8mOwd5+uDZUOcl88im+HsPqPsA2fx2WXfOMznIlvCaX1eslXcus9RpsCt+HxlOtzc5y5T40a+CJlgj//hC5IJvEpuX5xMLJOJmUNlstmeS1Xh0AqHVji0wqEVDu0CZT80vxr6W7kAAAAASUVORK5CYII=" alt="" />
10）后台管理页面。利用absolute来确定各个div的位置。
注意：给body标签添加margin:0 auto保证主体部分没有边框！！！！
后台管理的布局：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVYAAAEKCAIAAADGgepYAAAKMElEQVR4nO3avU5b6RYG4H0taVJbkNItl4CLSAgptW+AAiFZ4hZQREmBlGrq1Glo0qdPRZNLmFP4h72N+Vmcxax4f8/SU8wkOZn3vGG/OIbuX+dcw9dVB3DOVZ4JcK7pMwHONX0mwLmmzwQ41/SZAOeaPhPgXNNnApxr+kyAc02fCXCu6TMBzjV9JsC5ps8EONf0mQDnmj4T4FzTZwKca/pMgHNNnwlwrukzAc41fSbAuabPBDjX9JkA55o+E+Bc02cCnGv6TIBzTV/lBHTOuXe71z6G7/qQv/Df7rqvv+6BdCYAmmYCoGkmAJpmAqBpJgCaZgKgaSYAmmYC9svd8eTw+Pv911/3i7PDR9/isfyp22n/xyaL49mjXzi7Xf6G81k3vV7+zrfTyWKx+Q9dn3w4u6v+P8t/wQTsl4cJeNrttDuZL//5++LD5sG+Ptk8+Ru9CbhfnB2uH/ve78DYmYC9cTwZfG5fPPkrt18FLK5Ptl4EbB77/gR8/XV3PDmZb/8gI2cC9svttIu/Chh+/l8+4fP+3w4mJ9NJt+MevWpgfEzAXll9Pj88vl582PXMdrPb3a8CVj++9Un+7njiE37rTMA+mZ+dTCeH09nh48/qz/0Pn5qA76sdsQItMwF75HY6WxxPDo+/r/7Svvzx+aybXj98Pp8/ev9/OltPwGSx6E3AfHYynXXTa2/+Nc0E7I3F2eH0uvcVgfW7/atHevsN/96vXP7Uo1//4exu+c+Ls5Pjs+23DLuX33RgDEzA3pifLRYPD/bg0/70+r73TuHyNcLd+isIqyd5+eqg97UAb/5z/9UE7Jv1BFyfbL4uuHmM11/YX27B4DsI5rPV1xHns67/PT8mABOwX5YP9uBLg/PZ4K8G87PDbnYyffj8fzvtth77wTSYgMaZgP3S/9y++eLf4M28zRO+6zuIt7/gv34v4Ilf+dw3IDESJgCaZgKgaSYAmmYCoGkmAJpmAqBpJgCaZgKgaSYAmmYCoGkmAJpmAqBpJgCaZgKgaSYAmmYCoGkmAJpmAqBpJgCaZgKgaSYAmmYCoGkmAJpmAqBpJgCaZgKgaSYAmrY3E+Cce6d77WP4rg/5C//trvvz+x8gnQmAppmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjwDRJmAzCrLM0CUCcissjxDkvPT7ujbi7/s5qjrPl7+KE/L/8UEZFZZniHJExNwc9S9cBZh/4x3An58+XTw5efqX68uD3Z+dD7+WD8/fevH8V5PwLfPzz7an8///P7nz83R6h92e6pk/mpjm4AXPpSX9zANy89smxV4+/P/Z/8n4PRm86/np1sVDSfg2+f+J/zz01WlJmAvjW0CHrz0KuDnxcdnVuLTxdUbqiz/43yzwQQMqut/8r+6POi6bv0r++v548unrW1lT4x3AgZWH7v9Z/vnxcfecz74G8HwpwJVlv9xvll/Apbj+LAIO17/X10eLB/489M3zSV/j/FNwMPT/vzbVF4F9D1MwI8vn7qjb/1nezABy3oHfW5PBntlfBMwfB3bf7F6c9R/pepVQN9qAgZf57u6POi6z+fDtwBeuufeL+RvNMYJ+L3jtevPi487fsSrgLXV4739l/mry4OPlxeDModvHD4U7q8De2psE/D8g93/TOVVQN/uB3vpxgSM2dgmoO/b5+7TxZfT7uj0mY/vldd9P9xLVZb/cb5ZaAKyXjfxNxjnBPTeoFo928MvZce/feB1VZb/cb7Zrgk4P1030f8prwJGZmwTsHy2n3iFv/5iwY63rFp/FUCzxjYBj7zy2TYBNGr0E/CfVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5RkgygRkVlmeAaJMQGaV5Rkgam8mwDn3Tvfax/BdH/IR3OurdG4fz8f3C2cC3LjPx7dzTZ8JcK7pMwHONX0mwLmmzwQ41/SZAOeaPhPgXNNnApxr+kyAc02fCXCu6TMBzjV9/wPEpRpPNAxPiQAAAABJRU5ErkJggg==" alt="" />
code：利用absolute来固定位置。以及overflow 当内容溢出<div>的范围的时候，自动给内容创建拉动的动作条。保证菜单不超出范围。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pd_header{
8 height: 45px;
9 background-color: cornflowerblue;
10 line-height: 45px;
11 padding-left: 15px;
12 }
13 body{
14 margin: 0 auto;
15 }
16 .pd_body{
17 width: 200px;
18 background-color: blanchedalmond;
19 position: absolute;
20 top:45px;
21 left: 0;
22 bottom: 0;
23
24 }
25 .pd_content{
26 position: absolute;
27 top:45px;
28 left:202px;
29 bottom: 0;
30 right:0;
31 background-color: #EEEE00;
32 overflow: scroll;/*注意这个样式，当内容溢出的时候给内容创建一个拉动的动作条保证菜单不超出*/
33 }
34 </style>
35 </head>
36 <body>
37 <div class="pd_header">标题一</div>
38 <div class="pd_body"></div>
39 <div class="pd_content">
40 dadadadasdad<br/>
41 dadadadasdad<br/>
42 </div>
43 </body>
44 </html>
效果：
aaarticlea/png;base64,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" alt="" />
11)模拟对话框：
首先看下对话框的结构：
aaarticlea/png;base64,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" alt="" />
解释：
1）底层上面有按钮，当用户点击添加按钮的时候，会弹出对话框。当对话框出现的时候，底层按钮，用户不可以进行点击。所以需要遮罩层。
2）遮罩层：主要作用是当用户点击添加按钮的时候，用户的不可以点击添加按钮。
设计思想：当用点击添加按钮，按钮不可以点击，对话框弹出。当用户不点击按钮的时候，遮罩层和对话框是被隐藏的（display:none）。而且要保证遮罩层要在对话框下面(z-index)以及遮罩层的透明度（opacity 0是全透明0-1之间）。让
用户点击按钮，弹出对话框的时候可以看到添加按钮。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .fist{
11 height: 2000px;
12 }
13 .second{
14 position: fixed;
15 top:0;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 background-color: black;
20 opacity: 0.4;
21 z-index: 11;
22 }
23 .modle{
24 height: 200px;
25 width: 400px;
26 background-color: #eeeeee;
27 position: fixed;
28 top: 50%;
29 left: 50%;
30 margin-left: -200px;
31 margin-top: -100px;
32 z-index: 12;
33 }
34 .text{
35 height: 200px;
36 width: 400px;
37 padding-right: 0;
38 padding-bottom: 0;
39 opacity:1;
40 color: red;
41
42 }
43 </style>
44 </head>
45 <body>
46 <div><input type="button" value="提交"/></div>
47 <div class="fist"> </div>
48 <div class="second "></div>
49 <div class="modle ">
50 <input class="text" type="text"/>
51 </div>
52 <div class="fist"></div>
53 </body>
54 </html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAACTCAIAAADtBwlpAAAEcElEQVR4nO3ZIW8bWRiF4fkXhoaGhYGFhoaGJZUMLbWgan9AA026qVa7kuFAq8jQMKCVLO2CQkOXDTQ8Czqq08xEm2OnzcnV+8gguvo+3Sh+NbGS6k/g6ase+xsAHgAdowR0jBLQMUpAxygBHaMEdIwS0DFKQMcoAR2jBHSMEtAxSkDHKAEdowR0jBLQMUpAxygBHaMEdIwS0DFKQMcoAR2jBHSMEtAxSkDHKAEdn+L91afXf3zhlfOiY9v7q08vr769+/tfXjkvOra9+vD57V//CEno2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRseB6NhGx4Ho2EbHgejYRse2qvrlNzx2FU8PHdvoONDtjuup6v1PP9TTTr7b15rU93rr7j/56LfQcaAbHR+0fKGqulHkaSc30PFJ6Nh27Hgx0nyl5eRY5GknkjaXGlYajrVcHLtZzTUaqKo0mmp7uHtyp/lYVaXhWOuduXvmZN/V3V06DnTs+HCQpPpGkaed7Gs9m2svaa/5s/a93y11calGkrScaLq6c3I905uNJDVrDWZqnN0zJ7tX9+7ScaDO5+NJ57OvebKaarFtv94te36PX1+2h72T65kuZtp81eH23v/vnjnZvbp3l44DPXzHt57NP7rZrbVY6MVzDav2sH+yUf39N/5Q81Wb1H13z5vsXt27S8eBftPzeLvQxUzrjXaNNvd7UjZbTQda7Y3dMye7V/M8fioevuNmreFUO0mNLi+OMbUfPb9qOmgPeyfrSTupRvOhNgdj98zJ7tW9u3Qc6OE7lrT9qNFAw7Hqj+17f9hqOlJVaTzXda3qzZ2TP/5oMBhpce3tnjvZubp3l44D8f88Gx0HomMbHQeiYxsdB6LjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQHRso+NAdGyj40B0bKPjQP8BTl1ZKEr/DRUAAAAASUVORK5CYII=" alt="" />
Python学习-day14-前台总结的更多相关文章
- python学习 day14 (3月19日)----
04 json # 1. 用于多种语言 交互 编程语言通用数据 # 内置的 不需要安装直接导入使用 import json # 导入 # # dumps loads dump load # dic = ...
- python学习-day14：集合，函数，格式化
一.集合 定义:由不同元素组成的集合.集合是一组无序排列的可hash值, 可以作为字典的key.元素必须是不可变类型:只能存放数字,字符串,字典 特性:集合的目的是将不同的值放在一起,不同的集合之间可 ...
- python学习day14 装饰器(二)&模块
装饰器(二)&模块 #普通装饰器基本格式 def wrapper(func): def inner(): pass return func() return inner def func(): ...
- Python学习 day14
一.生成器函数进阶 1.最后一个yield后的代码 先看示例: def generator(): print(123) yield 'a' print(456) yield 'b' print(789 ...
- python学习Day14 带参装饰器、可迭代对象、迭代器对象、for 迭代器工作原理、枚举对象、生成器
复习 函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.返回内部函数对象----> 延迟执行, 开放封闭原则: 功能可以拓展,但源代 ...
- Python学习计划
---恢复内容开始--- Python学习计划 https://edu.csdn.net/topic/python2?utm_source=blog4 匠人之心,成就真正Python全栈工程师 ...
- python学习博客地址集合。。。
python学习博客地址集合... 老师讲课博客目录 http://www.bootcdn.cn/bootstrap/ bootstrap cdn在线地址 http://www.cnblogs. ...
- 【目录】Python学习笔记
目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...
- python学习之旅
python学习分类 python基础 +- day01——python初始.变量.常量.注释.基础数据类型.输入.if day02——while.字符串格式化.运算符.编码初识 day03—— ...
- Python学习--04条件控制与循环结构
Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...
随机推荐
- 美国L1签证面谈的时候一般VO会问到什么问题？
L签证:L签证签发给被其中国公司调派到美国分公司或合资公司工作的人员.申请人必须将在美国担任经理级职务或具有专业知识,且在申请签证前的三年中至少为同一雇主或公司连续工作至少一年.签证签发费将因签证的入 ...
- 真实场景中WebRTC 用到的服务 STUN, TURN 和 signaling
FQ收录转自:WebRTC in the real world: STUN, TURN and signaling WebRTC enables peer to peer communication. ...
- 使用SAP云平台 + JNDI访问Internet Service
以Internet Service http://maps.googleapis.com/maps/api/distancematrix/xml?origins=Walldorf&destin ...
- 数组的reduce方法的应用
var values = [1,2,3,4,5] var sum = values.reduce(function(pre,cur,index,array){ return pre + cur }) ...
- RPC - 麻雀虽小，五脏俱全
说起 RPC (远程过程调用),大家应该不陌生.随着微服务.分布式越来越流行,RPC 应用越来越普遍.常见的 RPC 框架如:Dubbo.gRPC.Thrift 等.本篇文章不是介绍各种 RPC 的使 ...
- 国产中标麒麟Linux部署dotnet core 环境并运行项目 （二） 部署运行控制台项目
背景 在上一篇文章安装dotnet core,已经安装好dotnet core了.之前只是安装成功了dotnet, 输入dotnet --info,可以确认安装成功了,但是在运行代码时,还是报错了,本 ...
- 操作系统(5)_内存管理_李善平ppt
i386先通过段是管理,在通过页是管理
- SunmmerVocation_Learning--Java数组的创建
一维数组声明方式: type var[] 或 type[] var; 如int a[], int[] a; Java中声明数组不能指定其长度,如int a[5]是非法的. 一维数组对象的创建: Jav ...
- 【Python学习之七】面向对象高级编程——使用@property
参考来自廖雪峰Python教程:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/ ...
- 【jenkins】jenkins服务器与svn服务器时间不一致出现的问题
问题描述: svn提交了一次更新包,到了jenkins提交更新的时候,第一次代码没有生效,然后重新提交了一次,第二次才生效. 问题排查: 1.首先第一反应比对了下两次更新的包文件是否一致,然后发现大小 ...