美联英语在线VIP-师资（HTML，css）

最新推荐文章于 2022-12-28 21:39:35 发布

莫白媛

最新推荐文章于 2022-12-28 21:39:35 发布

阅读量1.9k

点赞数 4

分类专栏： css HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_46579394/article/details/122731328

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

-铁汁直接代码了

**
在这里插入图片描述

index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>美联英语在线VIP-真人在线英语学习-美联英语免费在线学习网站 - 美联英语在线VIP</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>

    <!-- 2000+全球师资 100%欧美外教 -->
    <div class="clearfix" id="home_teacher">
        <div class="container">
            <h2 class="btitle">
                2000+全球师资 100%欧美外教
            </h2>
            <h4 class="subtitle">
            <span>
                TESOL证书 / 5年以上教龄 / 高颜值外教团
            </span>
            </h4>
            <br>
            <div class="row">
                <div class="col-md-8 col-sm-6">
                    <div class="titem metvideo" style="min-height: 350px;background-image:url(image/oleg.png)">
                        <!-- 教师名称 -->
                        <div class="tname right">
                            <h2>
                                Oleg
                            </h2>
                            <h5>
                                TEFL / 4年教龄
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="titem metvideo" style="min-height: 350px;background-image:url(image/oksana.png)">
                        <!-- 教师名称 -->
                        <div class="tname left">
                            <h2>
                                Oksana
                            </h2>
                            <h5>
                                TESOL / 5年教龄
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="titem metvideo" style="min-height: 200px;background-image:url(image/ewelina.png)">
                        <!-- 教师名称 -->
                        <div class="tname right">
                            <h2>
                                Ewelina
                            </h2>
                            <h5>
                                TESOL / 9年教龄
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="titem metvideo" style="min-height: 200px;background-image:url(image/juraj.png)">
                        <!-- 教师名称 -->
                        <div class="tname right">
                            <h2>
                                Juraj
                            </h2>
                            <h5>
                                TESOL / 3年教龄
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <a class="tmore text-center" href="#">
                        <img src="image/tmore.png" alt="">
                        <div>
                            查看更多&nbsp;
                            <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>


</html>

css


body {
    font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;
}


/*2000+全球师资 100%欧美外教 */
#home_teacher {
    padding-top: 75px;
    padding-bottom: 100px;
    color: #fff;
}
h4.subtitle {
    position: relative;
    margin-bottom: 20px;
    color: #666;
    text-align: center;
    line-height: 30px;
}
#home_teacher .titem, #home_teacher .tmore {
    position: relative;
    margin-bottom: 30px;
    text-shadow: 1px 1px 1px gray;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: solid 5px #f6f792;
}

#home_teacher .titem div.tname.right {
    right: 25px;
    text-align: right;
}
#home_teacher .titem div.tname {
    position: absolute;
}
#home_teacher .titem div.tname.left {
    left: 25px;
    text-align: left;
}
#home_teacher .titem div.tname {
    position: absolute;
}
#home_teacher .tmore {
    display: block;
    min-height: 200px;
    line-height: 30px;
    padding-top: 45px;
    color: #fff;
    background-color: #eb7085;
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    opacity: .75;
}
h2.btitle {
    margin-bottom: 20px;
    text-align: center;
    line-height: 50px;
    font-size: 38px;
    color: #00a080;
    font-weight: 100;
}