1. 實驗準(zhǔn)備

熟悉層疊樣式表css語法；
登錄w3school，進行示例練習(xí)计维；
http://www.w3school.com.cn/css/index.asp
查看一個在線的css實戰(zhàn)教程：
http://www.imooc.com/learn/147

2. 實驗內(nèi)容

實驗一

根據(jù)所學(xué)知識蚁飒，實現(xiàn)如下圖所示的簡單兩列布局请契。
整個頁面寬度為960px胳赌，背景顏色為#CFF牢撼。左側(cè)盒子寬度為740px，背景顏色為#C9F疑苫，右側(cè)盒子寬度為210px熏版，背景顏色為#FCF。左側(cè)和右側(cè)盒子的高度均為300px捍掺。

頁面圖片.png

實驗二

根據(jù)所學(xué)知識撼短，對新聞內(nèi)容進行排版。
要求：div的最小高度是300px挺勿，隨新聞內(nèi)容的增多可以自動撐開曲横，每段文字首行縮進2個字符，行高25px满钟。新聞中的圖片水平居中胜榔。

效果展示.png

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

3.詳細操作

實驗一具體要求

在右側(cè)代碼的body標(biāo)簽中添加一個div胳喷，設(shè)置其class屬性為mainBox湃番。
在mainBox中添加兩個div，其class屬性分別為leftBox和rightBox吭露。
在右側(cè)代碼的之前吠撮，分別定義類選擇器mainBox、leftBox讲竿、rightBox泥兰，并按照題目要求定義其CSS樣式。

基礎(chǔ)代碼：

<!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>無標(biāo)題文檔</title>
  <style type="text/css">
/*在此定義相應(yīng)的類選擇器题禀，并根據(jù)要求設(shè)置相關(guān)CSS屬性*/
  </style>
 </head>
 <body>
  <div class="mainBox">//添加div標(biāo)簽鞋诗，并設(shè)置屬性
   <div class="leftBox"></div> &nbsp; //leftBox和rightBox需要嵌套在mainBox中
   <div class="rightBox"></div>
  </div>
 </body>
</html>

如何讓leftBox和rightBox浮在mainBox上面，我們學(xué)習(xí)使用css中的float屬性
float 屬性定義元素在哪個方向浮動迈嘹。以往這個屬性總應(yīng)用于圖像削彬，使文本圍繞在圖像周圍，不過在 CSS 中秀仲，任何元素都可以浮動融痛。浮動元素會生成一個塊級框，而不論它本身是何種元素神僵。如果浮動非替換元素雁刷，則要指定一個明確的寬度；否則保礼，它們會盡可能地窄沛励。
注釋：假如在一行之上只有極少的空間可供浮動元素责语，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止目派。

<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設(shè)置浮動之后脫離了普通的文檔流鹦筹，不再占用原來文檔中的位置，因此無法把父div撐開址貌。
解決的方法：
①可以給父div也設(shè)置高度為300px铐拐，使頁面中的leftBox和rightBox看起來“好像”還在原來的位置；
②定義一個類選擇器练对，并設(shè)置clear:both遍蟋；清除浮動，同時為了解決IE6中div有高度的問題可以增加屬性height:0; overflow:hidden;

實驗二具體要求

在style標(biāo)簽內(nèi)完以下樣式定義:

定義新聞內(nèi)容所在div的整體樣式.newsBox螟凭。
定義標(biāo)題的樣式.newsTitle
定義標(biāo)題下方發(fā)布人虚青、發(fā)布時間等樣式.newsInfo
定義新聞內(nèi)容的樣式.newsContent
設(shè)置新聞中的圖片水平居中
設(shè)置新聞內(nèi)部標(biāo)題加粗

基礎(chǔ)代碼：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>無標(biāo)題文檔</title>
 <style>
/*在此定義相關(guān)樣式*/
 </style>
 </head>
 <body>
  <div class="newsBox">
   <h1 class="newsTitle">慕課網(wǎng)獲App Store強力推薦榮登四榜單</h1>
   <p class="newsInfo">發(fā)布人：Admin 發(fā)布時間：2014-08-01 瀏覽：5321次</p>
   <div class="newsContent">
    <p> 8月伊始，慕課網(wǎng)App……是IT學(xué)習(xí)的最佳選擇螺男。</p>
    <p> App Store力薦慕課網(wǎng)榮登四榜單</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>

定義新聞內(nèi)容所在div的整體樣式.newsBox

.newsBox{
            width: 800px;
        }

定義標(biāo)題的樣式.newsTitle

.newsTitle{
            text-align: center;
        }

定義標(biāo)題下方發(fā)布人、發(fā)布時間等樣式.newsInfo

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

定義新聞內(nèi)容的樣式.newsContent

.newsContent p{
            text-indent: 2em;
            line-height: 25px;/* 行高25px  */
            font-family:Arial,Helvetica;
            /*em是相對單位淆院，2em即現(xiàn)在一個字大小的兩倍*/
        }

設(shè)置新聞中的圖片水平居中

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

設(shè)置新聞內(nèi)部標(biāo)題加粗

.sTitle{
            font-weight: bold;
        }

注意：<p></p>之間的文字可以替換成自己想要的內(nèi)容何乎，圖片也可以更換。

CSS編程練習(xí)和界面設(shè)計

CSS編程練習(xí)和界面設(shè)計

1. 實驗準(zhǔn)備

2. 實驗內(nèi)容

實驗一

實驗二

3.詳細操作

實驗一具體要求

實驗二具體要求