首頁 > web前端 > css教學 > 主體

響應式佈局的簡單案例介紹

高洛峰
發布: 2017-03-07 14:14:37
原創
1013 人瀏覽過

響應式佈局

響應式佈局在面對不同解析度裝置彈性強,在平時的網頁設計中基本上都要用到響應式佈局設計,它給我們提供了良好的用戶瀏覽頁面,能帶給我們更好的客戶體驗,下面給大家分享下我做的一個簡單的響應式的佈局:

響應式佈局的簡單案例介紹

響應式佈局的簡單案例介紹

不同的頁面會適用不同大小瀏覽器頁面,它會隨著解析度的變化而改變。程式碼顯示如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  p{    
    font-size: 12px;    
  }    
  header{    
    width: 100%;    
  }    
  header img{    
    width: 100%;    
  }    
  @media (min-width: 1300px) and (max-width:1400px) {    
    #left{    
      float: left;    
      width: 30%;    
      margin: 0px 50px;    
    }    
    #left #logo-bg{    
      margin: 10% 10%;    
      width: 80%;    
      position: relative;    
    }    
    #left #logo{    
      float: left;    
      width: 12%;    
      position: absolute;    
      left: 13%;    
      top: 230px;    
    }    
    #left p{    
      margin-bottom: -20px;    
    }    
    #left p,h4{    
      text-align: center;    
      color: red;    
    }    
    #right{    
      float: left;    
      width: 60%;    
      margin: 15% 0px;    
    }    
    #right h2{    
      text-align: center;    
    }    
    #right fieldset{    
      text-align: center;    
      border-left: none;    
      border-right: none;    
      border-bottom: none;    
    }    
    #right fieldset legend{    
      padding: 0px 20px;    
    }    
    #fen{    
      width: 100%;    
      -webkit-column-count: 6;    
      -moz-column-count: 6;    
      -o-column-count: 6;    
      -ms-column-count: 6;    
      column-count: 6;    
      -webkit-column-gap: 1em;    
      -moz-column-gap: 1em;    
      -o-column-gap: 1em;    
      -ms-column-gap: 1em;    
      column-gap: 1em;    
    }    
    #fen img{    
      width: 100%;    
      border-radius: 10px 10px 10px 10px;    
    }    
    #fen p,h4{    
      text-align: center;    
      color: red;    
    }    
    #fen p{    
      margin-bottom: -20px;    
    }    
    #di p{    
      text-align: center;    
    }    
    #di p span{    
       color: red;    
    }    
  }    
  @media (min-width: 1000px) and (max-width:1300px){    
    #left{    
      float: left;    
      width: 30%;    
      margin: 0px 50px;    
    }    
    #left #logo-bg{    
      margin: 10% 10%;    
      width: 80%;    
      position: relative;    
    }    
    #left #logo{    
      width: 12%;    
      position: absolute;    
      left: 14%;    
      top: 190px;    
    }    
    #left p{    
      margin-bottom: -20px;    
    }    
    #left p,h4{    
      text-align: center;    
      color: red;    
    }    
    #right{    
      float: left;    
      width: 60%;    
      margin: 15% 0px;    
    }    
    #right h2{    
      text-align: center;    
    }    
    #right fieldset{    
      text-align: center;    
      border-left: none;    
      border-right: none;    
      border-bottom: none;    
    }    
    #right fieldset legend{    
      padding: 0px 20px;    
    }    
    #fen{    
      width: 100%;    
      -webkit-column-count: 3;    
      -moz-column-count: 3;    
      -o-column-count: 3;    
      -ms-column-count: 3;    
      column-count: 3;    
      -webkit-column-gap: 1em;    
      -moz-column-gap: 1em;    
      -o-column-gap: 1em;    
      -ms-column-gap: 1em;    
      column-gap: 1em;    
    }    
    #fen img{    
        width: 100%;    
        border-radius: 10px 10px 10px 10px;    
    }    
    #fen p,h4{    
        text-align: center;    
        color: red;    
      }    
    #fen p{    
        margin-bottom: -20px;    
    }    
    #di p{    
      text-align: center;    
    }    
    #di p span{    
      color: red;    
    }    
  }    
</style>
</head>
<body>
  <header>
    <img  src="img/rag.png" / alt="響應式佈局的簡單案例介紹" >
  </header>
  <aside id="left">
    <img  src="img/logo-bg.png" id="logo-bg"/ alt="響應式佈局的簡單案例介紹" >
    <img  src="img/logo.png" id="logo" / alt="響應式佈局的簡單案例介紹" >
    <hr />
    <p>THE</p>
    <h4>WEBLOCUE</h4>
    <hr />
    <p>THE</p>
    <h4>WEBLOCUE</h4>
    <hr />
    <p>THE</p>
    <h4>WEBLOCUE</h4>
    <hr />
  </aside>
  <article id="right">
    <h2>“Give me problems, give me work.”</h2>
    <p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
    <p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
    <fieldset><legend>victors</legend></fieldset>
    <p id="fen">
      <img  src="img/1.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
      <img  src="img/2.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
      <img  src="img/3.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
      <img  src="img/4.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
      <img  src="img/5.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
      <img  src="img/6.jpg" / alt="響應式佈局的簡單案例介紹" >
      <p>SETCOME</p>
      <h4>HOLEMES</h4>
    </p>
    <fieldset><legend>*</legend></fieldset>
    <p id="di">
      <p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>
      <p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>
    </p>
  </article>
</body>
</html>
登入後複製

做的不夠嚴謹,因為時間問題,請見諒。

以上這篇響應式佈局的簡單案例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

更多響應式佈局的簡單案例介紹相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板