移动端rem、vw布局案例1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title></title>
    <link rel="stylesheet" href="css/reset.css" />
    <style type="text/css">
      /*为了让页面效果跟随浏览器窗口大小的变化而改变*/
      html {
        font-size: 26.67vw;
      } /*font-size:100px;*/
      html,
      body {
        height: 100%;
      }
      a{
          display: block;
      }
      header {
        height: 0.44rem;
        background: #387ec2;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
      }
      header .logoImg {
        height: 0.3rem;
        margin: 0 auto;
        padding-top: 0.09rem;
      }
      header a:nth-child(1) {
        display: block;
        height: 0.3rem;
      }
      header .heaBtn {
        width: 0.22rem;
        position: absolute;
        right: 0.27rem;
        top: 0.12rem;
      }
      main {
        /* background: pink; */
        height: 100%;
        padding: 0.44rem 0 0.5rem;
        box-sizing: border-box;
      }
      .banner img {
        width: 3.75rem;
      }
      nav {
        display: flex;
        height: 0.32rem;
        background: #f2f2f2;
        align-items: center; /*在侧轴上居中*/
      }
      nav b {
        font-size: 0.15rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        display: flex;
        align-items: center; /*在侧轴上居中*/
      }
      nav b img {
        width: 0.13rem;
        margin-right: 0.05rem;
      }
      nav a {
        font-size: 0.11rem;
        color: #000;
        margin-left: 0.39rem;
      }
     
      .list{
        border-bottom: 0.11rem solid #f2f2f2;
        overflow: hidden;
      }
      .li{
          width: 0.93rem;
          height: 0.93rem;
          font-size: 0.13rem;
          overflow: hidden;
          float: left;
          border-bottom: 0.01rem solid #efeff4;
          border-right: 0.01rem solid #efeff4;
          box-sizing: border-box;
      }
      .li:nth-child(4n){
        border-right: none;
      }
      .li img {
          width: 0.27rem;
          margin: 0.21rem auto 0.07rem;
      }
      .li p{
          margin: 0 auto;
          text-align: center;
      }

      .news{
        height:0.37rem ;
        background:#fff;
        padding-left: 0.16rem;
        padding-right: 0.12rem;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.01rem solid #efeff4;

       
      }

      .news img{
        width: 0.18rem;
        height: 0.15rem;
        margin-right: 0.11rem;
      }
      .news h2{
        height: 100%;
        
        
        box-sizing: border-box;
        display: flex;
        align-items: center;
        

        font-size: 0.16rem;
       padding-left: 0.13rem;
        
      }
      .news a{
        display: inline;
        
        font-size: 0.13rem;
        color: #6c6c6c;
      }

      .conList{
        margin-left: 0.15rem;
        
        /* background: pink; */
      }
      dl{
       
        border-top:1px solid #e4e4e4;
        padding: 0.14rem 0;
        /* background: skyblue; */
        display: flex;
        
      }
      dt{
        width: 0.95rem;
        height: 0.69rem;
        margin-right: 0.15rem;
      }
      dt img{
        width: 100%;
      }
      dd{
        width: 200px;
        height: 0.69rem;
        /* background: red; */

      }
      .conList h2{
        font-size: 0.15rem;
        width: 2.11rem;
        font-family: "宋体";
        line-height: 0.18rem;
      }
      .conList .txt{
        font-size: 0.1rem;
      }
      .conLast{
        font-size: 0.11rem;
        display: flex;
        width: 2.33rem;
        justify-content: space-between;
        align-items: center;
         padding-top: 0.07rem;
      }
      .conLast span{
        /* padding-right: 0.16rem; */
        color: #8a8a8a;
      }
      .conLast .txt{
        width: 0.6rem;
        height: 0.2rem;
        border: 1px solid #ed7150;
        line-height: 0.2rem;
        text-align: center;
        color: #ed7150 ;
       
      }

      footer {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 0.5rem;
        background: #e1e1e1;
        display: flex;
        justify-content: space-around;
        color: black;
        font-size: 0.09rem;
      }
      footer a {
          display: block;
           color: #929292;
           margin-top: 0.07rem;
           text-align: center;
          
        /* margin: 0.07rem 0.32rem 0.02rem 0.32rem; */
      }
      footer a img {
        height: 0.24rem;
        width: 0.24rem;
      }
      footer p{
          text-align: center;
         margin-top: 5px;
      }
      footer .active{
        color: #387ec2;
      }
      /*ps中测量出来的大小减半 再除以100*/
    </style>
  </head>
  <body>
    <header>
      <a href="">
        <img class="logoImg" src="img1/logo.jpg" alt="" />
      </a>
      <a href="">
        <img class="heaBtn" src="img1/btn.jpg" alt="" />
      </a>
    </header>
    <main>
      <div class="content">
        <div class="banner">
          <img src="img1/banner.jpg" alt="" />
        </div>
        <nav>
          <b><img src="img1/btn2.jpg" />学员必看:</b>
          <a href="">退考须知</a>
          <a href="">退考须知</a>
        </nav>
        <div class="con">
            <div class="list">
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
             </a>
             <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                <a class="li">
                <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
             </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
                </a>
                <a class="li">
              <img src="./img1/home.jpg" alt="" />
              <p>企业发展</p>
               </a>
            </div>
           
        <div class="news">
            <h2><img src="./img1/images/audio_03.png" alt=""> 新闻资讯</h2>
            <a href="#">查看更多</a>
        </div>
        <div class="conList">
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
          <dl>
            <dt><img src="./img1/con1.jpg" alt=""></dt>
            <dd>
              <h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
              <div class="conLast">
                <p class="txt">海驾活动</p>
                <span>14天前</span>
              </div>
            </dd>
          </dl>
        </div>
          </div>
           
        </div>
      </div>
    </main>
    <footer>
      <a href="#" class="active">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      </a>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      <a href="#">
        <img src="./img1/circle.jpg" alt="" />
        <p>首页</p>
      </a>
    </footer>
  </body>
</html>

效果图如下:12

发布了27 篇原创文章 · 获赞 0 · 访问量 300
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览