5-3 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，对新闻内容进行排版。

要求：div的最小高度是300px，随新闻内容的增多可以自动撑开，每段文字首行缩进2个字符，行高25px。新闻中的图片水平居中。

效果图:

素材图片:

图片引用地址: http://img1.sycdn.imooc.com//53edaa5a0001c86705000420.jpg

 

任务

在style标签内完以下样式定义:

一、定义新闻内容所在div的整体样式.newsBox。

二、定义标题的样式.newsTitle

三、定义标题下方发布人、发布时间等样式.newsInfo

四、定义新闻内容的样式.newsContent

五、设置新闻中的图片水平居中

六、设置新闻内部标题加粗

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. /*在此定义相关样式*/
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div class="newsBox">
  20. <h1 class="newsTitle">慕课网获App Store强力推荐荣登四榜单</h1>
  21. <p class="newsInfo">发布人：Admin 发布时间：2014-08-01 浏览：5321次</p>
  22. <div class="newsContent">
  23. <p> 8月伊始，慕课网App即获得了App Store的多个推荐，同时出现在“免费App精选”、“致毕业生”、“学而不倦”以及“轻松学编程”四个榜单中。这款IT编程学习类的App为何如此备受青睐？趣味视频课程、高清画面质感、在线离线随身学习……优质的课程内容结合良好的用户体验，慕课网App无疑是IT学习的最佳选择。</p>
  24. <p> App Store力荐慕课网荣登四榜单</p>
  25. <p>App Store因公平著称，能被其推荐是每一款App梦寐以求的荣誉，慕课网则一举占据了其四个榜单，包括精品推荐首页“合集”版块下“免费App精选”中的“新品”推荐、“合集”版块“致毕业生”中“学无止境”推荐、教育类别“合集”版块下“学而不倦”中的推荐以及“轻松学编程”版块推荐。</p>
  26. <p><img src=" http://img1.sycdn.imooc.com//53edaa5a0001c86705000420.jpg" width="500" height="420" alt=""/></p>
  27. <p>事实上，慕课网登上App Store榜单并非首次。早在2014年5月，慕课网就荣登App Store 精品推荐榜首，同时登上“教育”类别下“优秀新App”榜首，并获评“五月最佳”精彩App。随后，慕课网App接连出现在“致毕业生”、“免费App精选”、“夏日学堂”等榜单中。</p>
  28. <p>从App Store的持续推荐以及“优秀”、“精选”的肯定中不难看出，慕课网在IT在线学习领域以及教育类App中得到了用户的认可。</p>
  29. <p>新功能上线持续提升用户体验一款好的产品同样需要不断改进来满足用户需求。慕课网App上线至今进行了多个版本的迭代，不断完善产品、提升用户体验，ios最新的2.1.0版本于7月20日更新，上线了大量新功能。</p>
  30. <p>明确、清晰的课程分类能够让用户迅速找到感兴趣的课程，本次慕课网就上线了全新的课程分类方式，点击“全部课程”即可显示出全部的技术语言种类以及视频课程数量，全部在线课程一目了然。</p>
  31. <p>不知道讲师在哪里？此版本更新中添加了讲师认证，不仅对讲师空间进行了认证，在课程讨论和笔记中，通过认证标识，一眼可以看到哪个是讲师回复。</p>
  32. <p>此外，慕课网App在最新版本中调整了下拉刷新和上拉加载的效果；课程练习部分增加了习题解析；对半透化效果、全屏播放器按钮进行了优化，并新增了编程课、ps课程。一系列的改进相信能为IT学习用户带来更好的学习体验。</p>
  33. <p>慕课网App在精品视频课程的基础上，不断优化用户体验，帮助IT学习者迅速入门、提升技能，以优秀的产品基因获得App Store的多个推荐，使更多用户有机会使用这款IT学习软件，体验学习的简单和快捷。</p>
  34. </div>
  35. </div>
  36. </body>
  37. </html>
下一节