课后练习--制作美联英语在线VIP页面—

这里有样式和主架构，素材和bootstrap的代码需要自己添加
若是出现了bug请查看自己的Bootstrap.min.css导入是否正确
css样式：

body{font-family: "arial rounded mt bold"
}h2.btitle{margin-bottom: 20px;line-height: 50px;font-size: 38px;color: #00a080;font-weight: 100;
}
#home_partner{padding-bottom: 100px;line-height: 25px;
}h4.subtitle{position: relative; margin-bottom: 20px;color: #666;text-align: center;line-height: 30px;
}
#home_partner .partneritem img.img-responsive {width: 100%;border-bottom: solid 5px #f6f792;
}

index.html页面：

<!DOCTYPE html>
<html><head><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页面--学伴</title><link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="css/index4.css"/></head><body><div class="clearfix" id="home_partner"><div class="container text-center"><h2 class="btitle">有伴有爱有力量，再也不怕学习没动力</h2><h4 class="subtitle"><span>学习从来不是轻松事，与其孤身奋战，不如找到志同道合小伙伴一起坚持到底，免费的哦</span></h4><div class="row"><div class="col-md-4  col-sm-4 col-xs-12"><div class="partneritem"><img class="img-responsive img-rounded" src="data:image/01.jpg" ><h4>学习太苦，坚持不住</h4><p>学伴功能，一键添加小伙伴。 免费一起学，互相督促进步快！</p></div></div><div class="col-md-4 col-sm-4 col-xs-12"><div class="partneritem"><img class="img-responsive img-rounded" src="data:image/02.jpg" ><h4>出国旅行，口语太差</h4><p>学伴功能，免费添加全部旅伴。 一起恶补，齐心协力出国不愁！</p></div></div><div class="col-md-4 col-sm-4 col-xs-12"><div class="partneritem"><img class="img-responsive img-rounded" src="data:image/03.jpg" ><h4>是英语课，也是交友会</h4><p>20多个城市，70多家美联中心， I Show活动课，欢迎一起来玩耍！</p>    </div></div></div></div><script src="js/jquery-1.12.4.js"></script><script src='js/bootstrap.min.js'></script></div></body>
</html>

完成了之后的样式如下：

缩小了之后样式：

总结：
一滴墨水可以让一瓶水变黑，一小段代码也可以使整个布局升华，细节很重要

课后练习--制作美联英语在线VIP页面——学伴相关推荐

制作美联英语在线VIP页面----特色服务模块
整体的布局是采用Bootstrap框架的12栅格系统制作的,适配了中等屏幕.小屏幕和超小屏幕.使用了push和pull列排序: <!DOCTYPE html> <html>&l ...
制作美联英语在线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 ...
PHP初中英语在线考试系统的设计与实现-计算机毕设附源码 87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...
PHP初中英语在线考试系统的设计与实现-计算机毕设附源码87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...
PHP初中英语在线考试系统的设计与实现计算机毕设源码87564
摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好的满足实际使用的需求,完善了对应的软体架 ...

课后练习--制作美联英语在线VIP页面——学伴

课后练习--制作美联英语在线VIP页面——学伴相关推荐

最新文章

热门文章