网易微专业之《前端工程师》学习笔记（8）-CSS作业(2)

CSS的主观题~

（一）

（8分）已知HTML结构和效果图如下：

<div class="parent"> 
    <div class="side">侧栏</div>
    <div class="main">主栏</div>
</div>

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

答：

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">侧栏</div>
    <div class="main">主栏</div>
</div>

---

（二）

（10分）有一个新闻标题，效果如图，标题宽度为200px，文字字体为宋体，加粗，文字大小为16px，颜色为黑色，行高为25px，要求单行显示并且超出时显示”…“，请按要求完成CSS。效果图：

答：

CSS部分
h3{width: 200px;font:bold 16px/25px "宋体",arial,sans-serif;color:black;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}

html部分

 <h3 >标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字</h3>

---

（三）

已知结构如下：

<div class="slide">
 <!-- 图片省略 -->
 <!-- 以下是指示器 -->
 <div class="pointer"><i class="current"></i><i></i><i></i></div>
</div>

要求如效果图中标注，幻灯（slide）宽200px，高100px，指示器（pointer）在右下角，距离右边10px距离下边10px，指示器中的三个圆直径为10px，背景为黑色，间距为5px，当前选中项（current）为白色背景，请完成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部分就是题目中的样子