第七章作业

一.简答题：
1.清除浮动的方法有哪几种？分别如何实现？
答：（1）浮动元素后面加空div
（2）设置父元素的高度
（3）父级添加overflow属性
（4）父级添加伪类
2.使用display：inlink-block或float布局页面有什么区别？需要注意什么？
答：（1）display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格，IE 6、IE 7上不支持
（2）float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
3.制作摄影社区热门小镇页面（页面效果及页面中的图片、字体颜色等参见提供的作业素材），要求如下。

使用<div和无序列表相结合的方法布局HTML文档。
使用float属性创建横向多列排版网页元素。

摄影社区热门小镇

• 

  风景狙击手

  • 成员：80
  • 作品：276
• 

  叙事感

  • 成员：235
  • 作品：116
• 

  定焦视界

  • 成员：56
  • 作品：456
• 

  中画幅乐园

  • 成员：130
  • 作品：239
• 

  《卡啪》先锋...

  • 成员：78
  • 作品：125
• 

  植物的无声世界

  • 成员：235
  • 作品：1258

body,div,h3,ul,li{
margin: 0px;
padding: 0px;
}
div{
width:660px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
overflow:hidden;
margin: 50px auto;
}
h1{
font-size: 14px;
color: #999999;
line-height: 35px;
padding-left: 10px;
}
h2{
font-size: 14px;
color: #2e75bc;
line-height: 30px;
margin-top: 3px;
}
li{
list-style:none;
color: #999999;
line-height: 20px;
}
.one{
float: left;
width:216px;
height:99px;
overflow: hidden;
}
.one img{
margin:10px 15px 0 10px;
float:left;
padding:3px;
border:1px solid #ccc;
border-radius: 6px;
}