移動換頁面佈局實戰專案

阿新 • • 發佈：2022-03-27

1. html 結構

<!DOCTYPE html>
<html lang="en">
<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 href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.min.css 
" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="flash">
    <img src="img/1.jpeg" alt="logo">
    <p>美食美客</p>
  </div>
  <div class="content">
    <header class="app-header">
      <div class="container 
">
        <img src="img/2.jpeg" class="logo">
        <p>美食美客</p>
        <input type="text" class="search" placeholder="搜尋...">
      </div>
    </header>
    <div class="subheader">
      <div>
        <p>配送資訊</p>
        <p>外賣小哥想你飛奔而來, 點選檢視具體資訊... 
           
<i class="fafa-chevron-right"></i>
        </p>
      </div>
      <img src="img/3.jpeg" alt="">
    </div>
    <div class="grid container">
      <div class="item">
        <h4>火鍋</h4>
        <p>沒有什麼是一頓火鍋解決不了的...</p>
        <img src="img/4.jpeg" alt="">
      </div>
      
      <div class="item">
        <h4>燒烤</h4>
        <p>再天願作比翼鳥, 在地就要吃燒烤</p>
        <img src="img/4.jpeg" alt="">
      </div>
    
      <div class="item">
        <h4>海鮮</h4>
        <p>甄選全球生鮮,盡享美食盛宴...</p>
        <img src="img/4.jpeg" alt="">
      </div>

      <div class="item">
        <h4>快餐</h4>
        <p>健康美味,無需等待...</p>
        <img src="img/4.jpeg" alt="">
      </div>

      <div class="item">
        <h4>下午茶</h4>
        <p>我有下午茶,你有時間嗎...</p>
        <img src="img/4.jpeg" alt="">
      </div>

      <div class="item">
        <h4>西餐</h4>
        <p>感受西餐文化,體驗異域風情...</p>
        <img src="img/4.jpeg" alt="">
      </div>
    </div>
  </div>
  <footer class="app-footer">
    <ul>
      <li><i class="fa fa-heart">收藏</i></li>
      <li><i class="fa fa-cart-arrow-down">訂單</i></li>
      <li><i class="fa fa-user">我的</i></li>
      <li><i class="fa fa-map-marker">附近</i></li>
    </ul>
  </footer>
  <script>
    setTimeout(function () {
      document.getElementById('flash').classList.add('fade')
    }, 2000)
  </script>
</body>
</html>

2. css 樣式

:root {
  --primary-color: #cc0000;
  --secondary-color: #7c0000;
}

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.container {
  width: 90%;
  margin: 0 auto;
  padding: 10px;
  overflow: none;
}

/* hrader */
.app-header {
  background-color: var(--primary-color);
  box-shadow: 3px 3px 10px #888;
}

.app-header .container {
  display: flex;
  /* 縱向排列 */
  flex-direction: column;
  /* 上下居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  padding: 15px 10px;
}

.app-header .logo {
  width: 40px;
}
.app-header p{
  color: #fff;
  font-size: 1.2rem;
  padding: 5px;
}
.app-header input {
  padding: 7px;
  width: 300px;
  border-radius: 3px;
}

/* subheader */
.subheader {
  background-color: var(--secondary-color);
  color: #fff;
  box-shadow: 3px 3px 10px #888;
  width: 90%;
  margin: 0 auto 16px auto;
  font-size: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subheader img {
  width: 40px;
}

.subheader p {
  margin: 4px;
}
/* grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.grid .item {
  display: flex;
  border: 1px #ccc solid;
  flex-direction: column;
  padding: 10px;
  box-shadow: 1px 1px 2px #ccc;
}
.grid .item h4 {
  margin-bottom: 5px;
}
.grid .item p {
  font-size: 14px;
  color: var(--secondary-color);
  font-weight: bold;
  margin-bottom: 20px;
}
.grid .item img {
  width: 30px;
  align-self: flex-end;
}
/* footer */
.app-footer {
  background: #f4f4f4;
  color: #444;
  padding: 10px;
  font-size: 14px;
  margin-top: 10px;
}
.app-footer ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
}
.app-footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-footer ul li i {
  font-size: 22px;
}

/* flash */
#flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--primary-color);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1s;
}

#flash p {
  color: #ffffff;
  font-size: 2rem;
}

#flash img {
  width: 150px;
}
.fade {
  opacity: 0;
}

/* media */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid .item img{
    width: 60px;
  }
}