css正方形照片墙_html/css_WEB-ITnose-html tutorial-php.cn

css正方形照片墙_html/css_WEB-ITnose
WBOY
Lepaskan： 2016-06-24 11:29:38
asal
1641 orang telah melayarinya
### 画一个宽度高度等于屏幕宽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)
Salin selepas log masuk