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

-铁汁直接代码了

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="data: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;
}

bootstrap.min（算了，总个css包吧）太多了给个超链接免费下载吧
css文件源码

老铁来个
么么叽么么哒谢谢！

美联英语在线VIP-师资（HTML，css）相关推荐

制作美联英语在线vip页面---师资模块
如果你还没了解Bootstrap框架,你需要先了解基础的Bootstrap框架 https://blog.csdn.net/qq_44739706/article/details/105381989 ...
课后练习--制作美联英语在线VIP页面——学伴
这里有样式和主架构,素材和bootstrap的代码需要自己添加若是出现了bug请查看自己的Bootstrap.min.css导入是否正确 css样式: body{font-family: " ...
制作美联英语在线VIP页面----特色服务模块
整体的布局是采用Bootstrap框架的12栅格系统制作的,适配了中等屏幕.小屏幕和超小屏幕.使用了push和pull列排序: <!DOCTYPE html> <html>&l ...
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container.row等栅格系统的知识布局响应式的网页,需要适配中等屏幕.小屏幕.超小屏幕使用.img-responsive设置响应式图片,使之适应不同屏幕的终端使用.img-t ...
小陈学前端-bootstrap-案例：美联英语在线VIP微电影页面
中等屏幕: 小屏幕: 超小屏幕: 代码:
c语言撇号的用法,不同的语言标点使用也不同，英语中的撇号如何使用？美联英语带你了解...
学了这么多年英语,你真的会使用英语中的撇号吗?各种所有格和动词缩略语怎么写又是正确的呢? The possessive case 所有格 The possessive case is used to ...
DaDa英语完成卖身好未来？英语在线1v1再洗牌
4月29日,好未来发布其截至2020年2月29日的2020财年第四季度和全年未经审计财务报告.在该报告中披露了一起好未来的投资协议:"公司最近达成一笔1040万美元的投资协议,以换取一家在线 ...
php mysql英语在线考试系统+论文
php mysql英语在线考试系统,分学生和管理员两个角色,普通考生输入准考证进入考试,可以查看自己信息,可以选择答A卷B卷,提交可以查看自己的分数,可以退出考试后台:管理员登录.添加.修改.删除会员 ...
美联航弄坏吉他后怎么办？——驾驭来自社交媒体的客户抱怨
罗伯特·沃伦(Robert Wallen) 埃森哲客户关系管理(CRM)咨询服务全球董事总经理.他领导的全球专家团队为客户提供营销.销售&服务.多渠道客户接触转型和客户分析等咨询服务,帮助客户 ...

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

美联英语在线VIP-师资（HTML，css）相关推荐

最新文章

热门文章