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             &nbsp;<img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
42         </div>
43         <div class="course-fixed-x">
44             &nbsp;<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">&nbsp;</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; }

 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程软文

小程序二维码和小程序带参数二维码生成

2274
来自专栏张戈的专栏

仿异次元百度分享工具条张戈修改版

只要不是高度近视,就会发现张戈博客的文章最近加上了这个仿异次元百度分享工具条。增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及...

4098
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2267
来自专栏菜鸟前端工程师

html+css学习笔记010-垂直对齐0指针0透明

632
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2237
来自专栏葡萄城控件技术团队

文字处理控件功能比较:TX Text Control vs. RichTextBox

任何机构都需要创建和编辑文档,因此在机构的信息化系统中都需要文档的创建、编辑、转换等功能。通常情况下,我们可以使用VisualStudio自带的RichText...

1775
来自专栏静晴轩

CSS实现水平|垂直居中漫谈

利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right mar...

3289
来自专栏听雨堂

Morris图表使用小记

挺好用的,碰到几个问题,有的是瞎试解决了的: 1、我想折线图能够响应单击事件,即点击某个节点后,就能加载进一步的信息,帮助没找到,参照另外一个地方的写法,居然支...

2048
来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

1836
来自专栏互联网杂技

20个为前端开发者准备的文档和指南6

1.SitePoint Sass Reference(SitePoint站点的Sass手册) 它是SitePoint自有的项目,是由我们的常驻高手Hugo Gi...

35910

扫描关注云+社区