css正方形照片墙_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:29:381643瀏覽
### 画一个宽度高度等于屏幕宽1/4的正方形关键点：内边距(padding)的%值为是相对于其父元素的宽度来计算的。```<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正方形的照片墙</title> <style media="screen"> body{ margin: 0; padding: 0; } .figure-list{ width: 100%; /*宽度等于屏幕宽度*/ } .figure{ width: 25%; /*25%，相对于父元素宽度，计算值为屏幕宽度的1/4*/ } .figure a{ display: block; width: 100%; /*100%，相对于父元素宽度，计算值为屏幕宽度的1/4*/ padding-bottom: 100%; /*100%，相对于父元素的宽度，计算值为屏幕宽度的1/4，这样在height为0的情况下，就得到了一个正方形的区域*/ background-color: rgb(23, 218, 163); } </style> </head> <body> <div class="figure-list"> <div class="figure"> <a href="#"></a> </div> </div> </body></html>```### 往正方形里添加图片由于通过上面方法形成的正方形高度(height)是为0的，往里面添加任何子元素都会将其撑开，正方形会遭到破坏，除非添加的子元素不在普通文档流中。这里我们采用绝对定位的方法来定位子元素，使其脱离文档流。```<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正方形的照片墙</title> <style media="screen"> body{ margin: 0; padding: 0; } .figure-list{ width: 100%; /*宽度等于屏幕宽度*/ } .figure-list::after{ content: ""; /*清除浮动*/ clear: both; display: block; } .figure{ width: 25%; /*25%相对于父元素宽度，计算值为屏幕宽度的1/4*/ float:left; } .figure a{ display: block; width: 100%; /*100%相对于父元素宽度，计算值为屏幕宽度的1/4*/ padding-bottom: 100%; /*100%相对于父元素的宽度，计算值为屏幕宽度的1/4，这样在height为0的情况下，就得到了一个正方形的区域*/ background-color: rgb(23, 218, 163); position: relative; /*让子元素相对于父元素定位*/ } .figure a img{ width: 100%; position: absolute; /*子元素采用绝对定位，避免其影响父元素高度*/ top: 0; left: 0; } </style> </head> <body> <div class="figure-list"> <div class="figure"> <a href="#"><img src="../img/team-1.jpg" alt=""></a> </div> <div class="figure"> <a href="#"><img src="../img/team-2.jpg" alt=""></a> </div> <div class="figure"> <a href="#"><img src="../img/team-3.jpg" alt=""></a> </div> <div class="figure"> <a href="#"><img src="../img/team-4.jpg" alt=""></a> </div> </div> </body></html>```### 通过伪元素::before, ::after,为图片添加hover提示关键点：伪元素::before, ::after的content属性可以通过attr()方法取得标签上自定义的值。```<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正方形的照片墙</title> <style media="screen"> body{ margin: 0; padding: 0; } .figure-list{ width: 100%; /*宽度等于屏幕宽度*/ } .figure-list::after{ content: ""; /*清除浮动*/ clear: both; display: block; } .figure{ width: 25%; /*25%相对于父元素宽度，计算值为屏幕宽度的1/4*/ float:left; } .figure a{ display: block; width: 100%; /*100%相对于父元素宽度，计算值为屏幕宽度的1/4*/ padding-bottom: 100%; /*100%相对于父元素的宽度，计算值为屏幕宽度的1/4，这样在height为0的情况下，就得到了一个正方形的区域*/ background-color: rgb(23, 218, 163); position: relative; /*让子元素相对于父元素定位*/ } .figure a img{ width: 100%; position: absolute; /*子元素采用绝对定位，避免其影响父元素高度*/ top: 0; left: 0; } .figure a:hover::before{ /*画hover背景*/ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; } .figure a:hover::after{ /*显示提示文字*/ font-size: 32px; font-weight: bolder; line-height: 1; /*使其高度近似等于字体大小*/ color: rgb(23, 218, 163); position: absolute; content: attr(data-name); /*通过attr方法取值*/ top: 50%; /*使文字框垂直居中*/ left: 0; margin-top: -16px; width: 100%; /*使文字水平居中*/ text-align: center; z-index: 3; } </style> </head> <body> <div class="figure-list"> <div class="figure"> <a href="#" data-name="Mary"><img src="../img/team-1.jpg" alt=""></a> </div> <div class="figure"> <a href="#" data-name="Jack"><img src="../img/team-2.jpg" alt=""></a> </div> <div class="figure"> <a href="#" data-name="Lily"><img src="../img/team-3.jpg" alt=""></a> </div> <div class="figure"> <a href="#" data-name="Xiao"><img src="../img/team-4.jpg" alt=""></a> </div> </div> </body></html>```[源文件](https://coding.net/u/maoji/p/alecto_demo/git)
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn