具有动态效果的响应式设计

2015-01-09 1020

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 摘要：　　响应式设计已经流行很久了，今天分享一个借助transition来实现动态切换布局的效果。代码： DOCTYPE html> Document .

摘要：

　　响应式设计已经流行很久了，今天分享一个借助transition来实现动态切换布局的效果。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .conteneur_responsive > div
        {
          -webkit-transition:all 0.3s linear;
          -moz-transition:all 0.3s linear;
          -o-transition:all 0.3s linear;
          transition:all 0.3s linear;
        }
        .conteneur_responsive 
        {
          max-width:825px;
          width:100%;
        }
        .conteneur_responsive > div
        {
          position: relative;
          box-shadow: 1px 1px 4px #999999;
          display: inline-block;
          vertical-align: top;
          background-color: #ffffff;
          width: 30%;
          height: 630px;
          margin: 5px;
        }
        .prequelle
        {
          color: #ffffff;
          font-weight: 100;
          font-size: 40px;
          padding:80px;
        }
        .gene_text
        {
          text-align: center;
          color: #999999;
          padding: 15px;
          font-weight: 300;
          font-size: 14px;
        }.btn
        {
          padding: 15px;
          color: #ffffff;
          margin:15px;
          position: absolute;
          bottom: 0px; width:76%;
          font-weight: 300;
          font-size: 16px;
        }
        @media screen and (max-width: 900px)
        {
          .conteneur_responsive 
          {
            max-width:610px;
            width:100%;
          }
          .conteneur_responsive > div
          {
            background-color: #ffffff;
            display: inline-block;
            width: 100%;
            height:auto;
          }
          .prequelle
          {
            color: #ffffff;
            font-weight: 100;
            font-size: 40px;
            padding:40px;
          }
          .btn
          {
            padding: 15px;
            color: #ffffff;
            margin:15px;
            position: absolute;
            bottom: 0px; width:90%;
            font-weight: 300;
            font-size: 16px;
          }
        }
    </style>
</head>
<body>
    <div align="center">
      &gt; Resize your navigator's window to see this awesome responsive effect &lt;<br><br>
      
        <div class="conteneur_responsive">
          <div class="column">
            <div class="prequelle" style="background-color: #1abc9c;">9€</div>
            <div class="gene_text">Omitto iuris dictionem in libera civitate contra 
              leges senatusque consulta; caedes relinquo; libidines praetereo, quarum
              <br /><br />--<br /><br />
              abiecisse et morte voluntaria</div>
            <div class="btn" style="background-color: #1abc9c;">Buy it</div>
          </div>
          <div class="column">
            <div class="prequelle" style="background-color: #f39c12;">11€</div>
            <div class="gene_text">Omitto iuris dictionem in libera civitate contra 
              leges senatusque consulta; caedes relinquo; libidines praetereo, quarum
              <br /><br />--<br /><br />
              abiecisse et morte voluntaria
              <br /><br />--<br /><br />
              idcirco omitto, quod non gravissima sint, sed quia nunc sine teste dico</div>
            <div class="btn" style="background-color: #f39c12;">Buy it</div>
          </div>
          <div class="column">
            <div class="prequelle" style="background-color: #e74c3c;">25€</div>
            <div class="gene_text">Omitto iuris dictionem in libera civitate contra 
              leges senatusque consulta; caedes relinquo; libidines praetereo, quarum
              <br /><br />--<br /><br />
              abiecisse et morte voluntaria
              <br /><br />--<br /><br />
              idcirco omitto, quod non gravissima sint, sed quia nunc sine teste dico
              <br /><br />--<br /><br />
              relinquo; libidines praetereo, quarum</div>
            <div class="btn" style="background-color: #e74c3c;">Buy it</div>
          </div>
        </div>
    </div>
</body>
</html>

效果：

　　改变浏览器大小就能看到效果了

文章标签：

Perl

具有动态效果的响应式设计

摘要：

代码：

效果：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

具有动态效果的响应式设计

​摘要：

代码：

效果：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

摘要：