??页面制作-CSS作业详解 3.4

1
（8分）

已知HTML结构和效果图如下：

侧栏

主栏

要求如效果图中标注，且总体水平居中，两栏间距为10px，请写出这个两列布局的CSS，要求使用浮动布局方法，并需要清除浮动。

Q1. height:200px;line-height：200px; 为何能使文本【侧栏、主栏】垂直居中？

Q2. 清楚浮动 什么意思？

.clearfix:after{
    content:'.';
    display:table;
    clear:both;
    }
.clearfix{*zoom:1;}```

 


 
    
    

        
侧栏
        
主栏
    
    
```

>2
（10分）
有一个新闻标题，效果如图，标题宽度为200px，文字字体为宋体，加粗，文字大小为16px，颜色为黑色，行高为25px，要求单行显示并且超出时显示”…“，请按要求完成CSS。
效果图：![](http://upload-images.jianshu.io/upload_images/316258-363d25390cdaea9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字

>3
（13分）
一个幻灯片效果如图：
 ![](http://upload-images.jianshu.io/upload_images/316258-bc04e0e3a7886b1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
已知结构如下：

 
 
 


要求如效果图中标注，幻灯（slide）宽200px，高100px，指示器（pointer）在右下角，距离右边10px距离下边10px，指示器中的三个圆直径为10px，背景为黑色，间距为5px，当前选中项（current）为白色背景，请完成CSS，不需要兼容低版本IE。

```