Home > Article > Web Front-end > css正方形照片墙_html/css_WEB-ITnose
css正方形照片墙_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:381643browse
### 画一个宽度高度等于屏幕宽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)
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：APICloud推新产品SuperWebView，并开启收费模式_html/css_WEB-ITnoseNext article：设置textarea文本框不可以拖动改变大小_html/css_WEB-ITnose