开发者学堂课程【零基础学前端 HTML+CSS ：点评区域】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5157
点评区域
内容介绍：
一、点评区域讲解
二、演示
一、点评区域讲解
点评区域在页面当中也属于主区域里面的内容，即主区域里面包含上面的内容和点评的区域 <div id = “dianping”> 点评 </div> 位置自定义，放在里外皆可
二、演示
在 css.css 中写如下内容，如果放在里面，需要先看主区域里尺寸的设置，根据原主区域里尺寸可得不用设置宽和高，我们直接设置一个高，高其实在这里是固定的一个值，我们观察该图片高为440，所以设置高为 440px
#dianping {height: 440px;
background-image:url(“images/bg-foot.jpg”)
}
回到页面里刷新一下，我们看到如下，写在里面内容在图片上面
如果写在外面呢？
将 <div id = “dianping”>点评</div> 放在主区域外，如下
原因是因为放在里面，出现了两部分：点评和 house，因为 house做了一个浮动，所以两者其实已经不在一个图层上了，所以我们需要清除 bg 的浮动，怎么清除呢？
#dianping {
height: 440px;
background-image:url(“images/bg-foot.jpg”);
clear:both;
}
清除掉后，点评的位置就会固定显示在最下方。
固定完后，再来看点评区域里的内容，里面内容也是两块，很明显需要做一个浮动，用两个 div，左侧是一个 div，右侧是一个 div
在点评 <div id = “dianping”> 点评 </div>里如果不做浮动，用 span 这种形式连接两个 div，两个 span 横着排也可以
在 <div id = “dianping”> 下面可以再套一个 div 稍后来使用
<div id = “dianping”>
<div id = “user1”>
<div>
房客点评
</div>
<div>
<img src = “images/user1.png”>
</div>
</div>
</div>
在图片下方加上小象的名字
<div id = “dianping”>
<div id = “user1”>
<div>
房客点评
</div>
<div>
<img src = “images/user1.png”>
</div>
<div>
小象
</div>
</div>
</div>
添加对话框，在 <div>小象</div> 下添加
<div>这间房给我的第一感觉还是超出预期，房东是个帅气的小兄弟，预定的时候就聊得很愉快，这次太匆忙，下次来北京办事希望还有机会过来。
</div>
然后分别为各部分命名
<div class= “user-book”>这间房给我的第一感觉还是超出预期，房东是个帅气的小兄弟，预定的时候就聊得很愉快，这次太匆忙，下次来北京办事希望还有机会过来。</div>
在 css.css 中输入：
#dianping {
height: 440px;
background-image:url(“images/bg-foot.jpg”);
clear:both;
}
.user-book{
width: 370px;height: 150px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: left;
}
.font-30px{
font-size: 30px;
color: #ffffff;
}
.font-15px{
font-size: 15px;
color: #ffffff;
}
再在 index.html 中：
<div class= “font-30px”>
房客点评
</div>
<div class= “font-15px”>
小象
</div>
刷新显示如图
再来修改对话框在左侧的问题，因为外圈写有 id= “user1” 控制整体，所以我们要给 user1 加上宽度固定左边的宽
在 css.css 中继续输入
#user1{
width:400px;
text-align: center;
}
现在观察对话框内容还是不正，主要是因为当设定值的时候，外圈还没有做一个 margin: auto，
所以需要在外圈加上 margin: auto，对话框里内容与上方内容就会垂直到一起，且修改文字成为白色
.user-book{
width: 370px;height: 150px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: left;
margin: auto;
color: #ffffff;
}
制作第二个 div
<div id = “user2”>
<div class= “font-30px”>
房东点评
</div>
<div>
<img src = “images/user2.png”>
</div>
<div class= “font-15px”>
泡泡
</div>
<div>房客很 nice，把这里当成自己家一样的爱护，临走时房间收拾的很干净，就跟没住过一样，很好沟通也很热情的重庆兄弟，虽然只住了一天，但茫茫人海能够相见即是缘分，有机会还要来住我家哟</div>
</div>
现在让 user1 的 div 进行一个左浮动，user2 进行一个右浮动
在 css.css 中输入：
#user1{
width:400px;
loat: left;
}
#user2{
width:400px;
float: right;
}
如图
想要固定两边的位置，用 position 固定两边位置，并且调整距上面的距离
在 css.css 中输入：
#user1{
width:400px;
float: left;
position: relative;
left: 200px;
top:70px;
}
#user2{
width:400px;
float: right;
position: relative;
right: 200px;
top:70px;
}
这时两个位置差不多已经对齐
