当前位置:Gxlcms > html代码 > css正方形照片墙_html/css_WEB-ITnose

css正方形照片墙_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:15人阅读

### 画一个宽度高度等于屏幕宽1/4的正方形关键点:内边距(padding)的%值为是相对于其父元素的宽度来计算的。```          正方形的照片墙              
```### 往正方形里添加图片由于通过上面方法形成的正方形高度(height)是为0的,往里面添加任何子元素都会将其撑开,正方形会遭到破坏,除非添加的子元素不在普通文档流中。这里我们采用绝对定位的方法来定位子元素,使其脱离文档流。``` 正方形的照片墙
```### 通过伪元素::before, ::after,为图片添加hover提示关键点:伪元素::before, ::after的content属性可以通过attr()方法取得标签上自定义的值。``` 正方形的照片墙
```[源文件](https://coding.net/u/maoji/p/alecto_demo/git)

人气教程排行