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样式。

基础代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>无标题文档</title>
  <style type="text/css">
/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
  </style>
 </head>
 <body>
  <div class="mainBox">//添加div标签，并设置属性
   <div class="leftBox"></div> &nbsp; //leftBox和rightBox需要嵌套在mainBox中
   <div class="rightBox"></div>
  </div>
 </body>
</html>

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

<style>
     .mainBox{
            width: 960px;
            height: 300px;
            background-color: #CFF;
       }
     .leftBox{
           width: 740px;
           height: 300px;
           background-color: #C9F;
           background-repeat: no-repeat;
           float: left;  //使leftBox向左浮动
    }
    .rightBox{
            width: 210px;
            height: 300px;
            background-color: #FCF;
            text-align: center;
            float: right;    //使rightBox向右浮动
        }
  </style>

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

实验二具体要求

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

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

基础代码：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
/*在此定义相关样式*/
 </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……是IT学习的最佳选择。</p>
    <p> App Store力荐慕课网荣登四榜单</p>
    <p>App Store因公平著称，……推荐。</p>
    <p><img src=" http://img.mukewang.com/53edaa5a0001c86705000420.jpg" width="500" height="420" alt=""/></p>
    <p>事实上，……得到了用户的认可。</p>
   </div>
  </div>
 </body>
</html>

定义新闻内容所在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;
        }

注意：<p></p>之间的文字可以替换成自己想要的内容，图片也可以更换。

CSS编程练习和界面设计

CSS编程练习和界面设计

1. 实验准备

2. 实验内容

实验一

实验二

3.详细操作

实验一具体要求

实验二具体要求