制作美联英语在线VIP页面----特色服务模块

整体的布局是采用Bootstrap框架的12栅格系统制作的，适配了中等屏幕、小屏幕和超小屏幕。使用了push和pull列排序：

<!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 href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/myCSS.css" /></head><body><div class="clearfix" id="home_service"><div class="container"><h2 class="btitle">更多特色服务</h2><h4 class="subtitle"><span>4+核心优势 N+成效保障</span></h4><br><div class="row"><div class="col-md-2 col-sm-3 col-xs-3"><img class="img-responsive" src="data:image/3.png" alt=""></div><div class="col-md-10 col-sm-9 col-xs-9"><div class="text-left"><h4>担心计划没有变化快？4小时+随订随上</h4><p >学习之所以难以坚持，有时仅仅因为计划没有变化快：会议取消、约会提前、行程更改... 我们打破了24小时的桎梏，打造行业内唯一可课前4小时订课/退课机制，更有推荐课程，可随时预订随时上。让你真正以不变应万变。</p></div></div></div><div class="row"><div class="col-md-2 col-sm-3 col-xs-3 col-md-push-10 col-sm-push-9 col-xs-push-9"><img class="img-responsive" src="data:image/4.png" alt=""></div><div class="col-md-10 col-sm-9 col-xs-9 col-md-pull-2 col-sm-pull-3 col-xs-pull-3"><div  class="text-right"><h4>需要帮助？需要督促？“保姆式”学习管理服务</h4><p class="pull-right">温暖的问候永远优于冰冷机器的制式化自动应答，我们始终坚持提供充满温度感的真人学习管理服务。为每位学员配备专属学习指导，量身打造学习计划、管理学习进度，高效高颜值的真人在线SA团队，为你的学习保驾护航。</p></div></div></div><div class="row"><div class="col-md-2 col-sm-3 col-xs-3"><img class="img-responsive" src="data:image/5.png" alt=""></div><div class="col-md-10 col-sm-9 col-xs-9"><div class="text-left"><h4>学员福利出国游！学英语，看世界！</h4><p>2015年开始，我们将以旅行的方式，带学员们深度走访全球自然与文化处所。这将是一场跨越20年甚至更久的旅程，161个国家及地区，1007个人类文明及自然遗产...语言，是认知世界的工具！我们愿做你认知世界的伙伴！</p></div></div></div><div class="row"><div class="col-md-2 col-sm-3 col-xs-3 col-md-push-10 col-sm-push-9 col-xs-push-9"><img class="img-responsive" src="data:image/6.png" alt=""></div><div class="col-md-10 col-sm-9 col-xs-9 col-md-pull-2 col-sm-pull-3 col-xs-pull-3"><div class="text-right"><h4>免费送！海量学习资源！课程复习+课后巩固</h4><p class="pull-right">你学习过的每节课程都有同步录像，上课时，你只需专心听讲，无需分心记笔记；课后，可随时免费查看录像，进行高效便捷复习；英语胶囊（7000多互动学习视频）、掌中英语、词管家APP等学习资源，帮你利用碎片时间巩固学习。</p></div></div></div></div></div></body>
</html>

CSS样式：


body {font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;
}
h2.btitle {margin-bottom: 20px;text-align: center;line-height: 50px;font-size: 38px;color: #00a080;font-weight: 100;
}
h4.subtitle {position: relative;margin-bottom: 20px;color: #666;text-align: center;line-height: 30px;
}
#home_service {padding-top: 75px;padding-bottom: 100px;line-height: 30px;
}#home_service .media {margin-bottom: 30px;
}
p {max-width: 700px;margin: 0 0 10px;width: 100%;color: #666;
}

以下是效果图：

窗口缩小了也不会影响页面的布局：

纸上得来终觉浅，绝知此事要躬行！在课堂上老师教的知识是比较少的，想要学得更多那就需要自己课后自学，百度是一个很好的老师！

制作美联英语在线VIP页面----特色服务模块相关推荐

课后练习--制作美联英语在线VIP页面——学伴
这里有样式和主架构,素材和bootstrap的代码需要自己添加若是出现了bug请查看自己的Bootstrap.min.css导入是否正确 css样式: body{font-family: " ...
制作美联英语在线vip页面---师资模块
如果你还没了解Bootstrap框架,你需要先了解基础的Bootstrap框架 https://blog.csdn.net/qq_44739706/article/details/105381989 ...
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container.row等栅格系统的知识布局响应式的网页,需要适配中等屏幕.小屏幕.超小屏幕使用.img-responsive设置响应式图片,使之适应不同屏幕的终端使用.img-t ...
小陈学前端-bootstrap-案例：美联英语在线VIP微电影页面
中等屏幕: 小屏幕: 超小屏幕: 代码:
美联英语在线VIP-师资（HTML，css）
** -铁汁直接代码了 ** index <!DOCTYPE html> <html> <head lang="en"><meta ch ...
c语言撇号的用法,不同的语言标点使用也不同，英语中的撇号如何使用？美联英语带你了解...
学了这么多年英语,你真的会使用英语中的撇号吗?各种所有格和动词缩略语怎么写又是正确的呢? The possessive case 所有格 The possessive case is used to ...
springboot+英语在线学习系统毕业设计-附源码211714
spring boot英语在线学习系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
springboot+英语在线学习系统毕业设计-附源码
spring boot英语在线学习系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
PHP初中英语在线考试系统的设计与实现-计算机毕设附源码 87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...

制作美联英语在线VIP页面----特色服务模块

制作美联英语在线VIP页面----特色服务模块相关推荐

最新文章

热门文章