2019.10.30 弹性盒子

一、弹性盒子制作网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="2019.10.30.css"/>
    </head>
    <body>
        <div id="bgc">
            <div id="top">穷游商城</div>
            <div id="box">
                <div class="inside">
                    <div class="left">
                        <div id="text">距结束427天</div>
                        <div id="hengfu"></div>
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">[元旦]北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返含税机票</div>
                        <div class="right2">APP立减100元</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">8999</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
                <div class="inside">
                    <div class="left">
                        <div id="text">距结束61天</div>
                        <div id="hengfu"></div>
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">北京/天津直飞日本冲绳4-5天自由行（国航早去午回+城市/海边多酒店搭配+双人早餐/日本三年多次签证超值加购）</div>
                        <div class="right2">APP立减150元</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">699</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
                <div class="inside">
                    <div class="left">
                        <div id="text">距结束05天</div>
                        <div id="hengfu"></div>
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">北京直飞塞班6-7天含税机票(限时立减200元+可升级商务舱+东航直飞正点时段)</div>
                        <div class="right2">APP立减200元</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">880</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
                <div class="inside">
                    <div class="left">
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">【北欧破冰船】芬兰+瑞典 极地探险号破冰船活动+冰上漂浮+瑞典小镇观光 赠破冰证书 2020中国新年巡礼（罗瓦涅米/凯米往返/码头出发）</div>
                        <div class="right5">秒杀</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">335</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
                <div class="inside">
                    <div class="left">
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">瑞士因特拉肯少女峰门票+往返火车票（免打印+快速出票）</div>
                        <div class="right5">秒杀</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">1129</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
                <div class="inside">
                    <div class="left">
                        <img src="../image/2.jpg" >
                    </div>
                    <div class="right">
                        <div class="right1">新西兰皇后镇skyline天空缆车+自助午餐/晚餐（缆车票/滑板车/自助大餐/观星可选）</div>
                        <div class="right5">秒杀</div>
                        <div id="big">
                            <div class="rightmoney">¥</div>
                            <div class="rightnumber">880</div>
                            <div class="right3">元起</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="under">
                <div id="in">查看更多商品</div>
            </div>
        </div>
    </body>
</html>

css：

*{
    margin: 0 auto;
    padding: 0;
}
body{
    width: 1349px;
}
div{
    box-sizing: border-box;
}
#bgc{
    width: 1349px;
    height: 500px;
    background: linear-gradient(180deg,#6dd27c,#1bcdae);
}
#top{
    height: 70px;
    width: 1349px;
    line-height: 70px;
    text-align: center;
    color: white;
    font-size: 30px;
}
#box{
    height: 360px;
    width: 70%;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    flex-wrap: wrap;
}
.inside:hover{
    cursor: pointer;
}
.inside{
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 160px;
    width: 31%;
}
.left{
    position: relative;
    overflow: hidden;
    height: 160px;
    width: 40%;
}
.left img{
    width: 100%;
    height: 100%;
}
.right{
    padding: 15px;
    height: 160px;
    width: 60%;
    background-color: white;
}
.right1{
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    height: 39px;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.right2{
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    margin-left: 0px;
    height: 19px;
    width: 60%;
    border: 1px solid #4a90e2;
    color: #4a90e2;
}
.right5{
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    margin-left: 0px;
    height: 19px;
    width: 25%;
    border: 1px solid #4a90e2;
    color: #4a90e2;
}
#big{
    margin-right: 0px;
    align-items: flex-end;
    height: 46px;
    width: 78%;
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
}
.right3{
    font-size: 16px;
    height: 21px;
    width: 32px;
    color: #ff7362;
}
.rightmoney{
    font-size: 16px;
    height: 21px;
    width: 12px;
    color: #ff7362;
}
.rightnumber{
    line-height: 61px;
    text-align: center;
    font-size: 28px;
    width:69px;
    height: 46px;
    color: #ff7362;
}
#text{
    width: 77px;
    height: 22px;
    margin-left: 5px;
    line-height: 20px;
    color: white;
    font-size: 12px;
    position: absolute;
    z-index: 3;
}
#hengfu{
    width: 90px;
    height: 22px;
    margin-left: -5px;
    background-color: #ff5950;
    position: absolute;
    z-index: 2;
    transform:skew(-10deg,0);
}
#under{
    height: 70px;
    width: 1349px;
    line-height: 70px;
    text-align: center;
    color: #636363;
    font-size: 16px;
}
#in{
    background-color: white;
    width: 226px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #636363;
    font-size: 18px;
}
#in:hover{
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
}

效果图：

二、代码

box-sizing: border-box; 边框变为增加在内部

background: linear-gradient(180deg,#6dd27c,#1bcdae); 渐变背景颜色

flex-wrap: wrap; 弹性盒子换行

justify-content: space-around; 空间平分（平行）

justify-content: flex-start; 左侧对齐（平行）

justify-content: flex-end; 右侧对齐（平行）

justify-content: center; 居中对齐（平行）

justify-content：space-between；两侧对齐（平行）

align-items: flex-start; 顶部对齐（垂直）

align-items: flex-end; 底部对齐（垂直）

align-items：center；居中对齐（垂直）

box-shadow: 0 0 10px rgba(0,0,0,.4); 四周阴影

posted @ 2019-10-31 16:21 墨染千城阅读(173) 评论(0) 收藏举报

刷新页面返回顶部

墨染千城

2019.10.30 弹性盒子

公告