flex佈局練習，仿手機淘寶首頁
阿新 • • 發佈：2019-02-18
看了大神的flex教程，決定寫個假手淘開心一下！我肯定三下五除二就能寫完的！對！沒錯！~~~
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
結果半夜都還沒睡。。。。。
都是下面這條連結害的（微笑.jpg）：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
好吧進入正題。在練習的過程中遇到了很多小問題，所以今天來整理一下。
我們的目標是（當然不是沒有蛀牙。。。）：
看著淘寶的首頁，除了買買買的慾望很強烈之外，作為一個前端新手，當然還想把它寫出來
開啟我的webstorm，新建一個專案，為了方便起見，用Gulp來幫我。下面就一塊一塊來吧（樣式的程式碼是scss格式）。
- 既然是為了練習佈局，就原模原樣的切，先來寫手機頂端
<div class="phoneHead">
<div>
<img src="img/1.jpg">
</div>
<div>
<img src="img/4.jpg">
<img src="img/3.jpg">
<img src="img/2.jpg">
</div> .phoneHead {
background-color: #ae3903;
display: flex;
div {
display: flex;
flex: 1;
img {
margin-left: 10px;
}
}
div:nth-child(1) {
flex-direction: row; //左邊的內容左對齊
}
div:nth-child(2) {
flex-direction 手淘頂部
這個部分需要注意一下：搜尋框兩邊的兩根小豎線是用兩個div實現的
<header>
<div class="scan">
<img src="img/5.jpg">
<p>掃一掃</p>
</div>
<div class="search">
<div></div>
<img src="img/21.jpg">
<input type="text" value="檯燈臥室床頭 創意">
<img src="img/22.jpg">
<div></div>
</div>
<div class="message">
<img src="img/8.jpg">
<img src="img/9.jpg">
<p>訊息</p>
</div>
</header>header {
display: flex;
background-color: #ff5105;
padding-bottom: 15px;
.scan, .message {
flex: 1;
padding: 10px 0 0 0;
img {
width: 55px;
height: 55px; //合理調整圖片大小
display: block; //未用div包裹時讓其另佔一行
margin: auto;
}
p {
font-size: 20px;
text-align: center;
color: #ffffff;
}
}
.message{
position: relative;
img:nth-child(2){
width: 35px;
height:35px;
position: absolute;
top: 10px;
right: 30px;
}
}
.search {
display: flex;
flex: 3.3;
padding: 30px 0 0 0;
margin-bottom: 10px;
border-bottom: 2px solid #ffffff;
//因為整個搜尋框的五個部分的比例不一樣，所以flex屬性值等於其設計寬度的px值大小，這樣設定比例更方便準確
div:nth-child(1) {
flex: 10;
height: 10px;
border-left: 2px solid #ffffff;
margin-top: 40px;
}
div:nth-child(5) {
flex: 10;
height: 10px;
margin-top: 40px;
border-right: 2px solid #ffffff;
}
img:nth-child(2) {
flex: 35;
height: 35px;
}
img:nth-child(4) {
flex: 35;
height: 35px;
}
input {
flex: 344;
height: 35px;
outline: none; //去掉預設屬性
border: none;
color: #fff7f8;
background-color: #ff5105;
font-size: 32px;
line-height: 35px;
}
}
}輪播圖只是一個圖片，在這裡就不多說了。
這是經典的flex佈局：
<ul class="entrance">
<li>
<a href="#">
<img src="img/11.jpg">
<p>天貓</p>
</a>
</li>
<li>
<a href="#">
<img src="img/12.jpg">
<p>聚划算</p>
</a>
</li>
<li>
<a href="#">
<img src="img/13.jpg">
<p>天貓國際</p>
</a>
</li>
<li>
<a href="#">
<img src="img/14.jpg">
<p>外賣</p>
</a>
</li>
<li>
<a href="#">
<img src="img/15.jpg">
<p>天貓超市</p>
</a>
</li>
</ul>.entrance{
padding: 0.06rem 0;
width: 100%;
display: flex;
li{
display: flex;
justify-content:center; //使每一組圖示和文字居中顯示，給父元素設定的屬性
flex: 1;
img{
display: block;
}
p{
font-size: 0.24rem;
color:#909090;
text-align: center;
line-height: 0.35rem;
}
}
}訊息輪播部分
<div class="news">
<img src="img/23.jpg">
<div class="list">
<p>
<span>熱評</span>
<span>現實中的長髮公主，十幾年未剪頭髮</span>
</p>
<p>
<span>熱議</span>
<span>30天不喝白開水，臉會變成什麼樣？</span>
</p>
</div>
</div>.news{
padding: 0.2rem 0;
display: flex;
img{
flex: 1;
padding: 0 0.33rem;
}
.list{
flex: 5;
border-left: 1px solid #dfdfdf; //實現間隔豎線
p {
display: flex; //不要這個屬性的話，p標籤的內容會被擠出去
align-items: center; //使兩個span在交叉軸上居中對齊
height:0.4rem; //結合上一條屬性，相當於兩個span的line-height=0.4rem
}
span:nth-child(1){
font-size: 0.2rem;
margin: 0 0.2rem;
text-align: center;
border: 1px solid #d90c00;
color: #d90c00;
}
span:nth-child(2){
font-size: 0.27rem;
}
}
}又是一個經典的flex佈局：
<div class="area1">
<div class="area1-1">
<div>
<p>
<img src="img/24.jpg">
<span>淘搶購</span>
</p>
<p>進入檢視更多</p>
<div><img src="img/28.jpg"></div>
</div>
<div><img src="img/32.jpg"></div>
</div>
<div class="area1-2">
<div>
<p>
<img src="img/25.jpg">
<span>有好貨</span>
</p>
<p>高顏值美物</p>
<div><img src="img/29.jpg"></div>
</div>
<div><img src="img/33.jpg"></div>
</div>
</div>
<div class="area1">
<div class="area1-3">
<div>
<p>
<img src="img/26.jpg">
<span>淘搶購</span>
</p>
<p>進入檢視更多</p>
<div><img src="img/30.jpg"></div>
</div>
<div><img src="img/34.jpg"></div>
</div>
<div class="area1-4">
<div>
<p>
<img src="img/27.jpg">
<span>有好貨</span>
</p>
<p>高顏值美物</p>
<div><img src="img/31.jpg"></div>
</div>
<div><img src="img/35.jpg"></div>
</div>
</div>.area1{
display: flex;
//分別給四個小塊加不同的樣式
.area1-1{
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #d90c00;
}
}
}
}
.area1-2{
border-bottom: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #00cbff;
}
}
}
}
.area1-3{
div:nth-child(1){
P:nth-child(1) {
span {
color: #db4761;
}
}
}
}
.area1-4{
border-left: 1px solid #e4e4e4;
div:nth-child(1){
P:nth-child(1) {
span {
color: #d53e61;
}
}
}
}
//給四個塊加相同的樣式
.area1-1,.area1-2,.area1-3,.area1-4{
flex: 1;
display: flex;
padding: 0.15rem 0.3rem;
div:nth-child(1){
flex: 1;
P:nth-child(1) {
display: flex;
span {
font-size: 0.3rem;
padding-left: 0.1rem;
}
}
p:nth-child(2) {
font-size: 0.24rem;
line-height: 0.34rem;
color: #757575;
}
div{
padding: 0.2rem 0.3rem 0 0.3rem;
}
}
div:nth-child(2){
flex: 1;
padding-top: 0.2rem;
}
}
}- 額。。。又是一個經典的flex佈局：
因為內容和上一個差不多，所以我就用圖片代替了，哈哈，很機（tou）智（lan）吧~~~
<div class="area2">
<div class="title1">
<img src="img/36.jpg">
<span>超實惠</span>
</div>
<div class="area2-1">
<img src="img/37.jpg">
<img src="img/38.jpg">
<img src="img/38.jpg">
<img src="img/40.jpg">
</div>
<div class="area2-1">
<img src="img/41.jpg">
<img src="img/42.jpg">
<img src="img/43.jpg">
<img src="img/44.jpg">
</div>
</div>.area2{
.title1{
display: flex;
justify-content: center;
padding: 0.25rem;
span{
line-height: 0.4rem;
text-align: center;
font-size: 0.3rem;
color: #d90c00;
}
}
.area2-1{
display: flex;
border-top: 1px solid #909090;
img{
display: block;
padding: 0.15rem 0.1rem;
border-left: 1px solid #909090;
}
img:nth-child(1){
flex: 1.8;
border: none;
}
img:nth-child(2),img:nth-child(3),img:nth-child(4){
flex: 1;
}
}
}終於只剩下底部了！
<footer>
<div>
<a>
<img src="img/45.jpg">
<p>首頁</p>
</a>
</div>
<div>
<a>
<img src="img/46.jpg">
<p>微淘</p>
</a>
</div>
<div>
<a>
<img src="img/47.jpg">
<p>問大家</p>
</a>
</div>
<div>
<a>
<img src="img/48.jpg">
<p>購物車</p>
</a>
</div>
<div>
<a>
<img src="img/49.jpg">
<p>我的淘寶</p>
</a>
</div>
</footer>footer{
width: 100%;
padding: 20px 0;
background-color: #ffffff;
border-top: 1px solid #909090;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
div{
flex: 1;
display: flex;
justify-content: center;
img{
display: block;
margin: auto;
}
p{
font-size: 28px;
color: #3a3e3d;
line-height: 45px;
text-align: center;
}
}
}好了，熬夜真是越熬越精神！看效果：
講真是不是一模一樣！自己寫的假手淘還不錯，哈哈
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。。
然後還是洗洗睡吧
大家晚安