<!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>
