首页 > web前端 > html教程 > css正方形照片墙_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:29:38
原创
1672 人浏览过

### 画一个宽度高度等于屏幕宽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)
登录后复制

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板