less 基本配置参考

最新推荐文章于 2024-05-06 03:28:09 发布

xiaohanzhu000

最新推荐文章于 2024-05-06 03:28:09 发布

阅读量1.1k

点赞数

分类专栏：前端开发 html5 css3

本文链接：https://blog.csdn.net/xiaohanzhu000/article/details/81150757

版权

前端开发同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

globe.less

@rem:30rem;
body,h1,h2,h3,h4,p{
  margin:0;
}

body{
  font-size:26/@rem;
  font-family: '微软雅黑';
  color: #738797;
}

a{
  text-decoration: none;
  color: inherit;
}

a:hover{
  color: #f00;
}

ul{
  list-style: none;
  padding:0;
  margin:0;
}

index.less

@import "globe";


.backImg(@x:0,@y:0){
  background: url("../img/icon.png") no-repeat @x/@rem @y/@rem;
  background-size: 60/@rem 800/@rem;
}

.header{
  height:88/@rem;
  background: url("../img/bg.png") no-repeat;
  background-size: 100%;

  .backBtn{
    width:60/@rem;
    height:60/@rem;
    padding:14/@rem 8/@rem;
    position: absolute;
    left:0;
    top:0;
    i{
      width:60/@rem;
      height:60/@rem;
      display: inline-block;
      .backImg();
    }
  }

  .signOut{
    height:60/@rem;
    position: absolute;
    right:0;
    top:0;
    color: #fff;
    padding:14/@rem 7/@rem;
    line-height:60/@rem;

    i{
      width:60/@rem;
      height:60/@rem;
      display: inline-block;
      .backImg(0,-60);
    }
  }

  .logo{
    height:88/@rem;
    text-align: center;
    img{
      height:100%;
    }
  }

}

.info{
  height:375/@rem;
  background: url("../img/ingoBg.png") no-repeat;
  background-size: 100%;
  padding-top:63/@rem;
  text-align: center;

  .headerImg{
    width:180/@rem;
    height:180/@rem;
    border:3/@rem solid #fff;
    border-radius: 50%;
    overflow: hidden;
    margin:0 auto 34/@rem;
    img{
      width:100%;
      height:100%;
    }
  }

  .userName{
    height:58/@rem;
    span{
      display: inline-block;
      line-height:58/@rem;
      vertical-align: middle;
      font-size:36/@rem;
      color: #fff;
    }
    img{
      width:107/@rem;
      height:36/@rem;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .regTime{
    height: 48/@rem;
    line-height:48/@rem;
    font-size:22/@rem;
    color: rgba(255,255,255,0.6);
  }
}

.title{
  height:100/@rem;
  line-height:100/@rem;
  background-color: #fbfcff;
  font-size:32/@rem;
  padding-left:50/@rem;
  color: #9ca9b4;
  font-weight: normal;
}

.menu{
  height:374/@rem;
  padding:2/@rem 0;
  background-color: #e5ebf0;
  display: grid;
  grid-template-rows: repeat(2,186/@rem);
  grid-template-columns: repeat(4,1fr);
  grid-gap: 2/@rem;

  .item{
    background-color: #fff;
    text-align: center;

    i{
      width:60/@rem;
      height:60/@rem;
      display: inline-block;
      margin-top:40/@rem;
      &.baseInfo{
        .backImg(0,-120);
      }
      &.userInfo{
        .backImg(0,-180);
      }
      &.vipInfo{
        .backImg(0,-240);
      }
      &.order{
        .backImg(0,-300);
      }
      &.record{
        .backImg(0,-360);
      }
      &.device{
        .backImg(0,-420);
      }
      &.account{
        .backImg(0,-480);
      }
      &.more{
        .backImg(0,-540);
      }
    }
    span{
      display: inline-block;
      line-height:57/@rem;
      width:100%;
    }
  }
}

.safe{
  height: 186/@rem;
  padding:2/@rem 0;
  background-color: #e5ebf0;
  display: flex;
  text-align: center;

  .item{
    height:186/@rem;
    flex: 1;
    background-color: #fff;
    &:first-child{
      margin-right:2/@rem;
    }
    i{
      width:60/@rem;
      height:60/@rem;
      display: inline-block;
      margin-top:40/@rem;
      &.password{
        .backImg(0,-600);
      }
      &.email{
        .backImg(0,-660);
      }
    }
    span{
      display: inline-block;
      line-height:57/@rem;
      width:100%;
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script>
        var pixRatio = 1/window.devicePixelRatio;
        var html = document.documentElement;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixRatio +',minimum-scale='+ pixRatio +',maximum-scale='+ pixRatio +'">');
        html.style.fontSize = html.clientWidth/25 + 'px';
    </script>
    <link href="css/case.css" rel="stylesheet">
</head>
<body>
<header class="header">
    <div class="backBtn"><i>&nbsp;</i></div>
    <h1 class="logo"><img src="img/logo.png"></h1>
    <div class="signOut"><span>退出</span><i>&nbsp;</i></div>
</header>
<section class="info">
    <div class="headerImg"><img src="img/16.jpg"></div>
    <p class="userName"><span>我是程序员</span><img src="img/member.png"></p>
    <p class="regTime">注册时间：2016-01-27</p>
</section>
<h3 class="title">个人资料</h3>
<section class="menu">
    <a href="#" class="item">
        <i class="baseInfo">&nbsp;</i>
        <span>基本信息</span>
    </a>
    <a href="#" class="item">
        <i class="userInfo">&nbsp;</i>
        <span>个人信息</span>
    </a>
    <a href="#" class="item">
        <i class="vipInfo">&nbsp;</i>
        <span>VIP信息</span>
    </a>
    <a href="#" class="item">
        <i class="order">&nbsp;</i>
        <span>我的订单</span>
    </a>
    <a href="#" class="item">
        <i class="record">&nbsp;</i>
        <span>视频激活记录</span>
    </a>
    <a href="#" class="item">
        <i class="device">&nbsp;</i>
        <span>视频激活设备</span>
    </a>
    <a href="#" class="item">
        <i class="account">&nbsp;</i>
        <span>绑定账号</span>
    </a>
    <a href="#" class="item">
        <i class="more">&nbsp;</i>
    </a>
</section>
<h3 class="title">安全设置</h3>
<section class="safe">
    <a href="" class="item">
        <i class="password">&nbsp;</i>
        <span>修改密码</span>
    </a>
    <a href="" class="item">
        <i class="email">&nbsp;</i>
        <span>修改绑定邮箱</span>
    </a>
</section>
</body>
</html>

xiaohanzhu000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less 基本配置参考

globe.less@rem:30rem;body,h1,h2,h3,h4,p{ margin:0;}body{ font-size:26/@rem; font-family: '微软雅黑'; color: #738797;}a{ text-decoration: none; color: inherit;}a:hover{ color: #f...
复制链接

扫一扫