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

最新推荐文章于 2023-03-18 09:45:23 发布

天元白手

最新推荐文章于 2023-03-18 09:45:23 发布

阅读量6.5k

点赞数 8

分类专栏： Bootstrap学习文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_44739706/article/details/105426620

版权

Bootstrap学习专栏收录该内容

7 篇文章 5 订阅

订阅专栏

整体的布局是采用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="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="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="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="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;
}