<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg_header {
height: 45px;
background-color: #bbbbbb;
line-height: 45px;
}
</style> <!-- height: 45px;设置行高--><!-- 设置背景色-->
<!-- line-height: 45px;设置让下面div中的内容在本div中上下居中-->
</head>
<body style="margin: 0 auto"> <!--设置margin：0 auto 可将顶部灰色部分两头顶到左右两边，
否则body有个固有属性左右各自8px的空白部分，这是body的属性-->
<div class="pg_header">
<div style="width: 1500px;margin: 0 auto"> <!--首先设置这个div的整体宽度为1500px，它就不会占据一整行，-->
<!--让后将它用margin居中就可以显示成两头有缝隙，收藏在左，登陆在右的效果了-->
<div style="float: left"> <!-- 设置漂浮，靠左漂浮-->
<a>收藏本页</a>
</div>
<div style="float: right">
<a>登陆</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div>
<div style="width: 1500px;margin: 0 auto;text-align: center"> <!-- 设置跟上面对齐,text-align: center设置居中-->
<div style="float: left"><img src="gr.png"></div> <!-- 插入一张图片-->
<div style="width: 80px;height: 40px; background-color: darkgray;float: right;border: 1px solid black">
<div style="line-height: 40px;text-align: center">购物车</div> <!-- 设置购物车这这两个字体居中-->
</div>
<div style="width: 80px;height: 40px; background-color: darkgray;float: left;border: 1px solid black">搜索</div>
<div>
<input type="text" style="width: 280px;height: 40px">
</div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div style="background-color: red"> <!-- 设置跟上面对齐-->
<div style="background-color: crimson">
<div style='display: inline'>
<font size="8" color="#f0f8ff">全部商品</font>
</div>
<span style="background-color: red;float: right;">
<font size="8" color="#f0f8ff">首页</font>
</span>
</div>
</div>
</div>
<div style="width: 300px;border: 1px solid red;"> <!-- border: 1px solid red ：border是设置边框
1px是设置边框粗细为1像素，
solid red是设置边框颜色为红色-->
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div><!-- 设置为靠左排开，-->
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div><!-- 排不开后自动换行 -->
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="width: 98px;height: 30px;border: 1px solid lawngreen;float: left"></div>
<div style="clear: both;"></div> <!-- 切记：这种嵌套会造成外边边框管不住里面的边框，从而看不到外边的边框，-->
<!-- 因此加上这句话就可以让外面边框显示出来：<div style="clear: both;"></div> -->
</div>
</body>
</html>
