1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
.demo {
margin: 0 0 0 100px
}
.img {
width: 200px
height: 200px
border: 1px solid #DCDCDC
padding: 5px
box-sizing: border-box
}
.img img {
width: 100%
height: 100%
}
.msg {
width: 200px
text-align: center
box-sizing: border-box
word-break: keep-all
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
position: relative
border: 1px solid #000000
/*left: -30px你是不是布局出现了问题,如果你非要左移的话,去掉注释*/
}
</style>
<body>
<div class="demo">
<div class="img">
<img src="http://pic1.win4000.com/wallpaper/6/578855acae491.jpg" />
</div>
<div class="msg">
自驾游(多余的文字)<br> 会员价：
<strong style="color: red">9999元</strong>
</div>
</div>
</body>
</html>
有两种方法：a 是行内标签，不能设置高宽和外边距margin，但能使用内边距padding如果你不固定大小 ，应用padding
需要用固定大小，把它变成行内块标签display: inline-block,这样后就可以设置高宽了，
移动10px也有两种：
这10px算a标签内，就用padding-left:10px
这10px不算在a标签内，就用margin-left: 10px注意：需设置成行内块元素才可以设置外边距，否则无效；
自己试试吧！！！
