【CSS】布局之选项卡与图片库

  前面简单的选项卡简单的图片库进行了实现,现在把两者结合起来,实现下面这样的效果。

        

现在附上代码:

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5        <script type="text/javascript" src="http://211.100.27.11/resource/js/jquery-1.7.2.min.js"></script>
  6         <title>选项卡</title>
  7         <style type="text/css">
  8             * {
  9                 margin: 0;
 10                 padding: 0;
 11             }
 12             #main {
 13                 width: 245px;
 14                 height: 25px;
 15                 margin: 100px auto 0 auto;
 16             }
 17             .title {
 18                 line-height: 35px;  //垂直居中
 19                 margin-right: 10px;
 20                 text-Align: center;  //水平居中
 21             }
 22             .title:after {        //清除title的浮动
 23               content: ".";
 24                display: block;
 25                 clear: both;
 26                 height: 0;
 27                 visibility: hidden;
 28             }
 29             .top {            
 30                 font-size: 25px;
 31                 margin-left: 10px;
 32                 float: left;
 33             }
 34             span {
 35                 float: right;
 36                 width: 40px;
 37             }
 38             .content {
 39                 width: 240px;
 40                 border: 1px solid #ccc;  //图片字样下面的灰线,没有清除浮动,content框体高度为0,使content的边框成为了灰线
 41             }
 42             .img {
 43                 float: left;
 44                 width: 100px;
 45                 height: 120px;
 46                 padding: 10px;
 47             }
 48             .img>a>img {
 49                 border: none;    //这个是为了清除IE显示中默认显示的边框线,其余浏览器默认不显示
 50             }
 51             .img:hover {
 52                 box-shadow: 5px 5px 2px #888;  //鼠标悬停时添加阴影
 53             }
 54             .img>a>img:hover {
 55                 border: 1px solid red;      //鼠标悬停时给图片加上边框
 56             }
 57             .img>.desc {
 58                 font-size: 10px;
 59                 line-height: 20px;
 60                 text-Align: center;
 61             }
 62             div[name] {    //通过属性选择器选取图片父元素框
 63                 width: 245px;
 64                 height: 264px;
 65                 margin: 10px 0 0 0px;               
 66                 float: left;              
 67                 display: none;
 68             }
 69             .parent:after {
 70                 content: ".";
 71                 display: block;
 72                 clear: both;
 73                 height: 0;
 74                 visibility: hidden;
 75             }
 76             .content>.show {
 77                 display: block;
 78             }
 79             .title>.click {        //标签边框上方左右两边角的圆弧形状处理
 80                 background: #ccc;
 81                 border-top-left-radius: 5px;
 82                 border-top-right-radius: 5px;
 83             }
 84             
 85         </style>
 86         
 87        <script type="text/javascript">
 88             window.onload = function() {
 89                 var oTab = document.getElementById("main");    //通过ID获取元素
 90                 var aSpan = oTab.getElementsByTagName("span");  //通过标签名获取元素,结果为一个数组
 91                 var aDiv = oTab.getElementsByTagName("div");
 92                 var cDiv = new Array();
 93                 var key = 0;
 94                 for (var i = 0; i < aDiv.length; i++) {
 95                     if (aDiv[i].getAttribute("name") == "showBox") {
 96                         cDiv[key] = aDiv[i];
 97                         key++;
 98                     }
 99                 }
100                 for (var i = 0; i < aSpan.length; i++) {
101                     aSpan[i].index = i;
102                     aSpan[i].onclick = function() {  //为span标签附加点击效果
103                         for (var i = 0; i < aSpan.length; i++) {
104                             aSpan[i].className = "";
105                             cDiv[i].className = "";
106                             cDiv[i].style.display = "none";
107                         }
108                         this.className = "click";
109                         cDiv[this.index].className = "show";
110                         cDiv[this.index].style.display = "block";
111                     };
112                 }
113             };
114         </script>
115     </head>
116     
117     <body>
118         <div id="main">    
119             <div class="title">
120                 <div class="top">图片</div>
121                 <span class="click">1</span>
122                 <span>2</span>
123                 <span>3</span>
124             </div>
125             <div class="content">
126                 <div name="showBox" class="show">
127                     <div class="img">
128                         <a target="_blank" href="image/tupian/1.jpg">
129                             <img src="image/tupian/1.jpg" alt="图片1" width="100" height="100">
130                         </a>    
131                         <div class="desc">图片1的描述</div>
132                     </div>
133                     <div class="img">
134                         <a target="_blank" href="image/tupian/1.jpg">
135                             <img src="image/tupian/1.jpg" alt="图片2" width="100" height="100">
136                         </a>    
137                         <div class="desc">图片2的描述</div>
138                     </div>
139                     <div class="img">
140                         <a target="_blank" href="image/tupian/1.jpg">
141                             <img src="image/tupian/1.jpg" alt="图片3" width="100" height="100">
142                         </a>    
143                         <div class="desc">图片3的描述</div>
144                     </div>
145                     <div class="img">
146                         <a target="_blank" href="image/tupian/1.jpg">
147                             <img src="image/tupian/1.jpg" alt="图片4" width="100" height="100">
148                         </a>    
149                         <div class="desc">图片4的描述</div>
150                     </div>
151                 </div>
152                 
153                 <div name="showBox">
154                     <div class="img">
155                         <a target="_blank" href="image/tupian/2.jpg">
156                             <img src="image/tupian/2.jpg" alt="图片1" width="100" height="100">
157                         </a>    
158                         <div class="desc">图片1的描述</div>
159                     </div>
160                     <div class="img">
161                         <a target="_blank" href="image/tupian/2.jpg">
162                             <img src="image/tupian/2.jpg" alt="图片2" width="100" height="100">
163                         </a>    
164                         <div class="desc">图片2的描述</div>
165                     </div>
166                     <div class="img">
167                         <a target="_blank" href="image/tupian/2.jpg">
168                             <img src="image/tupian/2.jpg" alt="图片3" width="100" height="100">
169                         </a>    
170                         <div class="desc">图片3的描述</div>
171                     </div>
172                     <div class="img">
173                         <a target="_blank" href="image/tupian/2.jpg">
174                             <img src="image/tupian/2.jpg" alt="图片4" width="100" height="100">
175                         </a>    
176                         <div class="desc">图片4的描述</div>
177                     </div>
178                 </div>
179                 
180                 <div name="showBox">
181                     <div class="img">
182                         <a target="_blank" href="image/tupian/3.jpg">
183                             <img src="image/tupian/3.jpg" alt="图片1" width="100" height="100">
184                         </a>    
185                         <div class="desc">图片1的描述</div>
186                     </div>
187                     <div class="img">
188                         <a target="_blank" href="image/tupian/3.jpg">
189                             <img src="image/tupian/3.jpg" alt="图片2" width="100" height="100">
190                         </a>    
191                         <div class="desc">图片2的描述</div>
192                     </div>
193                     <div class="img">
194                         <a target="_blank" href="image/tupian/3.jpg">
195                             <img src="image/tupian/3.jpg" alt="图片3" width="100" height="100">
196                         </a>    
197                         <div class="desc">图片3的描述</div>
198                     </div>
199                     <div class="img">
200                         <a target="_blank" href="image/tupian/3.jpg">
201                             <img src="image/tupian/3.jpg" alt="图片4" width="100" height="100">
202                         </a>    
203                         <div class="desc">图片4的描述</div>
204                     </div>
205                 </div>
206             </div>
207         </div>
208     </body>
209 </html>

  这种布局在网页中很常见,这里就不一步步实现了,除了对代码一些简单的注释,再把里面的几个关键知识点记录一下。 



  1、关于"border:none"与"border:0":

   在我们有清除边框线的需求下,选择"border:none"或者是"border: 0"很容易引起疑惑,应为一般这两者都能得到想要的结果,那么该如何判断选择呢?

    性能差异:

      border:0

        把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。

      border:none

        把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

    兼容性差异:

      border:none

        当border为“none”时对IE6/7无效,边框依然存在。

      border:0

        几乎所有浏览器都不显示边框。

    以上的差异性看来,似乎选择"border:0"更合适,不过就性能来说,"border:none"的性能要更胜一筹,至于对于IE6/7的无效,则可以用"background:none"来弥补,所以一般使用中,更多应该选择使用"border:none"。


  2、getElementBy系列

    getElementBy系列总共有三个成员:getElementById()、getElementsByName()和getElementsByTagName()

    getElementById()

      通过标签的ID属性来获取元素节点;

    getElementsByName()

      通过标签的name属性来获取元素节点的集合;

    getElementsByTagName()

      通过标签名来获取元素节点的集合;

    了解了以上三者的区别,我们发现,在上例中我们通过JS的循环对div的class="show"标记的赋值与取消来控制该框的显示或者隐藏。我们需要对各图片库父元素节点进行选取。

    不过由于ID值的单一性,我们肯定不能对3个标签页分别赋值ID值,而class属性又起到了标记的作用,当然,我们可以给被标记的元素框赋予多个类名,不过我们在这里使用了另一种方法,给所有的图片库的父框体赋值了name属性,用来选取该div标签。

    不过在js代码中,我们并没有用getElementsByName()方法来获取该标签。不过由于IE不支持getElementsByName(),所以就要避免使用getElementsByName()。那么如何选取这些标签呢?

    这里我们用到一个检索节点属性值的方法:getAttribute()方法。

      在我们用getElementById()或getElementsByTagName()方法获取元素节点的对象后,可以用getAttribute()方法把该节点的属性值查询出来,然后通过判断,这样就可以挑选出我们所需要的节点对象了。

      getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字:

        object.getAttribute(attribute)

      getAttribute()方法无法通过document对象进行调用,只能只能通过一个元素节点对象调用它。

      例如你可以把它与getElementsByTagName()方法结合起来,去查询每个<p>元素的title属性:

1 var text=document.getElementsByTagName("p")
2 for (var i=0;i<text.length;i++){
3     alert(text[i].getAttribute("title"));
4 }

  总结:在具体实现一个布局的过程中,既熟悉了以前学到的各知识点的运用,也通过对一些问题的解决,学到了很多新的知识,获益匪浅。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。