admin 管理员组文章数量: 887021
课后练习
这里有样式和主架构，素材和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="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="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="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>完成了之后的样式如下：
缩小了之后样式：
总结：
一滴墨水可以让一瓶水变黑，一小段代码也可以使整个布局升华，细节很重要
本文标签： 课后练习
版权声明：本文标题：课后练习 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687752111h137080.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论