MAKIYO920

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

20170515-20170519【第二周】

本周作业效果的两种代码实现方式：

1.

<style>
        .box1{
            background: red;
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px 10px;
        }
        .box2{
            background: yellow;
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px 10px;
        }
        .box3{
            background: blue;
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px 10px;
        }
        .line1{
            border-left: 1px solid grey;
            height: 100px;
            width: 1px;
            float: left;
            margin: 10px;
        }
        .line2{
            border-bottom: 1px solid grey;
            width: 320px;
            height: 100px;
            padding: 14px;

        }
    </style>
</head>
<body>
<div class="big-box">
<div class="box1"></div>
<div class="line1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="line2"></div>
</div>

<div class="small-box">

</div>

2.<style>
.QR>div{
    width: 100px;
    height: 90px;
    background: url("QRcode.jpg");
    background-size: 100%;
    float: left;
    margin: 4px;
}
.QR>div:nth-child(1){
    /*border-right: 2px solid black;*/
}
.QR{
    float: left;
    border-bottom: 2px solid black;
    padding-bottom: 10px;
   position: fixed;
    bottom:0;
    margin-bottom: 40px;
    left: 50%;
    margin-left: -150px;
}
</style>
<div class="QR">
    <div></div>
    <div style=" width:1px ; height: 90px ;border-left: 2px solid"></div>
    <div></div>
    <div> </div>
posted on 2017-05-21 14:50  MAKIYO920  阅读(70)  评论(0)    收藏  举报