前端学习-第一阶段day18-day19

于 2020-12-10 21:59:29 发布
阅读量111 收藏
点赞数
分类专栏： 前端学习日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/111008090
版权

今日练习
目标：响应式界面
一套代码自动适应pc pad phone
pc端显示结果
pad端显示结果
phone端显示结果

主页HTML样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/index_pad.css">
    <link rel="stylesheet" href="./css/index_phone.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2256336_aoe4o0oj9or.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-title">
            <img src="./image/head-pic.jpg" alt="">
            周杰伦
            <a href="">
                <img src="./image/cancle.jpg" alt="">
                注销
            </a>
        </div>
    </div>
    <!-- 三横 -->
    <div class="three">
        <i class="iconfont icon-sanhengzhuanhuan"></i>
    </div>
    <!-- 左侧管理系统 -->
    <div class="left-list">
        <div class="list-title">
            小商U城后台管理系统
        </div>
        <div class="list-body">
            <div class="pro-con ">
                <a href="" class="orange">
                    <i class="iconfont icon-wenjianjia"></i>
                    商品管理
                </a>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品信息管理
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        添加商品信息
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品类型管理
                    </a>
                </div>

            </div>
            <div class="pro-con">
                <a href="">
                    <i class="iconfont icon-dingdan"></i>
                    订单管理
                </a>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品信息管理
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        添加商品信息
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品类型管理
                    </a>
                </div>
            </div>
            <div class="pro-con">
                <a href="">
                    <i class="iconfont icon-yonghu"></i>
                    用户管理
                </a>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品信息管理
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        添加商品信息
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品类型管理
                    </a>
                </div>
            </div>
            <div class="pro-con">
                <a href="">
                    <i class="iconfont icon-guanliyuan"></i>
                    管理员管理
                </a>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品信息管理
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        添加商品信息
                    </a>
                </div>
                <div class="pro-con-n">
                    <a href="" >
                        <i class="iconfont icon-193-wenjianjia"></i>
                        商品类型管理
                    </a>
                </div>
            </div>

        </div>

    </div>
    <!-- 主体 -->
    <div class="body">
        <div class="body-title">商品信息管理
            <a href="">
                操作 <i class="iconfont icon-lower-triangle"></i>
            </a>
            
        </div>
        <div class="body-body">
            <div class="item">
                <div class="item-number">150</div>
                <p>新订单</p>
                <a href="" class="item-bottom">
                    详细
                    <i class="iconfont icon-youfangxiang"></i>
                </a>
            </div>
            <div class="item">
                <div class="item-number">70</div>
                <p>转换率</p>
                <a href="" class="item-bottom">
                    详细
                    <i class="iconfont icon-youfangxiang"></i>
                </a>
            </div>
            <div class="item">
                <div class="item-number">80</div>
                <p>新注册用户</p>
                <a href="" class="item-bottom">
                    详细
                    <i class="iconfont icon-youfangxiang"></i>
                </a>
            </div>
            <div class="item">
                <div class="item-number">100</div>
                <p>日PV</p>
                <a href="" class="item-bottom">
                    详细
                    <i class="iconfont icon-youfangxiang"></i>
                </a>
            </div>
            
        </div>

    </div>
    
</body>

</html>

适配样式css三合一

@media screen and (min-width: 992px) {

  .header {
    width: 100%;
    height: 45px;
    line-height: 45px;
  }

  .header-title {
    float: right;
    margin-right: 5%;
    font-size: 15px;
  }

  .header-title img {
    transform: scale(0.9);
  }

  .header-title a {
    padding-left: 35px;
    font-size: 15px;
  }

  .left-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;
    height: 100vh;
    background-color: white;
    z-index: 2;
  }

  .list-title {
    height: 45px;
    background-color: #ea967a;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
  }

  .list-body {
    width: 100%;
    padding-left: 45px;
  }

  .pro-con {
    margin-top: 20px;
  }

  .pro-con a {
    display: block;
    line-height: 30px;
    color: #36323f;
    font-size: 16px;
  }

  .pro-con .orange {
    color: #d7e177;
  }

  .pro-con:hover a {
    color: #d7e177;
  }

  .pro-con-n {
    display: none;
    width: 85%;
    height: 22px;
    text-align: center;
    line-height: 22px;
  }

  .pro-con .pro-con-n a {
    line-height: 22px;
    font-size: 13px;
    color: #36323f;
  }

  .pro-con-n a .icon-193-wenjianjia {
    font-size: 13px;
    color: #306d23;
  }

  .pro-con-n:hover {
    background-color: #ea967a;
  }

  .pro-con-n:nth-of-type(1) {
    background-color: #ea967a;
  }

  .pro-con:hover .pro-con-n {
    display: block;
  }

  .pro-con:nth-child(1) .pro-con-n {
    display: block;
  }

  .body {
    width: 100%;
    height: calc(100vh - 45px);
    padding-left: 20%;
    background-color: #f5f5f5;

  }

  .body-title {
    padding-left: 2%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    border-bottom: 1px solid #cfcfcf;
    color: #be5d3e;
  }

  .body-title a {
    margin-right: 2%;
    float: right;
    color: #be5d3e;
  }

  .body-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-top: 15px;
  }

  .item {
    position: relative;
    width: 23%;
    height: 100px;
    background-color: #ea967a;
    border-radius: 5px;
    color: white;
    overflow: hidden;
    margin-bottom: 25px;
  }

  .item-number {
    margin-left: 3%;
    margin-top: 10px;
    font-size: 25px;
  }

  .item p {
    margin-left: 2%;
    font-size: 14px;
    line-height: 30px;
  }

  .item-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #d1876e;
    text-align: center;
    line-height: 28px;
  }

  .item a {
    font-size: 12px;
    color: white;
  }

  .three {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 666;
  }

  .three i,
  .icon-sanhengzhuanhuan {
    font-size: 16px;
    color: #3c3c3c;
    line-height: 45px;
    margin-left: 100%;
  }

}

@media screen and (min-width: 768px) and (max-width: 992px) {

  .header {
    width: 100%;
    height: 45px;
    line-height: 45px;
  }

  .header-title {
    float: right;
    margin-right: 5%;
    font-size: 15px;
  }

  .header-title img {
    transform: scale(0.9);
  }

  .header-title a {
    padding-left: 35px;
    font-size: 15px;
  }

  .left-list {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 2;
    margin-top: 44px;
    width: 100%;
    height: 220px;
    text-align: center;
  }

  .list-title {
    display: none;
    height: 45px;
    background-color: #ea967a;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
  }

  .list-body {
    width: 100%;
    padding-left: 45px;
  }

  .pro-con {
    margin-top: 20px;
  }

  .pro-con a {
    display: block;
    line-height: 30px;
    color: #36323f;
    font-size: 16px;
  }

  .pro-con:hover a {
    color: #d7e177;
  }

  .pro-con-n {
    display: none;
    width: 85%;
    height: 22px;
    text-align: center;
    line-height: 22px;
  }

  .pro-con .pro-con-n a {
    line-height: 22px;
    font-size: 13px;
    color: #36323f;
  }

  .pro-con-n a .icon-193-wenjianjia {
    font-size: 13px;
    color: #306d23;
  }

  .pro-con-n:hover {
    background-color: #ea967a;
  }

  .pro-con-n:nth-of-type(1) {
    background-color: #ea967a;
  }

  .pro-con:hover .pro-con-n {
    display: block;
  }

  .body {
    width: 100%;
    height: calc(100vh - 45px);
    padding-left: 0;
    background-color: #f5f5f5;
  }

  .body-title {
    padding-left: 2%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    border-bottom: 1px solid #cfcfcf;
    color: #be5d3e;
  }

  .body-title a {
    margin-right: 2%;
    float: right;
    color: #be5d3e;
  }

  .body-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-top: 15px;
  }

  .item {
    position: relative;
    width: 48.5%;
    height: 100px;
    background-color: #ea967a;
    border-radius: 5px;
    color: white;
    overflow: hidden;
    margin-bottom: 25px;
  }

  .item-number {
    margin-left: 3%;
    margin-top: 10px;
    font-size: 25px;
  }

  .item p {
    margin-left: 2%;
    font-size: 14px;
    line-height: 30px;
  }

  .item-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #d1876e;
    text-align: center;
    line-height: 28px;
  }

  .item a {
    font-size: 12px;
    color: white;
  }

  .three {

    position: absolute;
    left: 0;
    top: 0;
    z-index: 666;
  }

  .three:hover+.left-list {
    display: block;
  }

  .three i,
  .icon-sanhengzhuanhuan {
    font-size: 16px;
    color: #3c3c3c;
    line-height: 45px;
    margin-left: 100%;
  }


}
@media screen and (max-width: 768px) {
  .header {
    width: 100%;
    height: 45px;
    line-height: 45px;
  }

  .header-title {
    float: right;
    margin-right: 5%;
    font-size: 15px;
  }

  .header-title img {
    transform: scale(0.9);
  }

  .header-title a {
    padding-left: 35px;
    font-size: 15px;
  }

  .left-list {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 2;
    margin-top: 44px;
    width: 100%;
    height: 220px;
    text-align: center;
  }

  .list-title {
    display: none;
    height: 45px;
    background-color: #ea967a;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
  }

  .list-body {
    width: 100%;
    padding-left: 45px;
  }

  .pro-con {
    margin-top: 20px;
  }

  .pro-con a {
    display: block;
    line-height: 30px;
    color: #36323f;
    font-size: 16px;
  }

  .pro-con:hover a {
    color: #d7e177;
  }

  .pro-con-n {
    display: none;
    width: 85%;
    height: 22px;
    text-align: center;
    line-height: 22px;
  }

  .pro-con .pro-con-n a {
    line-height: 22px;
    font-size: 13px;
    color: #36323f;
  }

  .pro-con-n a .icon-193-wenjianjia {
    font-size: 13px;
    color: #306d23;
  }

  .pro-con-n:hover {
    background-color: #ea967a;
  }

  .pro-con-n:nth-of-type(1) {
    background-color: #ea967a;
  }

  .pro-con:hover .pro-con-n {
    display: block;
  }

  .body {
    width: 100%;
    height: calc(100vh - 45px);
    padding-left: 0;
    background-color: #f5f5f5;
  }

  .body-title {
    padding-left: 2%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    border-bottom: 1px solid #cfcfcf;
    color: #be5d3e;
  }

  .body-title a {
    margin-right: 2%;
    float: right;
    color: #be5d3e;
  }

  .body-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-top: 15px;
  }

  .item {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #ea967a;
    border-radius: 5px;
    color: white;
    overflow: hidden;
    margin-bottom: 25px;
  }

  .item-number {
    margin-left: 3%;
    margin-top: 10px;
    font-size: 25px;
  }

  .item p {
    margin-left: 2%;
    font-size: 14px;
    line-height: 30px;
  }

  .item-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #d1876e;
    text-align: center;
    line-height: 28px;
  }

  .item a {
    font-size: 12px;
    color: white;
  }

  .three {

    position: absolute;
    left: 0;
    top: 0;
    z-index: 666;
  }

  .three:hover+.left-list {
    display: block;
  }

  .three i,
  .icon-sanhengzhuanhuan {
    font-size: 16px;
    color: #3c3c3c;
    line-height: 45px;
    margin-left: 100%;
  }


}

重置样式

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0 auto;
    font-size: 12px;
}
a{
    color: black;
    text-decoration: none;
    font-size: 12px;
}
table{
    border-collapse: collapse;
}
b{
    font-weight: 400;
}
li{
    list-style: none;
}
input{
    border: none;
    outline: none;
}
.clearfix::after,.clearfix::before{
    content: "";
    display: block;
    clear: both;
}
img{
    vertical-align: middle;
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值