### 画一个宽度高度等于屏幕宽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="#">@@##@@</a> </div> <div class="figure"> <a href="#">@@##@@</a> </div> <div class="figure"> <a href="#">@@##@@</a> </div> <div class="figure"> <a href="#">@@##@@</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">@@##@@</a> </div> <div class="figure"> <a href="#" data-name="Jack">@@##@@</a> </div> <div class="figure"> <a href="#" data-name="Lily">@@##@@</a> </div> <div class="figure"> <a href="#" data-name="Xiao">@@##@@</a> </div> </div> </body></html>```[源文件](https://coding.net/u/maoji/p/alecto_demo/git)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
931
