CSS的主觀題~
（一）
（8分）已知HTML結(jié)構(gòu)和效果圖如下：
<div class="parent">
<div class="side">側(cè)欄</div>
<div class="main">主欄</div>
</div>
要求如效果圖中標(biāo)注器紧，且總體水平居中滔蝉，兩欄間距為10px蛹找，請(qǐng)寫出這個(gè)兩列布局的CSS精肃，要求使用浮動(dòng)布局方法返顺，并需要清除浮動(dòng)酌畜。
答：
CSS部分
.parent{width: 810px;margin: 0 auto;font-size: 26px;text-align: center;color: #fff;line-height: 110px;}
.side{background-color: #c00002;width: 200px;float: left;height: 110px;margin-right: 10px;}
.main{background-color: #4f81bc;width: 600px;float: right;height: 110px;}
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
html部分
<div class="parent clearfix">
<div class="side">側(cè)欄</div>
<div class="main">主欄</div>
</div>
（二）
（10分）有一個(gè)新聞標(biāo)題羊异，效果如圖怎顾，標(biāo)題寬度為200px螟够，文字字體為宋體灾梦，加粗，文字大小為16px妓笙，顏色為黑色若河，行高為25px，要求單行顯示并且超出時(shí)顯示”…“寞宫，請(qǐng)按要求完成CSS萧福。效果圖：
答：
CSS部分
h3{width: 200px;font:bold 16px/25px "宋體",arial,sans-serif;color:black;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}
html部分
<h3 >標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字</h3>
（三）
已知結(jié)構(gòu)如下：
<div class="slide">
<!-- 圖片省略 -->
<!-- 以下是指示器 -->
<div class="pointer"><i class="current"></i><i></i><i></i></div>
</div>
要求如效果圖中標(biāo)注，幻燈（slide）寬200px辈赋，高100px鲫忍，指示器（pointer）在右下角，距離右邊10px距離下邊10px钥屈，指示器中的三個(gè)圓直徑為10px悟民，背景為黑色，間距為5px篷就，當(dāng)前選中項(xiàng)（current）為白色背景射亏，請(qǐng)完成CSS，不需要兼容低版本IE。
答：
CSS部分
.slide{background-color: #bed8ef;position: relative;width: 200px;height: 100px;
}
.pointer{position: absolute;bottom: 10px;right: 10px;}
i{width: 10px;height: 10px;border-radius: 50%;margin: auto 5px;background-color: black;display: inline-block; }
.current{background-color: white;}
html部分就是題目中的樣子
