練習做一個網購商品列表首頁

發表於 更新於 分類於 Disqus：

本來練習的課程只做了一個商品主題式列表，但因為看到很多人都做了有表頭表尾的網購首頁出來，想說不能輸，就越做越多了 XD

以下整理幾個用到的東西

主題式列表

其實就是 ul li 的結構而已

在商品列表左上方放折扣訊息

這可以用 position: absolute 做到
首先放了一個紅色三角形上去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bg {
  position: absolute;
/*   top: 0;
  left: 0; */
  width: 0;
  height: 0;
  border-top: 70px solid red;
  border-right: 70px solid transparent;
}

/* 別人的寫法 */
.thick-border{
  height: 0;
  width: 0;
  border-width: 0 0 60px 60px;
  border-color: transparent rgba(255, 0, 0, 0.9);
  border-style: solid;
  position: absolute;
}

之後再把文字擺上去，順便用了 transform: rotate(-45deg); 讓文字旋轉

1
2
3
4
5
6
7
8
9
10
.productList li .sale {
  position: absolute;
  top: 15px;
  left: 9px;
/*   background-color: red; */
  color: #fff;
/*   padding: 8px; */
  transform: rotate(-45deg);
/*   text-align: center; */
}

回到最上頁

先用了 position: fixed 讓按鈕固定在右下角
再配合平滑滾動，讓畫面看起來比較和緩

1
2
3
4
html {
  scroll-behavior: smooth;
  background-color: #eee;
}

按鈕也有用 border-radius: 5px; 來產生圓角

其他

好像沒什麼了。剩下大概就

  • 大量使用 hover 製造互動效果
  • 使用 display: flow-root 閉合浮動

之後也要花時間學習怎麼配色，不然我一直都用粉紅色和淡藍色 XD

附上試作的網頁

See the Pen 利用絕對定位設計左上角圖案 by Chiu (@ayugioh2003) on CodePen.