html 區

抬頭 => log + 選單 => 放在滿版的區塊中，所以 div 設定 header

logo 區 => img 做一張假圖(尺寸不要太大) + alt 告訴對方這是甚麼網站 + 超連結(回到首頁)
選單區 => 導覽列 : nav

滿版內容區 => banner 放滿版圖片

路徑列/麵包屑 bread code => 用 path 命名，ul/li + a

wish : 兩欄畫面、三欄畫面、頁尾

介紹區 => about ---> wrap 固定寬度 ---> 三欄畫面 item ---> 放入假圖與假文

製作產品區 => 產品圖 + 產品名稱 + 產品說明

製作服務區 =>

頁尾 footer區

css 區

header

flex 排版
padding 設定 (因為希望上下左右有距離)
背景顏色

header 底下整塊超連結效果設定

文字靠右對齊
寬度設為 100%
文字大小設 0 ，再到超連結內設定回來 (因為不希望超連結間有間隙)

header 底下 nav 的超連結

inline-block (因為希望設定 padding)
line-height (取代高度設定 = 圖高40 + 上下padding 12) => 目的讓文字置中
文字大小
文字不要有裝飾
文字顏色
摸到變色

因為使用 padding 上下 6px 導致圖片與旁邊 list 沒有對齊，給底下圖片的超連結一個 class，這樣就可以針對 header 裡面的 logo 區域做處理

logo

padding 設 6px (目的：與右邊對齊)

圖片區

縮放可能太大或太小 => .bammer img 設定滿版

麵包屑

用 flex 讓裡面每個東西做成橫排
裡面的 li 用padding 抓個上下左右距離
調整超連結文字色彩與底線
僞元素設定斜線，並希望它定在 li 的側邊

現在，要做 about 區的三欄畫面

about

padding --> 裡面的距離就會拉開來

about 內固定寬的容器 wrap

設定固定寬
置中
將 about.wrap 設定 display flex

about 內 wrap 內的 item

設定邊距
設定寬度
底下小圖置中

about 的大標題

加入 h2 內容寫"關於我們" --> 針對 h2 設定字的大小、置中、上下左右距離
做了 flex 再直接text-align 會沒有效果，但加上寬度 x% 就會置中了
加入 p2 做內文的設定

產品區

設定橫向排列
希望做右兩欄一樣，所以寬度設 50 % 這樣就會一半一半
希望圖片能填滿，針對 img 設 100 %
為了分別左右兩邊，我們可以針對共同的設定設一個 class 對不同的設定設另一個 class，將差異化的部分寫在個別的 class 上

footer區

用 padding 將內容撐開

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="reset.css">

  <style>
    .header {
      display: flex;
      padding: 6px 10px;
      background: black;
      opacity: .8;
    }
    .header nav a {
      display: inline-block;
      line-height: 52px;
      color: white;
      text-decoration: none;
    }

    .header nav a:hover{
      background: #bbb;
      border-radius: 4px;
    }


    .header nav {
      text-align: right;
      width: 100%;
      font-size: 16px;
    }
    .header .logo {
      padding: 6px;
      display: inline-block; 
    }
    .banner img {
      width: 100%;
    }
    .path {
      display: flex;
    }
    .path li{
      padding: 6px 10px;
      position: relative;
    }
    .path li a {     
      text-decoration: none;
      color: #aaa;
    }
    .path li + li::before{
      content:'/';
      color: #aaa;
      position: absolute;
      left: 0;
    }
    .wrap {
      width: 960px;
      margin: auto;
    }
    .about {
      padding: 40px 0 60px;
    }
    .about .wrap{
      display: flex;
    }
    .about .wrap .item {
      width: 300px;
      margin: 0 10px;
      text-align: center;
    }
    .about .item img {
      border-radius: 50%;
    }
    .about  > h2 {
      font-size: 36px;
      text-align: center;
      width: 960px;
      padding: 20px 0;
      margin: auto;
    }
    .about > p {
      width: 300px;
      margin: auto;
      padding: 0px 0px 40px;
      text-align: center;
    }
    .product {
      background: #ccc;
    }
    .product .wrap {
      display: flex;
    }
    .product .wrap .item {
      width: 50%;
    }
    .product img {
      width: 100%;
      vertical-align: bottom;
    }
    .product .pic {

    }
    .product .text {
      padding: 0 20px;
      text-align: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      justify-content: center;

    }
    .item h3 {
      font-size: 36px;
      padding: 0 0 30px;
    }
    .footer {
      text-align: center;
      background: black;
      color: #888;
      padding: 20px 0;
    }
    .service {
      padding: 40px 0;
      background: #ffa;
    }
    .service .wrap {
      display: flex;
    }
    .service > p {
      width: 960px;
      text-align: center;
      margin: auto;
      padding-bottom: 40px
    }
    .service > h2{
      width: 960px;
      margin: auto;
      text-align: center;
      font-size: 42px;
      padding: 20px 0; 
    }
    .service .item img {
      width: 100%;
    }
    .service .item {
      margin: 0 10px;
      width: 600px;
      text-align: center;
    }
  </style>
<head>
<body>
  <div class='header'>
    <a href="#" class='logo'><img src="https://picsum.photos/80/40?random=1" alt='網站名稱'></a>
    <nav>
      <a href="#">關於我們</a>
      <a href="#">最新消息</a>
      <a href="#">產品</a>
      <a href="#">服務</a>
      <a href="#">聯絡我們</a>
      <a href="#">網站地圖</a>
    </nav>
  </div>
  <div class='banner'>
    <img src="https://picsum.photos/1200/300?random=2">
  </div>
  <ul class='path'>
    <li><a href="#">首頁</a></li>
    <li><a href="#">最新消息</a></li>
    <li><a href="#">企業年報</a></li>
  </ul>

  <div class='about'>
      <h2>關於我們</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et </p>
    <div class='wrap'>
      <div class='item'>
        <img src="https://picsum.photos/50/50?random=3">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
        <img src="https://picsum.photos/50/50?random=4">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
        <img src="https://picsum.photos/50/50?random=5">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class='product'>
    <div class='wrap'>
      <div class='item pic'>
        <img src="https://picsum.photos/300/200?random=6">
      </div>
      <div class='item text'>
        <h3>產品說明</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class='service'>
    <h2>服務項目</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore</p>
    <div class='wrap'>
      <div class='item'>
         <img src="https://picsum.photos/300/200?random=7">
         <h3>title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
         <img src="https://picsum.photos/300/200?random=8">
         <h3>title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
         <img src="https://picsum.photos/300/200?random=9">
         <h3>title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
         <img src="https://picsum.photos/300/200?random=10">
         <h3>title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class='item'>
         <img src="https://picsum.photos/300/200?random=11">
         <h3>title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class='footer'>
    &copy:copyright 2021 by yihsuan
  </div>
</head>

<script type="text/javascript">

</script>
</body>
</html>

金魚系列、稀飯版

html 區

css 區

s103071049

Related Posts

Comments

html 區

css 區

s103071049

Related Posts

Web Storage1: HTTP, Session & Cookie

SOLID 設計原則筆記

js 實作 2FA 驗證

Comments