반응형 레이아웃에 대한 간단한 사례 소개

高洛峰
풀어 주다: 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으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿