【ZHYP003】子涵優品開發日誌
------------恢復內容開始------------
# 編寫靜態頁面尚品彙這個專案的靜態頁面是老師已經寫好了，所以我現在自己思考一下怎麼寫這個靜態頁面。
清除預設樣式
在我們編寫靜態網頁開始，編寫靜態頁面時，我們應該首先把瀏覽器的預設樣式清除，我們可以在這裡下載reset.css，通過引入這個樣式檔案，把瀏覽器的預設樣式清除掉。
三明治佈局
遇到第一個問題總佈局設計，我們開啟尚品彙官網觀察一下，總佈局是由頁首，主體部分，頁尾組成的，那我們可以用header、main、footer這三個標籤去表示，說實話，這個三明治佈局，之前沒有遇到過，但是之前面試的時候，面試官問過我一個問題，如何實現三欄佈局
三明治佈局的原始碼
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子涵優品</title> <link type="text/css" rel="stylesheet" href="reset.css" /> <style> body { width: 100%; height: 100%; display: flex; flex-direction: column; } header { width: 1343px; height: 30px; background-color: red; } main { width: 1343px; height: 2486px; background-color: yellow; } footer { height: 362px; width: 1343px; background-color: blue; } </style> </head> <body> <header></header> <main></main> <footer></footer> </body> </html>
三明治佈局設計的思考過程
-
把整個頁面設定為彈性盒子，也就是
display: flex;，這個用起來比較方便，所以就只記得這個，但是這個方法就是W3C最新出的，所以瀏覽器相容是個問題，由於是個人網站，就先不考慮這麼多，先用了再說。 -
一般來說彈性盒子這個佈局預設的主軸方向是橫著來的，但是三明治佈局是豎著來的，所以我們在設定彈性盒子主軸的方向是豎著來的，也就是按照列來排，就要用到
flex-direction: column; -
關鍵的是，要把這三個區域顯示出來，應該設定一下容器的寬度和高度，因為我們清除了瀏覽器的預設樣式，所以就不用考慮這麼多，直接設定容器的寬度和高度分別是：
width: 100%;和height: 100%;，然後把三個區域的寬度和高度寫死，開發的時候UI設計師會把設計稿給我們，這裡我是用了軟體手動去量的。
三明治佈局的效果
header部分
大體的框架有了，我們先解決掉header部分的樣式，我們開啟尚品彙官網觀察一下，通過修改字型大小、背景顏色的一系列操作，可以得到這張圖的效果：
清除列表預設樣式
用列表去實現的話，li前面應該有黑色的小圓點的，但是去哪裡了呢？忘記我們之前清除瀏覽器的預設樣式引進的一個樣式表嗎？在這裡呢，開啟這個樣式檔案reset.css你會發現這樣一段程式碼，就是清除列表的預設樣式的，也就是清除小圓點：
ol, ul {
list-style: none;
}
滑鼠懸停文字顏色的改變
因為滑鼠懸停到文字上有顏色，所以我就加了以下程式碼：
a:hover {
color: rgb(130, 130, 255);
}
文字連結
因為li元素裡面是一個文字連結，所以我在li元素中再巢狀一個a元素。
列表行排列
為了讓這兩個列表橫著來，我們可以故技重施，又用到上面的彈性盒子的一些程式碼：
display: flex;
flex-direction: column;
flex-wrap: wrap;
li元素單獨行排列
經過上面的一系列操作，現在的頁面是這樣的：
這就有點奇怪了，加上上面的彈性盒子的程式碼，為什麼沒有全部橫著來呢？|這個符號還在文字的下方，明明我設定了flex-wrap: wrap;這條程式碼了啊！它為什麼還是會換行呢？會不會是因為li的高度問題，會不會是因為li的高度太小，相鄰的元素跟在它後面呢？根據這個疑問，我為li元素設定了高度和文字居中：
li {
height: 30px;
text-align: center;
}
加完上面這段程式碼之後，頁面的效果是這樣的：
好像和尚矽谷官網的差不多了。
外邊距
其實，我們這個頂部樣式和官網的，還差一點外邊距，我們嘗試加一下邊距給它：
#header-ul-left {
width: 241.5px;
height: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-left: 31px;
margin-right: 296px;
}
header部分原始碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子涵優品</title>
<link type="text/css" rel="stylesheet" href="reset.css" />
<style>
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
header {
width: 1343px;
height: 30px;
font-size: 12px;
background-color: #EAEAEA;
color: #666666;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#header-ul-left {
width: 241.5px;
height: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-left: 31px;
margin-right: 296px;
}
#header-ul-right {
width: 633px;
height: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
li {
height: 30px;
line-height: 30px;
text-align: center;
}
main {
width: 1343px;
height: 2486px;
background-color: yellow;
}
footer {
height: 362px;
width: 1343px;
background-color: blue;
}
a:hover {
color: rgb(130, 130, 255);
}
</style>
</head>
<body>
<header>
<ul id="header-ul-left">
<li>廣州 子涵優品歡迎您！</li>
<li>
<a>請登入</a>
</li>
<li>|</li>
<li>
<a>免費註冊</a>
</li>
</ul>
<ul id="header-ul-right">
<li>
<a>我的訂單</a>
</li>
<li>|</li>
<li>
<a>我的購物車</a>
</li>
<li>|</li>
<li>
<a>我的子涵優品</a>
</li>
<li>|</li>
<li>
<a>子涵優品會員</a>
</li>
<li>|</li>
<li>
<a>企業採購</a>
</li>
<li>|</li>
<li>
<a>關注子涵優品</a>
</li>
<li>|</li>
<li>
<a>合作招商</a>
</li>
<li>|</li>
<li>
<a>商家後臺</a>
</li>
</ul>
</header>
<main></main>
<footer></footer>
</body>
</html>