练习9 1.选择题 (1) D (2) B (3) D (4) A (5) C 2.填空题 (1) text-indent;text-align:center; (2) background-repeat:repeat-x;background-position。 (3) red或RGB(100%,0,0)、rgb(255,0,0)、#FF0000、#F00 (4) 边框为2像素、双实线、红色。 3.问答题 见教材。 实验9 1、源代码:实验9-1演示
------------------- exp_9_1.html -----------------
<!-- ex_9_1.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>CSS+div</title>
        <style type="text/css">
            body{
                margin:0;   
            }
            #wrap{
                width:900px;
                margin:0 auto;  
                border:solid 2 red;
                margin-top:5px;
            }
            div{
                text-align:center;
            }
            #pic{
                width:420px;
                height:300px;
                background-image:url(ex8.jpg);
                background-repeat:no-repeat;
                background-position:center;
                float:left;
                background-color:#77A;
            }
            #text{
                background-image:url(ex8.jpg);
                width:420px;    
                height:500px;
                float:right;
                background-color:#77A;
                padding:10px;
                font-weight:bold;
            }
            #title{
                font-family:"华文彩云"  ;
                font-size:32px;
            }
            #author{
                font-size:12px; 
                font-family:"黑体";
                text-align:right;
                margin-bottom:24px;
            }
            p{
                font-family:"隶书";
                font-size:24px;
                margin:2px;
                letter-spacing:0.5em;   
                line-height:1.5em;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="pic"></div>
            <div id="text">
                <div id="title">木兰花令.拟古决绝词</div>
                <div id="author">纳兰性德</div>
                <div id="content">
                    <p>人生若只如初见,</p>
                    <p>何事秋风悲画扇。</p>
                    <p>等闲变却故人心,</p>
                    <p>却道故心人易变。</p>
                    <p>骊山雨罢清宵半,</p>
                    <p>泪雨霖铃终不怨。</p>
                    <p>何如薄幸锦衣郎,</p>
                    <p>比翼连枝当日愿。</p>
                </div>
            </div>
        </div>
    </body>
</html>2. 实验9-2演示
<!-- exp_9_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>Head Line</title>
        <style type="text/css">
            h1{
                background:#678;
                color:white;
                text-align:center;  
            }
            p{
                font-family:Arial;
                font-size:16px;
                line-height:1.5em;  
            }
            .firstLetter{
                font-size:3em;
                float:left; 
            }
            img{
                border:dashed 1px gray;
                margin:10px 10px 10px 0;
                padding:5px;
                float:left; 
            }
        </style>
    </head>
    <body>
        <h1>Head Line</h1>
        <img src="cup.jpg"/>
        <p><span class="firstLetter">M</span>obile Widget使用的标准的Web技术,如HTML,CSS,javascript等。这些经典的Web技术规范是由W3C(万维网联盟)的下属各个工作组制定并推进的。作为开发Widget之前的知识准备,在本章中我们将逐一介绍这些技术。
    </body>
</html>