CSS编程练习和界面设计

1. 实验准备

• 熟悉层叠样式表css语法；
• 登录w3school，进行示例练习；
  http://www.w3school.com.cn/css/index.asp
• 查看一个在线的css实战教程：
  http://www.imooc.com/learn/147

2. 实验内容

实验一

• 根据所学知识，实现如下图所示的简单两列布局。
  整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。

  
  
  页面图片.png

实验二

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

效果展示.png

图片引用地址: http://img.mukewang.com/53edaa5a0001c86705000420.jpg

3.详细操作

实验一具体要求

• 在右侧代码的body标签中添加一个div，设置其class属性为mainBox。
• 在mainBox中添加两个div，其class属性分别为leftBox和rightBox。
• 在右侧代码的之前，分别定义类选择器mainBox、leftBox、rightBox，并按照题目要求定义其CSS样式。

基础代码：

 
  
  
  
 
 
  
//添加div标签，并设置属性
   
   //leftBox和rightBox需要嵌套在mainBox中
   

  
 

• 如何让leftBox和rightBox浮在mainBox上面，我们学习使用css中的float属性
  float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
  注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

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

实验二具体要求

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

• 定义新闻内容所在div的整体样式.newsBox。
• 定义标题的样式.newsTitle
• 定义标题下方发布人、发布时间等样式.newsInfo
• 定义新闻内容的样式.newsContent
• 设置新闻中的图片水平居中
• 设置新闻内部标题加粗

基础代码：

 
 
 
 
 
 
  

   
慕课网获App Store强力推荐荣登四榜单
   
发布人：Admin 发布时间：2014-08-01 浏览：5321次
   

    
 8月伊始，慕课网App……是IT学习的最佳选择。
    
 App Store力荐慕课网荣登四榜单
    
App Store因公平著称，……推荐。
    

    
事实上，……得到了用户的认可。
   
  
 

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

.newsBox{
            width: 800px;
        }

• 定义标题的样式.newsTitle

.newsTitle{
            text-align: center;
        }

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

.newsInfo{
           text-align: center;
            color:#8A8989;
        }

• 定义新闻内容的样式.newsContent

.newsContent p{
            text-indent: 2em;
            line-height: 25px;/* 行高25px  */
            font-family:Arial,Helvetica;
            /*em是相对单位，2em即现在一个字大小的两倍*/
        }

• 设置新闻中的图片水平居中

  .imgine{
            width: 800px;
            display: table-cell; /* 图片水平居中显示 */
            vertical-align: middle;
            text-align: center;
        }

• 设置新闻内部标题加粗

.sTitle{
            font-weight: bold;
        }

注意：

之间的文字可以替换成自己想要的内容，图片也可以更换。