CSS深入理解学习笔记之absolute
1、absolute和float
拥有相同的特性表现：
①包裹性（容器应用之后，可以包裹里面的内容）；
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute的包裹性</title> 7 <style> 8 .box { 9 padding: 10px; 10 background-color: #f0f0f0; 11 } 12 input { 13 position: absolute; top: 234px; 14 width: 160px; height: 32px; 15 font-size: 100%; 16 } 17 </style> 18 </head> 19 20 <body> 21 <div id="box" class="box"><img src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191"></div> 22 <input id="button" type="button" value="容器absolute化"> 23 <script> 24 var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button"); 25 if (eleBox != null && eleBtn != null) { 26 eleBtn.onclick = function() { 27 if (this.absolute) { 28 eleBox.style.position = ""; 29 this.value = "容器absolute化"; 30 this.absolute = false; 31 } else { 32 eleBox.style.position = "absolute"; 33 this.value = "容器去absolute"; 34 this.absolute = true; 35 } 36 }; 37 } 38 </script> 39 </body> 40 </html>
②破坏性（内容应用之后，会破坏父容器）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute的破坏性</title> 7 <style> 8 .box { 9 padding: 10px; 10 background-color: #f0f0f0; 11 } 12 input { 13 position: absolute; top: 234px; 14 width: 160px; height: 32px; 15 font-size: 100%; 16 } 17 </style> 18 </head> 19 20 <body> 21 <div class="box"><img id="image" src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191"></div> 22 <input id="button" type="button" value="图片absolute化"> 23 <script> 24 var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button"); 25 if (eleImg != null && eleBtn != null) { 26 eleBtn.onclick = function() { 27 if (this.absolute) { 28 eleImg.style.position = ""; 29 this.value = "图片absolute化"; 30 this.absolute = false; 31 } else { 32 eleImg.style.position = "absolute"; 33 this.value = "图片去absolute"; 34 this.absolute = true; 35 } 36 }; 37 } 38 </script> 39 </body> 40 </html>
2、absolute和relative
absolute和relative是分离的，对立的。父容器是relative，子元素是absolute，可以限制子元素对父元素破坏性的影响。
独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。
<div style = "overflow:scroll;"> <a href="javascript:void(0);" title="close" style="position:absolute;"></a> <img src="img1.jpg" /> <img src="img2.jpg" /> </div>
3、无依赖的absolute定位
无依赖是指不受父元素relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。
特性：①脱离文档流；
②位置跟随；
③去浮动（效果同上图）；
④IE7下会inline-block化（解决方案：在元素外层套一个空div标签）
4、absolute的实际应用
（1）图片图标绝对定位覆盖：
先来点小技巧，在实际开发中，为了好看标签一般都各占一行。为了消除不必要的空格，可以如下处理：
效果图：
实例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>图标定位二三事</title> 6 <style> 7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 body, h3, h5 { margin: 0; } 9 img { border: 0 none; vertical-align: bottom; } 10 .l { float: left; }.r { float: right; } 11 .constr { width: 1200px; margin-left: auto; margin-right: auto; } 12 .header { background-color: #2A2C2E; } 13 .nav { height: 60px; } 14 .nav-list { float: left; font-size: 14px; font-weight: 400; } 15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; } 16 .nav-a:hover { color: #fff; } 17 18 .course { padding-top: 10px; } 19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; } 20 .course-list-img { background-color: #6396F1; } 21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; } 22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; } 23 24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); } 25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; } 26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; } 27 </style> 28 </head> 29 30 <body> 31 <div class="header"> 32 <div class="constr"> 33 <div class="nav"> 34 <h3 class="nav-list"> 35 <a href="http://www.imooc.com/course/list" class="nav-a">课程</a> 36 </h3> 37 <h3 class="nav-list"> 38 <a href="http://www.imooc.com/wenda" class="nav-a">问答</a> 39 </h3> 40 <h3 class="nav-list"> 41 <a href="http://www.imooc.com/seek/index" class="nav-a"> 42 求课<i class="icon-hot"></i> 43 </a> 44 </h3> 45 </div> 46 </div> 47 </div> 48 49 <div class="main"> 50 <div class="constr"> 51 <div class="course"> 52 <a href="http://www.imooc.com/view/121" class="course-list"> 53 <div class="course-list-img"> 54 <span class="icon-recom">推荐</span> 55 <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!-- 56 --><i class="icon-vip">vip</i> 57 </div> 58 <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5> 59 <div class="course-list-tips"> 60 <span class="l">已完结</span> 61 <span class="r">3514人学习</span> 62 </div> 63 </a> 64 </div> 65 </div> 66 </div> 67 </body> 68 </html>
（2）下拉框定位最佳实践：
效果图：
实例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉框定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; } 9 .course-sidebar { width: 262px; float: left; } 10 .course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; } 11 .course-sidebar-type { height: 380px; } 12 .course-sidebar-search { margin-top: 20px; overflow: hidden; } 13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; } 14 .course-sidebar-search.focus { border-color: #2ea7e0; } 15 .course-search-input:focus { outline: 0 none; } 16 .course-search-input::-ms-clear { display: none; } 17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; } 18 .focus .course-search-btn { background-position: 0 -38px; } 19 20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; } 21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; } 22 .course-sidebar-result > li:hover { background-color: #f9f9f9; } 23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; } 24 .course-sidebar-result a:hover { color: #000; } 25 </style> 26 </head> 27 28 <body> 29 <div class="constr"> 30 <div class="course-sidebar"> 31 <div class="course-sidebar-type"></div> 32 <div class="course-sidebar-search"> 33 <ul id="result" class="course-sidebar-result"> 34 <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li> 35 <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li> 36 <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li> 37 <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li> 38 <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li> 39 </ul> 40 <input class="course-search-input" placeholder="课程搜索"> 41 <a href="javascript:" class="course-search-btn">搜索</a> 42 </div> 43 </div> 44 </div> 45 <script> 46 (function() { 47 var input = document.getElementsByTagName("input")[0], 48 result = document.getElementById("result"); 49 50 if (input && result) { 51 input.onfocus = function() { 52 this.parentNode.className = "course-sidebar-search focus"; 53 if (this.value != "") { 54 // show datalist 55 result.style.display = "block"; 56 } 57 }; 58 input.onblur = function() { 59 if (this.value == "") { 60 this.parentNode.className = "course-sidebar-search"; 61 } 62 // hide datalist 63 result.style.display = "none"; 64 }; 65 66 // IE7 that wrap a DIV for avoid bad effect from float 67 if (!document.querySelector) { 68 var div = document.createElement("div"); 69 input.parentNode.insertBefore(div, input); 70 div.appendChild(result); 71 } 72 // events of datalist 73 if ("oninput" in input) { 74 input.addEventListener("input", function() { 75 if (this.value.trim() != "") { 76 result.style.display = "block"; 77 } else { 78 result.style.display = "none"; 79 } 80 }); 81 } else { 82 // IE6-IE8 83 input.onpropertychange = function(event) { 84 event = event || window.event; 85 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) { 86 if (this.value != "") { 87 result.style.display = "block"; 88 } else { 89 result.style.display = "none"; 90 } 91 } 92 } 93 } 94 } 95 96 })(); 97 </script> 98 </body> 99 </html>
（3）居中以及边缘对齐定位：
效果图：
实例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>居中、边缘定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; } 9 .course-content { float: right; position: relative; width: 920px; min-height: 1200px; background: #fff; } 10 .course-list-x { padding: 20px 10px; overflow: hidden; } 11 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; } 12 13 .goto_top_diaocha, .goto_top_app, .goto_top_feed { display: block; width: 48px; height: 48px; margin-top: 10px; background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat; } 14 .goto_top_diaocha { background-position: -48px 0; } 15 .goto_top_diaocha:hover { background-position: -48px -50px; } 16 .goto_top_app { background-position: -96px 0; } 17 .goto_top_app:hover { background-position: -96px -50px; } 18 .goto_top_feed { background-position: -144px 0; } 19 .goto_top_feed:hover { background-position: -144px -50px; } 20 21 .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; } 22 .course-loading { position: absolute; margin-left: -26px; } 23 24 .course-fixed-x { height: 0; text-align: right; overflow: hidden; } 25 .course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; } 26 </style> 27 </head> 28 29 <body> 30 <div class="constr"> 31 <div class="course-content"> 32 <div class="course-list-x"> 33 <div class="course-list"></div> 34 <div class="course-list"></div> 35 <div class="course-list"></div> 36 <div class="course-list"></div> 37 <div class="course-list"></div> 38 <div class="course-list"></div> 39 </div> 40 <div class="course-loading-x"> 41 <img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中..."> 42 </div> 43 <div class="course-fixed-x"> 44 <div class="course-fixed"> 45 <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a> 46 <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a> 47 <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a> 48 </div> 49 </div> 50 </div> 51 </div> 52 </body> 53 </html>
（4）各种对齐溢出技巧实例：
效果图：
实例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本图标对齐与定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 a { color: #50B6E5; } 9 .constr { width: 1200px; margin-left: auto; margin-right: auto; } 10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; } 11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; } 12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; } 13 .regist-group { margin-top: 20px; overflow: hidden; } 14 .regist-label { width: 70px; padding-top: 10px; float: left; } 15 .regist-cell { display: table-cell; *display: inline-block; } 16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; } 17 .regist-code-input { width: 130px; } 18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; } 19 .regist-btn:hover { background-color: #33a646; } 20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; } 21 22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; } 23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; } 24 .regist-warn { padding-left: 20px; color: #be3948; } 25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; } 26 </style> 27 </head> 28 29 <body> 30 <div class="constr"> 31 <div class="regist-head">注册</div> 32 <div class="regist-body"> 33 <div class="regist-main"> 34 <div class="regist-group"> 35 <label class="regist-label"><span class="regist-star">*</span>登录邮箱</label> 36 <div class="regist-cell"> 37 <input type="email" class="regist-input"><span class="regist-remark regist-warn"> 38 <i class="icon-warn"></i>邮箱格式不准确（演示） 39 </span> 40 </div> 41 </div> 42 <div class="regist-group"> 43 <label class="regist-label"><span class="regist-star">*</span>登录密码</label> 44 <div class="regist-cell"> 45 <input type="password" class="regist-input"><span class="regist-remark"> 46 请输入6-16位密码，区分大小写，不能使用空格 47 </span> 48 </div> 49 </div> 50 <div class="regist-group"> 51 <label class="regist-label"><span class="regist-star">*</span>用户昵称</label> 52 <div class="regist-cell"> 53 <input type="password" class="regist-input"> 54 </div> 55 </div> 56 <div class="regist-group"> 57 <label class="regist-label">手机号码</label> 58 <div class="regist-cell"> 59 <input type="tel" class="regist-input"> 60 </div> 61 </div> 62 <div class="regist-group"> 63 <label class="regist-label"><span class="regist-star">*</span>验 证 码</label> 64 <div class="regist-cell"> 65 <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg"> 66 </div> 67 </div> 68 <div class="regist-group"> 69 <label class="regist-label"> </label> 70 <div class="regist-cell"> 71 <input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label> 72 <p> 73 <a href="javascript:" class="regist-btn">立即注册</a> 74 </p> 75 </div> 76 </div> 77 </div> 78 </div> 79 </div> 80 </body> 81 </html>
5、absolute和层级
absolute具有脱离文档流的特性，因此有一些不成文的规定：
动画尽量作用在绝对定位元素上！
绝对定位元素的层级规律：
-
- 仅有一个绝对定位元素，则它会覆盖普通元素；
- 如果两个绝对定位元素，后来居上；
- 如果多个绝对定位元素，使用z-index：1控制；
- 若非弹窗类的绝对定位元素z-index>2是非常少见的，很有可能是冗余了，需要优化。
6、absolute和定位属性（top/right/bottom/left）
- 定位属性是相对于就近父级元素position为relative/absolute/fixed/sticky的元素进行定位的；
- 若只有一个定位属性，元素的位置会受到兄弟元素的影响。
7、top/right/bottom/left和width/height
相互替代性（例如：{position:absolute;width:100%;height:100%}=={position:absolute;top:0;right:0;bottom:0;left:0;})，这个特性只有IE7+浏览器支持；
相互支持性：
①容器无需固定width/height值，内部元素也可以拉伸；
②容器拉伸，内部元素支持百分比width/height值（注：元素百分比height想要起作用，父元素height不能是auto）；
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>高度自适应的九宫格效果</title> 6 <style> 7 html, body { height: 100%; margin: 0; } 8 .page { 9 position: absolute; 10 left: 0; top: 0; right: 0; bottom: 0; 11 } 12 .list { 13 float: left; 14 height: 33.3%; width: 33.3%; 15 position: relative; 16 } 17 .list:before { 18 content: ''; 19 position: absolute; 20 left: 10px; right: 10px; top: 10px; bottom: 10px; 21 border-radius: 10px; 22 background-color: #cad5eb; 23 } 24 .list:after { 25 content:attr(data-index); 26 position: absolute; 27 height: 30px; 28 left: 0; right: 0; top: 0; bottom: 0; 29 margin: auto; 30 text-align: center; 31 font: 24px/30px bold 'microsoft yahei'; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="page"> 38 <div class="list" data-index="1"></div> 39 <div class="list" data-index="2"></div> 40 <div class="list" data-index="3"></div> 41 <div class="list" data-index="4"></div> 42 <div class="list" data-index="5"></div> 43 <div class="list" data-index="6"></div> 44 <div class="list" data-index="7"></div> 45 <div class="list" data-index="8"></div> 46 <div class="list" data-index="9"></div> 47 </div> 48 </body> 49 </html>
相互合作性：margin:auto的情况下，width/height影响尺寸，top/right/bottom/left影响位置。这个特性需要IE8+浏览器的支持。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>left/right拉伸和width同时存在</title> <style> .image { position: absolute; left: 0; right: 0; width: 50%; } .button { padding-top: 200px; } .button input { width: 280px; height: 40px; font-size: 20px; } </style> </head> <body> <img class="image" src="http://img.mukewang.com/547c34c9000171a002560191.jpg" height="191"> <p class="button"> <input type="button" value="添加margin: auto;" onClick="document.getElementsByTagName('img')[0].style.margin = 'auto';"> </p> </body> </html>
8、absolute和移动web布局
（1）body降级，子元素升级：
升级的子div满屏：{position:absolute;top:0;right:0;bottom:0;left:0;}
子div满屏前提：html,body{height:100%;}
（2）各模块-头尾、侧边栏（PC端）各居其位
1 header,footer{position:absolute;left:0;right:0;} 2 heder{height:48px;top:0;} 3 footer{height:52px;bottom:0;} 4 5 aside{ 6 width:250px; 7 position:absolute;left:0;top:0;bottom:0; 8 }
（3）内容区域想象成body
1 .content{ 2 position:absolute; 3 top:48px;bottom:52px; 4 left:250px; //如果有侧边栏 5 overflow:auto; 6 }
此时的头尾部以及侧边栏都是fixed效果。避免了移动端position:fixed实现的诸多问题。
（4）全屏覆盖与page平级
1 .overlay{ 2 position:absolute; 3 top:0;right:0;bottom:0;left:0; 4 background-color:rgba(0,0,0,.5); 5 z-index:9; 6 }
1 <div class="page"></div> 2 <div class="overlay"></div>
（5）实例效果
PC：
手机：
实例代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 6 <title>慕课网-绝对定位整页布局演示</title> 7 <link rel="stylesheet" href="absolute.css"> 8 <style> 9 body { font-family: 'microsoft yahei'; } 10 </style> 11 </head> 12 13 <body> 14 <div class="page"> 15 <div class="header"> 16 <h1>慕课网</h1> 17 <a href="javascript:" class="icon-add">添加</a> 18 <a href="javascript:" class="icon-search">搜索</a> 19 </div> 20 <div class="content"> 21 <div class=""> 22 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 23 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 24 <div class="cell"> 25 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div> 26 <p>CSS深入理解值绝对定位</p> 27 </div> 28 </a> 29 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 30 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 31 <div class="cell"> 32 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div> 33 <p>如果高度不够，可以手动缩小浏览器高度</p> 34 </div> 35 </a> 36 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 37 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 38 <div class="cell"> 39 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div> 40 <p>此demo是本系列最后一个demo</p> 41 </div> 42 </a> 43 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 44 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 45 <div class="cell"> 46 <div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div> 47 <p>此demo需要在高级浏览器中查看</p> 48 </div> 49 </a> 50 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 51 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 52 <div class="cell"> 53 <div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div> 54 <p>重在原理展示，结构可多变。例如，header放在page外面~~</p> 55 </div> 56 </a> 57 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list"> 58 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 59 <div class="cell"> 60 <div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div> 61 <p>最近鄙人整了个名叫Mobilebone的开源项目</p> 62 </div> 63 </a> 64 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list"> 65 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 66 <div class="cell"> 67 <div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div> 68 <p>就是依赖绝对定位整体布局，大家可以前去围观</p> 69 </div> 70 </a> 71 <a href="http://www.imooc.com/learn/192" class="wechat-list"> 72 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 73 <div class="cell"> 74 <div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div> 75 <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p> 76 </div> 77 </a> 78 <a href="http://www.imooc.com/learn/121" class="wechat-list"> 79 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 80 <div class="cell"> 81 <div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div> 82 <p>CSS深入理解之浮动</p> 83 </div> 84 </a> 85 <a href="http://www.imooc.com/learn/121" class="wechat-list"> 86 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg"> 87 <div class="cell"> 88 <div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div> 89 <p>同样精彩，欢迎支持~</p> 90 </div> 91 </a> 92 </div> 93 </div> 94 95 <div class="footer"> 96 <a href="http://www.imooc.com/course/list"> 97 <i class="icon-wechat"></i>课程 98 </a> 99 <a href="http://www.imooc.com/wenda"> 100 <i class="icon-contacts"></i>问答 101 </a> 102 <a href="http://www.imooc.com/seek/index"> 103 <i class="icon-finds"></i>求课 104 </a> 105 <a href="http://www.imooc.com/space/course" class="active"> 106 <i class="icon-mes"></i>我的课程 107 </a> 108 </div> 109 </div> 110 </body> 111 </html>
1 /* wechat.css */ 2 body { 3 margin: 0; 4 -webkit-user-select: none; 5 user-select: none; 6 -ms-touch-action: none; 7 } 8 9 /* construction */ 10 html, body, .page { 11 height: 100%; width: 100%; 12 overflow: hidden; 13 } 14 .page { 15 position: absolute; left: 0; top: 0; 16 } 17 body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } 18 a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } 19 h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; } 20 ul,ol{ margin: 0; list-style-type: none; } 21 22 .header, .footer, .content { position: absolute; left: 0; right: 0; } 23 .header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; } 24 .header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; } 25 .header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; } 26 .header > .icon-search, .header > .icon-add { float: right; } 27 .footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; } 28 .footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; } 29 .footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; } 30 .footer > .active { color: #45c018; } 31 .content { top: 48px; bottom: 53px; overflow: auto; } 32 33 .icon-search, .icon-back, .icon-add { background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat; } 34 .icon-back { background-position: 0 -96px; } 35 .icon-add { background-position: 0 -48px; } 36 .icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top; } 37 .active .icon-wechat { background-position: center -35px; } 38 .icon-contacts { background-position: center -70px; } 39 .active .icon-contacts { background-position: center -105px; } 40 .icon-finds { background-position: center -140px; } 41 .active .icon-finds { background-position: center -175px; } 42 .icon-mes { background-position: center -210px; } 43 .active .icon-mes { background-position: center -245px; } 44 .icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; } 45 .icon-find-2 { background-position: 0 -30px; } 46 .icon-find-3 { background-position: 0 -60px; } 47 .icon-find-4 { background-position: 0 -90px; } 48 .icon-find-5 { background-position: 0 -120px; } 49 .icon-find-6 { background-position: 0 -150px; } 50 .icon-find-7 { background-position: 0 -180px; } 51 .icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; } 52 .icon-me-2 { background-position: 0 -30px; } 53 .icon-me-3 { background-position: 0 -60px; } 54 .icon-me-4 { background-position: 0 -90px; } 55 56 57 .wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; } 58 .wechat-list:last-child { border-bottom: 0; } 59 .wechat-list > img { width: 48px; height: 48px; float: left; } 60 .wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; } 61 .wechat-h-time { overflow: hidden; } 62 .wechat-h-time > h5 { font-size: 100%; float: left; } 63 .wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; } 64 .wechat-h-time .business { color: #54688D; } 65 .wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 66 .wechat-detail { position: relative; z-index: 1; }
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan
