2019.11.2 笔记 - 码农教程

一、穷游练习

html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>穷游练习</title>
        <link rel="stylesheet" type="text/css" href="2019.11.1.css"/>
    </head>
    <body>
        <div id="body">
            <div id="title">
                热门游记与话题
            </div>
            <div id="content">
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h1"></div>
                    <span>MagicRabbit</span>
                    <div class="inboxTop">
                        <img src="../image/美女1.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            【七国混血国境之南】越南--永不结束的夏天，永不褪色的诗意
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h2"></div>
                    <span>ImJessieTsai</span>
                    <div class="inboxTop">
                        <img src="../image/美女2.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            巴基斯坦|和你想象中有点不一样（附详细攻略）
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h3"></div>
                    <span>Fiorelady</span>
                    <div class="inboxTop">
                        <img src="../image/美女3.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            下一站 首尔，一个你始终玩不透的城市，不同寻常的大学生轻奢之旅
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h4"></div>
                    <span>小英英的极暇游</span>
                    <div class="inboxTop">
                        <img src="../image/美女4.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            风光大洋路，萌宠袋鼠岛 - Butterfly & Pig 2019的南澳自驾春游记
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h5"></div>
                    <span>Cafe_Chen</span>
                    <div class="inboxTop">
                        <img src="../image/美女5.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            MSC地中海辉煌号邮轮：乐高、迪士尼、海上大(yang)剧(zhu)院(chang)
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h6"></div>
                    <span>Alexfish</span>
                    <div class="inboxTop">
                        <img src="../image/美女6.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            不正常山峰博物馆——幻境多洛米蒂梦游记（全文完）
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h7"></div>
                    <span>小英英的极暇游</span>
                    <div class="inboxTop">
                        <img src="../image/美女7.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            【慢游欧洲日记12】短暂紧凑的瑞士小城游（卢塞恩-因特拉肯-伯尔尼-图恩）
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="leftTilite">
                        精华
                    </div>
                    <div class="head h8"></div>
                    <span>超级大橙子</span>
                    <div class="inboxTop">
                        <img src="../image/美女8.jpg" >
                    </div>
                    <div class="inboxbottom">
                        <div class="text">
                            菲律宾丨海底两万里，坠入深蓝
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

css：

#body{
    width: 90%;
    height: 1000px;
    margin-left: 5%;
}
#title{
    height: 70px;
    line-height: 70px;
    color: #636363;
    font-size: 37px;
    font-weight: 500;
    text-align: center;
}
#content{
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    height: 635px;
    width: 100%;
}
.box{
    position: relative;
    border: 1px solid rgba(0,0,0,0.1);
    box-sizing: border-box;
    height: 300px;
    width: 24%;
}
.box:hover{
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.inboxTop{
    z-index: 1;
    position: relative;
    height: 65%;
    width: 100%;
    overflow: hidden;
}
.inboxTop img{
    height: 100%;
    width: 100%;
    transition: 1.5s;
}
.box:hover img{
    transform: scale(1.2,1.2);
}

.head{
    box-sizing: border-box;
    border: 4px solid white;
    width: 60px;
    height: 60px;
    margin-top: 167px;
    margin-left: 16px;
    position: absolute;
    border-radius:30px ;
    z-index: 2;
}
.h1{
    background: url(../image/头1.jpg);
    background-size: 100% 100%;
}
.h2{
    background: url(../image/头2.jpg);
    background-size: 100% 100%;
}
.h3{
    background: url(../image/头3.jpg);
    background-size: 100% 100%;
}
.h4{
    background: url(../image/头4.jpg);
    background-size: 100% 100%;
}
.h5{
    background: url(../image/头5.jpg);
    background-size: 100% 100%;
}
.h6{
    background: url(../image/头6.jpg);
    background-size: 100% 100%;
}
.h7{
    background: url(../image/头7.jpg);
    background-size: 100% 100%;
}
.h8{
    background: url(../image/头8.jpg);
    background-size: 100% 100%;
}
span{
    margin-top: 199px;
    margin-left: 87px;
    position: absolute;
    z-index: 2;
    color: #636363;
}
span:hover{
    cursor: pointer;
    color: #10b041;
}
.inboxbottom{
    box-sizing: border-box;
    text-align: center;
    height: 35%;
    width: 100%;
    background-color: white;
    color: #323232;
    font-weight: 600;
    font-size: 16px;
    padding: 41px 15px 0 15px;
}
.inboxbottom:hover{
    cursor: pointer;
    color: #10b041;
}
.text{
    height: 46px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.leftTilite{
    position: absolute;
    width: 55px;
    height: 30px;
    z-index: 3;
    margin-left: -5px;
    margin-top: 10px;
    background-color: #FE7369;
    text-align: center;
    line-height: 30px;
    color: white;
}

二、代码

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

<div class="head h3"></div> 双id的div

原文地址：https://www.cnblogs.com/l1314/p/11792790.html