CSS编程练习和常用文章界面设计

详解边框

边框效果
效果

整个页面宽度为960px,背景颜色为#CFF。左侧盒子宽度为740px,背景颜色为#C9F,右侧盒子宽度为210px,背景颜色为#FCF。左侧和右侧盒子的高度均为300px。
一、在右侧代码的body标签中添加一个div,设置其class属性为mainBox。
二、在mainBox中添加两个div,其class属性分别为leftBox和rightBox。
三、在右侧代码的之前,分别定义类选择器mainBox、leftBox、rightBox,并按照题目要求定义其CSS样式。

提示:
1.根据任务要求设置相关CSS样式

  1. leftBox和rightBox需要嵌套在mainBox中
    注意:leftBox和rightBox设置浮动之后脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父div撑开。
    解决的方法:
    ①可以给父div也设置高度为300px,使页面中的leftBox和rightBox看起来“好像”还在原来的位置;
    ②定义一个类选择器,并设置clear:both;清除浮动,同时为了解决IE6中div有高度的问题可以增加属性height:0; overflow:hidden;

完整代码如下

     
      
      
      
      
      
      
      
      

常用文章布局

捕获5.PNG

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

在style标签内完以下样式定义:
一、定义新闻内容所在div的整体样式.newsBox。
二、定义标题的样式.newsTitle
三、定义标题下方发布人、发布时间等样式.newsInfo
四、定义新闻内容的样式.newsContent
五、设置新闻中的图片水平居中
六、设置新闻内部标题加粗

标题实现


HTML:

        

慕课网获App Store强力推荐荣登四榜单

发布人:Admin 发布时间:2014-08-01 浏览:5321次

效果

文字格式

CSS定义

       

HTML

          

....

....

/*加粗*/

效果展示


完整代码:

    

  
  




  

慕课网获App Store强力推荐荣登四榜单

发布人:Admin 发布时间:2014-08-01 浏览:5321次

8月伊始,慕课网App即获得了App Store的多个推荐,同时出现在“免费App精选”、“致毕业生”、“学而不倦”以及“轻松学编程”四个榜单中。这款IT编程学习类的App为何如此备受青睐?趣味视频课程、高清画面质感、在线离线随身学习……优质的课程内容结合良好的用户体验,慕课网App无疑是IT学习的最佳选择。

App Store力荐慕课网荣登四榜单

App Store因公平著称,能被其推荐是每一款App梦寐以求的荣誉,慕课网则一举占据了其四个榜单,包括精品推荐首页“合集”版块下“免费App精选”中的“新品”推荐、“合集”版块“致毕业生”中“学无止境”推荐、教育类别“合集”版块下“学而不倦”中的推荐以及“轻松学编程”版块推荐。

事实上,慕课网登上App Store榜单并非首次。早在2014年5月,慕课网就荣登App Store 精品推荐榜首,同时登上“教育”类别下“优秀新App”榜首,并获评“五月最佳”精彩App。随后,慕课网App接连出现在“致毕业生”、“免费App精选”、“夏日学堂”等榜单中。

从App Store的持续推荐以及“优秀”、“精选”的肯定中不难看出,慕课网在IT在线学习领域以及教育类App中得到了用户的认可。

新功能上线持续提升用户体验一款

好的产品同样需要不断改进来满足用户需求。慕课网App上线至今进行了多个版本的迭代,不断完善产品、提升用户体验,ios最新的2.1.0版本于7月20日更新,上线了大量新功能。

明确、清晰的课程分类能够让用户迅速找到感兴趣的课程,本次慕课网就上线了全新的课程分类方式,点击“全部课程”即可显示出全部的技术语言种类以及视频课程数量,全部在线课程一目了然。

不知道讲师在哪里?此版本更新中添加了讲师认证,不仅对讲师空间进行了认证,在课程讨论和笔记中,通过认证标识,一眼可以看到哪个是讲师回复。

此外,慕课网App在最新版本中调整了下拉刷新和上拉加载的效果;课程练习部分增加了习题解析;对半透化效果、全屏播放器按钮进行了优化,并新增了编程课、ps课程。一系列的改进相信能为IT学习用户带来更好的学习体验。

慕课网App在精品视频课程的基础上,不断优化用户体验,帮助IT学习者迅速入门、提升技能,以优秀的产品基因获得App Store的多个推荐,使更多用户有机会使用这款IT学习软件,体验学习的简单和快捷。

你可能感兴趣的:(CSS编程练习和常用文章界面设计)