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

作者: GeorgiaLin | 来源:发表于2019-03-20 10:50 被阅读0次

CSS编程练习和常用文章界面设计
2019/3/13-人机交互实验四
CSS编程练习和界面设计
基于Bootstrap进行网页设计
基于Boostrap进行网页设计
CSS编程排版练习
CSS 变量使用详解
2018-06-19
day01
day01

详解边框

边框效果

效果

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

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

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

完整代码如下：

     <!DOCTYPE html>
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta charset="utf-8" />
      <title></title>
      <style>
        .mainBox{
        width : 960px;
        background-color:#CFF;
        height:300px;
        clear:both;
          }
        .leftBox{
        width:740px;
        background-color:#c9f;
        height:300px;
        float:left;
            }
        .rightBox{
        width : 210px;
        height:300px;
        background-color:#fcf;
        float:right;
          }
      </style>
      </head>
      <body>
      <div class="mainBox">
      <div class="leftBox"></div>
      <div class="rightBox"></div>
      </div>
        </body>
      </html>

常用文章布局

捕获5.PNG

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

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

标题实现

<style>
      .newsTitle{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:x-large;
        align-content:center;
        line-height:25px;
        text-align:center;}
        
    .newsInfo{
         text-align:center;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       color:darkgray;
       font-size:small;
        margin-bottom:0px;/*这里实现了位于下面的虚线*/
        border-bottom:1px dashed darkgray;}
  </style>

HTML:

        <h1 class="newsTitle">慕课网获App Store强力推荐荣登四榜单</h1>
        <p class="newsInfo">发布人：Admin 发布时间：2014-08-01 浏览：5321次</p>

效果

文字格式

CSS定义

       <style>
       .newsContent{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:small;
        margin-left:100px;
        margin-right:100px;/*距离右边框的距离*/
        text-indent:2em; /*实现缩进*/
         line-height:25px;/*行高*/
       }</style>

HTML

          <div class="newsContent">
          <p> ....  </p>
          <p><strong> ....  <strong></p>/*加粗*/
           </div>

效果展示

完整代码：

    <!DOCTYPE html>

  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta charset="utf-8" />
<title></title>
<style>
    .newsBox{
        position :relative ;
       min-height:300px; 
    }
    .newsTitle{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:x-large;
        align-content:center;
        line-height:25px;
        text-align:center;

    }
    .newsInfo{
         text-align:center;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       color:darkgray;
       font-size:small;
        margin-bottom:0px;
        border-bottom:1px dashed darkgray;
       
    }
    .newsContent{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:small;
        margin-left:100px;
        margin-right:100px;
        text-indent:2em;
         line-height:25px;
       
    }
    
</style>
</head>
  <body>
<div class="newsBox">
<h1 class="newsTitle">慕课网获App Store强力推荐荣登四榜单</h1>
<p class="newsInfo">发布人：Admin 发布时间：2014-08-01 浏览：5321次</p>

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