【ZHYP004】子涵優品開發日誌
阿新 • • 發佈：2022-04-01
footer部分
footer這裡出現了一點問題，也給自己一個提醒，在遇到一些複雜的佈局時，先彆著急著寫結構，先分析一下它的佈局是什麼樣的，還需要畫一下它的結構圖，通過結構圖來寫HTML結構，同一層級的用同一個顏色的邊框，方便我們進行編碼：
footer部分HTML結構
逐步拆分
從上圖來看，這裡的佈局總體可以分為上下兩部分，如果使用flex佈局，那麼就可以先寫兩個塊元素，將這兩個塊元素填充顏色，將flex-direction設定為column，看會不會達到我們想要的效果：
頁尾總體佈局
HTML部分原始碼
<footer> <div id="footer-top"> 這是頁尾頂部 </div> <div id="footer-down"> 這是頁尾底部 </div> </footer>
CSS部分原始碼
footer { height: 362px; width: 1343px; display: flex; flex-direction: column; flex-wrap: wrap; font-size: 30px; color: red; } #footer-top { width: 1343px; height: 225px; background-color: rgb(103, 103, 250); } #footer-down { width: 1343px; height: 137px; background-color: rgb(121, 255, 121); }
頁尾總佈局效果
其實還想詳細的拆分呢，但是好像大致是相同的如果水平和垂直都居中，就使用以下程式碼
display: flex;
justify-content: center;
align-items: center;
頁尾部分原始碼
頁尾HTML原始碼
<footer> <div id="footer-top-out"> <div id="footer-top-in"> <div> <h4>購物指南</h4> <ul> <li class="footer-li">購物流程</li> <li class="footer-li">會員介紹</li> <li class="footer-li">生活旅行/團購</li> <li class="footer-li">常見問題</li> <li class="footer-li">購物指南</li> </ul> </div> <div> <h4>配送方式</h4> <ul> <li class="footer-li">上門自提</li> <li class="footer-li">211限時達</li> <li class="footer-li">配送服務查詢</li> <li class="footer-li">配送費收取標準</li> <li class="footer-li">海外配送</li> </ul> </div> <div> <h4>支付方式</h4> <ul> <li class="footer-li">貨到付款</li> <li class="footer-li">線上支付</li> <li class="footer-li">分期付款</li> <li class="footer-li">郵局匯款</li> <li class="footer-li">公司轉賬</li> </ul> </div> <div> <h4>售後服務</h4> <ul> <li class="footer-li">售後政策</li> <li class="footer-li">價格保護</li> <li class="footer-li">退款說明</li> <li class="footer-li">返修/退換貨</li> <li class="footer-li">取消訂單</li> </ul> </div> <div> <h4>特色服務</h4> <ul> <li class="footer-li">奪寶島</li> <li class="footer-li">DIY裝機</li> <li class="footer-li">延保服務</li> <li class="footer-li">子涵優品Z卡</li> <li class="footer-li">子涵優品通訊</li> </ul> </div> <div> <h4>幫助中心</h4> <img id="wechat" src="./wechat.jpg"> </div> </div> </div> <div id="footer-down"> <div id="fd-top"> <div id="footer-link"> <ul> <li class="footer-li">關於我們</li> <li class="footer-li">|</li> <li class="footer-li"> 聯絡我們 </li> <li class="footer-li">|</li> <li class="footer-li"> 聯絡客服 </li> <li class="footer-li">|</li> <li class="footer-li"> 商家入駐 </li> <li class="footer-li">|</li> <li class="footer-li"> 營銷中心 </li> <li class="footer-li">|</li> <li class="footer-li"> 友情連結 </li> <li class="footer-li">|</li> <li class="footer-li"> 銷售聯盟 </li> <li class="footer-li">|</li> <li class="footer-li"> 子涵社群 </li> <li class="footer-li">|</li> <li class="footer-li"> 風險監測 </li> <li class="footer-li">|</li> <li class="footer-li"> 隱私政策 </li> </ul> </div> <div id="footer-address"> 地址：廣州市白雲區同泰路麒麟山莊對面磨刀坑停車場 </div> </div> <div id="footer-registration"> 粵ICP備2021148361號 </div> </div> </footer>
頁尾CSS原始碼
footer {
height: 362px;
width: 1343px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #EAEAEA;
}
h4 {
line-height: 30px;
}
.footer-li {
font-size: 12px;
text-align: left;
line-height: 18px;
}
#footer-top-out {
width: 1343px;
height: 225px;
display: flex;
justify-content: center;
align-items: center;
}
#footer-top-in {
width: 1170px;
height: 184px;
display: flex;
justify-content: space-around;
}
#footer-top-in>div {
width: 180px;
}
#wechat {
width: 123px;
height: 146px;
}
#footer-down {
width: 1343px;
height: 137px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#fd-top {
width: 1170px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#footer-link {
width: 900px;
height: 45px;
}
#footer-link > ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#footer-link > ul > li {
padding: 5px;
justify-content: space-between;
}
#footer-address {
width: 750px;
height: 35px;
font-size: 12px;
text-align: center;
padding-bottom: 20px;
}
#footer-registration {
width: 1170px;
height: 57px;
font-size: 12px;
text-align: center;
padding-top: 10px;
}
a:hover {
color: rgb(130, 130, 255);
}
#wechat:hover {
opacity: 0.9;
}
頁尾佈局效果
總結
-
記得頁面的樣式的時候分析一下結構
-
如果我們只是設定為彈性盒子，也就是
display: flex;，那麼其實主軸的方向是預設為水平方向；但是如果我們在某個容器中設定主軸的方向是垂直，那麼這個只是對該容器起作用。
flex-direction的使用
實驗原始碼
<!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>
<style>
#box1 > ul {
display: flex;
flex-direction: column;
}
#box1 > ul > li {
width: 50px;
height: 50px;
list-style: none;
background-color: red;
margin: 5px;
}
#box2 > ul {
display: flex;
}
#box2 > ul > li {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
background-color: blue;
}
#box3 > ul {
display: flex;
}
#box3 > ul > li {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
background-color: green;
}
</style>
</head>
<body>
<div id="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="box2">
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="box3">
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>
實驗效果圖
[flex-direction的實驗效果](