慕课网课程学习--信息排列效果

CSS布局理解

1、使用CSS Sprite效果主要用到background的background-position属性。顺序为left top。注意left， top 取值为负值的问题。

background: 简写属性在一个声明中设置所有的背景属性。

例子：

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip (fixed, scroll)
background-attachment
background-image

2、子元素定位为float时，父元素的高度会变成0px。

把父元素撑大的方法：overflow:hidden（条件是在设置width的情况下才有效）.

清除浮动的办法是：clear:both;

3、文字居中：

左右居中：text-algin: center;

上下居中：height:40px; line-height:40px; 设置heigth 和 line-height的值相等实现上下居中。

4、块左右居中：

第一步：设置width 注意：width不可以为100%

第二步：margin: 0 auto; 或者 margin: auto;

除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

5、overflow的用法：

父元素为块状时，设置overflow才有效。

父元素有高度、宽度，父元素设置overflow：hidden; 若子元素大小超过父元素大小部分会被裁掉。

父元素没有宽度、高度，父元素设置overflow:hidden; 那么父元素会根据子元素的大小被撑大。

JS理解

1、window.onload(); 在文件加载完后执行，用法一般是：window.onload(function(){});

2、HTML对象

HTML的各个标签，如<img>,<a>等都有各自的对象属性，可以直接调用。如：

1     var imgs[] = document.getElementsByTagName("img");
2 
3     for(var i=0; i<imgs.length; i++){
4         var src = imgs[i].src;
5 
6     }

源代码

  1 <!DOCTYPE HTML>
  2 <html>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 
  5 </html>
  6 
  7 <head>
  8     <style type="text/css">
  9     ul,
 10     p {
 11         margin: 0;
 12         padding: 0;
 13     }
 14     body {
 15         font-family: Arial;
 16         font-size: 16px;
 17         color: #000;
 18     }
 19     .box {
 20         height: auto;
 21         width: 800px;
 22         margin: 0 auto;
 23         border: 1px solid green;
 24         overflow: hidden;
 25     }
 26     #listbnt,
 27     #cardbnt {
 28         width: 16px;
 29         height: 20px;
 30         display: inline-block;
 31         float: right;
 32         margin: 5px 5px 20px;
 33     }
 34     .bnt-list-on {
 35         background: #E0E0E0 url("../icon/align.jpg") -38px 0px;
 36     }
 37     .bnt-list-off {
 38         background: #E0E0E0 url("../icon/align.jpg") -21px 0px;
 39     }
 40     .bnt-card-on {
 41         background: #E0E0E0 url("../icon/align.jpg") -38px -34px;
 42     }
 43     .bnt-card-off {
 44         background: #E0E0E0 url("../icon/align.jpg") -21px -34px;
 45     }
 46     ul {
 47         clear: both;
 48         list-style: none;
 49         width: 95%;
 50         margin: 0 auto;
 51         overflow: hidden;
 52     }
 53     .a-img {
 54         display: block;
 55         height: 200px;
 56         overflow: hidden;
 57     }
 58     .small {
 59         display: block;
 60         height: 50px;
 61     }
 62 
 63     li {
 64         width: auto;
 65         float: left;
 66         margin: 11px;
 67         border: 1px solid green;
 68     }
 69     .buttom {
 70         background: #E0E0E0;
 71         display: block;
 72         height: 40px;
 73         line-height: 40px;
 74         text-align: center;
 75     }
 76     p a,
 77     p span {
 78         display: block;
 79         padding-left: 10px;
 80     }
 81     a {
 82         text-decoration: none;
 83     }
 84     </style>
 85     <script type="text/javascript">
 86     window.onload = function() {
 87         var listBnt = document.getElementById("listbnt");
 88         var cardBnt = document.getElementById("cardbnt");
 89         var imgs = document.getElementsByTagName("img");
 90 
 91         listBnt.onclick = function() {
 92             listBnt.className = "bnt-list-off";
 93             cardBnt.className = "bnt-card-on";
 94             for (var i = 0; i < imgs.length; i++) {
 95                 imgs[i].src = "../img/small.jpg";
 96                 imgs[i].parentNode.className = "small";
 97             }
 98         }
 99 
100         cardBnt.onclick = function() {
101             listBnt.className = "bnt-list-on";
102             cardBnt.className = "bnt-card-off";
103             for (var i = 0; i < imgs.length; i++) {
104                 imgs[i].src = "../img/big.jpg";
105                 imgs[i].parentNode.className = "a-img";
106             }
107         }
108     }
109     </script>
110 </head>
111 
112 <body>
113     <div class="box">
114         <div>
115             <a href="#" id="listbnt" title="list-style" class="bnt-list-on"></a>
116             <a href="#" id="cardbnt" title="list-card" class="bnt-card-off"></a>
117         </div>
118         <ul class="card">
119 
120             <li>
121                 <a class="a-img">
122                     <img src="../img/big.jpg" />
123                 </a>
124                 <p>
125                     <a href="#">Example</a>
126                     <span>Big pictures</span>
127                 </p>
128                 <div class="buttom">Display</div>
129             </li>
130             <li>
131                 <a class="a-img">
132                     <img src="../img/big.jpg" />
133                 </a>
134                 <p>
135                     <a href="#">Example</a>
136                     <span>Big pictures</span>
137                 </p>
138                 <div class="buttom">Display</div>
139             </li>
140             <li>
141                 <a class="a-img">
142                     <img src="../img/big.jpg" />
143                 </a>
144                 <p>
145                     <a href="#">Example</a>
146                     <span>Big pictures</span>
147                 </p>
148                 <div class="buttom">Display</div>
149             </li>
150             <li>
151                 <a class="a-img">
152                     <img src="../img/big.jpg" />
153                 </a>
154                 <p>
155                     <a href="#">Example</a>
156                     <span>Big pictures</span>
157                 </p>
158                 <div class="buttom">Display</div>
159             </li>
160             <li>
161                 <a class="a-img">
162                     <img src="../img/big.jpg" />
163                 </a>
164                 <p>
165                     <a href="#">Example</a>
166                     <span>Big pictures</span>
167                 </p>
168                 <div class="buttom">Display</div>
169             </li>
170             <li>
171                 <a class="a-img">
172                     <img src="../img/big.jpg" />
173                 </a>
174                 <p>
175                     <a href="#">Example</a>
176                     <span>Big pictures</span>
177                 </p>
178                 <div class="buttom">Display</div>
179             </li>
180             <li>
181                 <a class="a-img">
182                     <img src="../img/big.jpg" />
183                 </a>
184                 <p>
185                     <a href="#">Example</a>
186                     <span>Big pictures</span>
187                 </p>
188                 <div class="buttom">Display</div>
189             </li>
190             <li>
191                 <a class="a-img">
192                     <img src="../img/big.jpg" />
193                 </a>
194                 <p>
195                     <a href="#">Example</a>
196                     <span>Big pictures</span>
197                 </p>
198                 <div class="buttom">Display</div>
199             </li>
200             <li>
201                 <a class="a-img">
202                     <img src="../img/big.jpg" />
203                 </a>
204                 <p>
205                     <a href="#">Example</a>
206                     <span>Big pictures</span>
207                 </p>
208                 <div class="buttom">Display</div>
209             </li>
210             <li>
211                 <a class="a-img">
212                     <img src="../img/big.jpg" />
213                 </a>
214                 <p>
215                     <a href="#">Example</a>
216                     <span>Big pictures</span>
217                 </p>
218                 <div class="buttom">Display</div>
219             </li>
220             <li>
221                 <a class="a-img">
222                     <img src="../img/big.jpg" />
223                 </a>
224                 <p>
225                     <a href="#">Example</a>
226                     <span>Big pictures</span>
227                 </p>
228                 <div class="buttom">Display</div>
229             </li>
230             <li>
231                 <a class="a-img">
232                     <img src="../img/big.jpg" />
233                 </a>
234                 <p>
235                     <a href="#">Example</a>
236                     <span>Big pictures</span>
237                 </p>
238                 <div class="buttom">Display</div>
239             </li>
240             <li>
241                 <a class="a-img">
242                     <img src="../img/big.jpg" />
243                 </a>
244                 <p>
245                     <a href="#">Example</a>
246                     <span>Big pictures</span>
247                 </p>
248                 <div class="buttom">Display</div>
249             </li>
250             <li>
251                 <a class="a-img">
252                     <img src="../img/big.jpg" />
253                 </a>
254                 <p>
255                     <a href="#">Example</a>
256                     <span>Big pictures</span>
257                 </p>
258                 <div class="buttom">Display</div>
259             </li>
260         </ul>
261     </div>
262 </body>
263 
264 </html>

View Code