我愛JS · 02月22日

RE: 請教切板問題－－切版觀念教學！實例code review！

前提

很棒的問題，很榮幸我也有辦法可以回答。
你好，稍微看了一下你的code，有些東西想要跟你討論、分享。

解答

修改完的效果

觀念方面

首先必須要稱讚你的野心，想要clone整個網頁，這是非常值得嘉獎的想法！
是我也會這樣練習，這種想法非常棒！
我覺得你這種學習態度非常好哦～～～

針對code的問題，
我覺得你寫得有點亂，具體在於class與ID的名稱取名，我不知道你是否是直接copy人家的過來。
如果是這樣子，我覺得你可以試著自己重構，
如果不是的話，也建議你可以分區，使用註解來把哪一個區域是什麼標註起來，

這對新手來說是個很好的習慣。

再來是你的分區我覺得滿亂的，加上似乎又有重複的div閉合標籤（？
不知道是你用copy的還是哪裡有問題，這部分要注意！！
做切版要先確定怎麼分割，你比較像是邊做邊分割，切的不是太好，導致排不太出來。
但這不是你的問題，這邊跟你分享他怎麼切，其實他這種板很簡單。

邏輯方面

主要就是三個東西，wrap、container：main、side。

wrap的話就是設定寬度width以及margin:0 auto，製造一個居中效果。
container裡面有main與side就是你想要排的左跟右邊區。
只要container寫成dispaly:flex 與 justify-content: space around就可以了，
裡面的main寫flex: 0.66、然後side是flex:0.33
這樣會有平均分配的效果。

至於細節寬度就使用padding跟margin去調整。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello world!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="style2.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>

  <body>
    <div class="wrap">

    <div id="logo">
      <a href="https://www.storm.mg/">
        <img id="homepage" src="https://www.storm.mg/images/logo.svg" />
      </a>
    </div>
    <div id="nav_menu">
      <nav>
        <a class="nav_btn" href="https://new7.storm.mg/"
          ><img id="img1" src="https://www.storm.mg/images/logo_new7.svg"
        /></a>
        <a class="nav_btn" href="https://onepercent.storm.mg/"
          ><img id="img2" src="https://www.storm.mg/images/1percentstyle.svg"
        /></a>
        <a class="nav_btn" href="https://www.storm.mg/premium"
          ><img id="img3" src="https://www.storm.mg/images/vip_logo.png"
        /></a>
        <a class="nav_btn" href="#">新聞</a>
        <a class="nav_btn" href="#">評論</a>
        <a class="nav_btn" href="#">財經</a>
        <a class="nav_btn" href="#">生活</a>
        <a class="nav_btn" href="#">下班經濟學</a>
      </nav>
    </div>

      <div id="tag_title">
        <a class="tag_link" href="https://www.storm.mg/category/118">政治</a>
        <a class="tag_link" href="https://www.storm.mg/category/22168"
          >公共政策</a
        >
      </div>

        <h1>北捷研擬早晚鳥4折票救內湖交通　高嘉瑜列3原因打臉：根本劃錯</h1>
        <div id="article_info">
          <div id="article_info_name">
            <a
              id="name"
              href="https://www.storm.mg/authors/313137/%E9%99%B3%E5%AC%BF%E5%A9%B7"
              >陳嬿婷</a
            >
          </div>

          <div id="article_info_time">
            <span id="article_time">2023-02-13 16:16</span>
          </div>
        </div>

    </div>
        <div class="container2 wrap">

            <div class="main">
          <img
            src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2023/01/18/20230118-104054_U18448_M824647_96f1.jpeg?itok=xwGSqPL9"
          />

          <p id="imgintro">
            民進黨立委高嘉瑜（見圖）認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。（資料照，柯承惠攝）
          </p>

            <p class="content_text">
              台北市內湖區近年發展快速，交通壅塞的問題成為各界關注的焦點，為解決內科交通問題，北市副市長李四川與相關單位討論，初步研擬推出北捷早晚鳥票，提供悠遊卡4折優惠，吸引通勤族捨棄汽機車，改搭捷運通勤，並鼓勵民眾在離峰時間上、下班。對此，民進黨立委高嘉瑜認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。
            </p>
            <a id="link1" href="https://www.storm.mg/line/notify/login"
              >[啟動LINE推播] 每日重大新聞通知</a
            >
            <p class="content_text">
              高嘉瑜於<a
                id="fb"
                href="https://www.facebook.com/ntufishfans/posts/pfbid02AhK796XpShFigJjCsMe8vgDsGn8nCrzwXYs8aQdWPcbp86u92sXPJqZUXnnVadoZl"
                >臉書</a
              >發文，指出內科塞車問題，主要肇因於在上下班時間同時湧入高達15萬人次的跨區、跨縣市通勤者，而內科地區員工上班時間又有高達82%都集中在上午9時。雖然北市交通局預計推出早晚鳥票，並搭配企業彈性上下班，意圖使內科員工上班能錯開通勤尖峰時段，但事實上，前台北市長柯文哲早在2016年就曾提出為期3個月的「綠色運輸試辦計畫」，其內容就包括捷運早鳥優惠，結果仍是失敗收場。
            </p>
            <p class="content_text">
              高嘉瑜也提到，彈性分流上下班很好，但優惠票誘因不足，她認為，企業端該如何溝通鼓勵彈性上下班？市府端又該如何推動共乘、減少一人一車？才是短期能立竿見影的方法，而長期而言，內科交通最終仍得靠完善捷運路網來拯救，如何解決現有文湖線運量不足且妥善率差及路線轉乘次數高等問題，才是當務之急。
            </p>
            <p class="content_text">
              高嘉瑜也批評，目前民生線遙遙無期，汐東段亦未延伸至舊宗，北市府仍一拖再拖。她表示，行政院在今年1月已核定捷運汐東線，她也多次質詢跟強調，台北端的民生線應接續推動，至少此次汐東線也應先同步延伸至內湖舊宗路的「SB07站」，進而在未來與東環段接軌，串聯內湖、南港、社后、樟樹灣、保長坑及北五堵新市鎮等產業區。
            </p>
            <p class="content_text">
              高嘉瑜說，但遺憾的是，經她近日再度詢問北市府關於「捷運汐東線之規劃，評估可否延伸」，得到的答覆卻是，「因民生線與汐東捷運、基隆捷運所採用之系統不同，須待汐東捷運具體規劃方案核定後，才會開始評估。」至今仍未能有明確定案。
            </p>
            <p class="content_text">
              高嘉瑜強調，台北市長蔣萬安選前承諾東環段2年內動工，務必說到做到。她指出，環狀線東環段可串聯捷運紅線（象山）、藍線（永春）、綠線（松山），為東台北縱向捷運路網的重要建設，並有望根治長年未解的內湖交通問題，蔣萬安也曾在選前承諾2年內動工。她表示，自己會持續關注東環段進度，希望台北市政府可以更積極推動，中央加速進度儘快核定，別讓民眾一等再等。（相關報導：<a
                id="link2"
                href="https://www.storm.mg/article/4724935"
                >幕後》和柯文哲不一樣　高虹安的「軍機處」走自己的路</a
              >｜更多文章）
            </p>
          </div>

    <div id="sidebar">
        <div id="video_area">
          <p class="sidebar_video">現正熱映中</p>
          <iframe id="smg_live_video" class="smg_live_video embed-responsive-item" src="https://www.youtube.com/embed/eJ4RErMLLh4?autoplay=&mute=1&version=3&loop=1" height="200" frameborder="0" allowfullscreen=""></iframe>
        </div>

        <div id="recommend">
          <p class="sidebar_news sidebar_video">熱門新聞</p>

        </div>

    </div>
  </body>
</html>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #logo {
    margin: 0 auto;
    text-align: center;
  }

  #homepage {
    width: 169px;
    height: auto;
  }

  #img1 {
    width: 79px;
    height: 25px;
    margin: -8px 0 -5px;
  }

  #img2 {
    width: 79px;
    height: 25px;
    margin: -8px 0 -5px;
  }

  #img3 {
    width: 79px;
    height: 25px;
    margin: -8px 0 -5px;
  }

  #nav_menu {
    width: 100%;
    height: auto;
    border-top: 1px solid black;
    border-bottom: 1px solid #cccccc;
    text-align: left;
  }

  .nav_btn {
    display: inline-block;
    padding: 13px 15px 14px;
    letter-spacing: 3px;
    font-size: 16px;
    text-decoration: none;
    color: black;
  }

  #tag_title {
    border-left-width: 10px;
    border-left-style: solid;
    border-left-color: rgb(255, 56, 56);
    margin: 10px;
  }
  .tag_link {
    padding: 10px;
    color: black;
    text-decoration: bold;
  }

  #container {
    background: #f5f5f5;
  }
  #intro {
    margin: 10px;
    color: grey;
    font-size: 10px;
  }

  h1 {
    font-size: 32px;
    color: black;
  }
  #content {
    background: lightyellow;
    width: 800px;
    padding: 5px 30px 20px;
  }
  .content_text {
    padding: 15px 0px;
  }

  #artice_info,
  #article_info_name,
  #article_info_time {
    display: inline-block;
    margin: 10px;
  }

  #name {
    color: red;
    font-size: 16px;
    padding: 5px;
  }

  #article_time {
    color: black;
    font-size: 16px;
    padding: 5px;
  }

  #sidebar {
    flex:0.33;
    width: 300px;
    margin-left: 20px;
    padding: 0px 30px;
  }

  .main{
    flex: 0.66;
  }
  #video_area, #recommend {
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: rgb(0, 0, 0);
  }

  .sidebar_news{
    border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: grey;
    padding: 10px 10px 10px 0px;
  }
  #img_area {
    min-height: 420px;
    position: relative;
  }

  #link1 {
    color: grey;
    padding: 0px 25px;
  }

  #link2 {
    color: grey;
  }

  #fb {
    color: red;
  }

  .container2{
    display: flex;
    justify-content: space-around;
  }

  .wrap {
    width: 1250px;
    margin: 0 auto;
    padding: 0px 39px;
}

.sidebar_video{
    margin-top: 10px;
    font-size: 20px;
    letter-spacing: 5px;
    color: #ff3838;
    margin-bottom: 10px;
}

.smg_live_video{
    margin-bottom: 10px;
}

後記

以上，很不錯的練習，整體而言做得很好！
希望未來可以一起繼續進步哦～～
另外也還是要感謝站長創立這個網站，我從加入的第一天到現在都還是很喜歡哦。
現在站長也有線上諮詢的服務，歡迎各位有需求，投資自己，跟高手學習！

時間就是金錢，掌握關鍵的學習方法其實比胡搞瞎搞重要！
shout out to my man 阿川。

4個讚 5留言 635瀏覽

按讚的人：

共有 5 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

Elmon 1年前

很感謝你幫我看了這個 code
誠如你所說：第一次練習做切版也覺得可能因為我邊做邊切導致分區很混亂
我都忘了有那個註解功能可以用了哈哈哈

你的說明很簡單易懂～
wrap的話就是設定寬度 width 以及 margin:0 auto，製造一個居中效果。
container裡面有 main與 side就是你想要排的左跟右邊區。
只要container寫成 display:flex 與 justify-content: space around 就可以了，
裡面的main寫flex: 0.66、然後side是flex:0.33

我好奇這部分如果是要用關鍵字來找尋資料的話，會怎麼做？
謝謝

1個讚回覆

按讚的人：

我愛JS 1年前

很好的問題耶！
我自己也是因為我大量練習切版，練出來的。
所以是實戰遇到的經驗哦XDDD

關鍵字的話，其實去鑽研CSS flex grid這種內容，一定能學到這種排版。

除了關鍵字，我自己的經驗是多練多觀察～
多多找切版來練就會學到了！這件事情你已經正在執行了，時間問題而已唷～～
在討論區交流就像你在這邊發問也是很好的資源，不見得要用關鍵字找，真的卡住，像這樣發文也很ＯＫ！

一起加油：））

2個讚回覆

按讚的人：

Elmon 1年前

感謝你的幫忙！我再練習一次試試看

1個讚回覆

按讚的人：

回覆 Elmon......

站長阿川 1年前

很好的討論串！

網頁排版的話，做法有很多種

關鍵字是 多欄式排版 css css flexbox css grid

2個讚回覆

按讚的人：

Elmon 1年前

謝謝站長！

1個讚回覆

按讚的人：

回覆站長阿川......

留言......

我愛JS

此人尚未填寫簡介。