---
disqus: aboofrontnote
---
# Yahoo!運動網頁切版練習

<h6>此練習是基於五倍紅寶石微痛轉職全端工程師的CSS課堂練習題，所做的學習筆記。</h6>

在學習前端技術的過程當中，切版練習是個非常基礎的能力，除了能展現HTML以及CSS的掌握能力之外，也能從學習別人的排版，來增進對網頁結構上的認知。

<h2>此次練習培養的能力:</h2>
<div style ="
background-color: khaki;
border-radius: 20px;
padding: 10px;
">

<ul>
<li>HTML</li>
<ul>
<li>標題大小標籤</li>
<li>UL OL LI標籤 </li>
<li>結構標籤</li>
</ul>
<li>CSS</li>
<ul>
<li>float排版</li>
<li>nav實作</li>
<li>model box概念</li>
</ul>
<li>其他前端概念</li>
<ul>
<li>Wireframe結構規劃</li>
</ul>
</ul>

</div>

<h2>實作目標:</h2>

圖為2019年的奇摩運動新聞頁面

<h2>成品釋例：</h2>


※注意：通常在練習切版時，不一定會放上實際圖片或文字，這種簡化處理方式能幫助切版調整時不會被圖文吸引注意力。

<h2>切版過程與步驟紀錄:</h2>

<h3>
1.Wireframe結構規劃 </h3>

在做切版的時候，並不像做簡報能直接開工，在版面上直接複製貼上，實務上會因為開啟網頁的硬體不同，又或是較為複雜的區塊配置，常會需要先釐清前端的編輯思路，這時候好的輔助工具就能幫助我們快速把Wireframe結構呈現出來。

五倍紅寶石的線上課中，高老師推薦的是這個網站：
<a href="https://whimsical.co/" style="font-size: 1.5em;">whimsical </a>
網址:https://whimsical.co/


我自己在規劃Wireframe的幾個要點是
<oL>
<li>做好區塊命名</li>
<li>預設寬度百分比，同一層不要超過100%，能避免爆版</li>
<li>清楚看到子父層架構，能有助後面CSS下指令</li>

</oL>

<h3>
2.nav條製作
</h3>

HTML結構

<nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">政治</a></li>
            <li><a href="#">論壇</a></li>
            <li><a href="#">財經</a></li>
            <li><a href="#">運動</a></li>
        </ul>
    </nav>

在寫nav條的時候，要注意所有的文字都需要超連結，所以要記得使用`<a>`超連結標籤，另外，雖然此範例的nav條並未有下拉式結構，但**使用`<ul>、<li>`標籤是常見的寫法**，雖然在調整上多了一些步驟(下方CSS部分會進行說明)，但在日後網頁程式碼的維護與更新上，在識別與調整上都能方便不少。

CSS結構

/* nav bar */
            nav {
                background-color: #3d8fff;
                height: 50px;
            }
            nav ul {
                list-style: none;
            }
            nav li {
                font-size: 1.5em;
                line-height: 50px;
                display: inline-block;
                margin: 0px 10px;
            }
            nav a {
                text-decoration: none;
                color: white;
            }

nav條使用`<ul>、<li>`標籤後，應該會發現原本躺著好好的橫排文字，自己突然就站起來了，但其實只要加上一點調整，他就能回到原本躺好的位置上了。

媽呀!我的排版站起來了!

首先針對 `nav ul`標籤下CSS指令`list-style: none;`就能把標籤前的預設序列數字取消掉，再來對`nav li`標籤下CSS指令`display: inline-block;`，就能把原本直排的清單排列，改成用橫向排列方式，詳細的區塊元素與行內元素的紛爭，日後的筆記會再進行補充。

另外，在網頁前端上進行垂直置中一直是個新手難題(至少對我來說非常困難QQ)，提供一個找到的小技巧，如果是單行文字的垂直置中的話，只要把CSS的行高屬性`line-height: `**設定成與欲垂直置中的區塊高相同**，就能達到垂直置中的效果喔。

<h6>

參考資料來源：[CSS - 文字和inline垂直置中](https://ithelp.ithome.com.tw/articles/10205421)
</h6>

<h3>
3.main-page排版
</h3>

在main-page排版上，最大的挑戰是希望指定的區塊要能併行排列，所以要用到CSS的`float: ;`指令，來使各種區塊元素能進行並排，但使用`float: ;`的前提是，各並排區塊的橫向區塊寬度加總，不能超過頁面寬的100%，所以在設定個區塊的寬度時，建議是以"%"為單位，這樣能使寬度計算更為方便，還能讓版面在各種不同的設備上能有相近的顯示狀況(在字體單位上使用"em"也有類似的效果喔)。 所以在Wireframe中，我有加註各區塊的預計寬度百分比，讓我在寫程式的過程中，能更快速的調整版面。

另外，CSS屬性上的"%"單位，會是以父層為判斷基準，舉個例子來說:


此次範例的 *.main-page區塊* 預設的寬度為98%，它的子層區塊 *article區塊* 則是68%，意思是 *article區塊* 在整個瀏覽器頁面的顯示上，是98%×68%的寬度，而非單純的68%，編排上因此也不用1px、5px的斤斤計較，排版起來也方便得多。

此外，為了避免排版爆版，`float: ;`指令排版完後，需要加上`clear: both;`指令在排版結束末段的程式碼中，通常的作法是會再加上一段`<div style="clear: both;"></div>`指令程式碼，不然可能會在後面RWD上出現問題。

<h3>
4.其他切版小技巧
</h3>

切版的時候，我自己很容易再調整model-box時，對於整體的空間感非常模糊，這時候我會**在排版的區塊內下`background-color: ；`指令**，把排版空間視覺化後，調整起來相對容易的多。詳細的效果可參考下面的練習過程圖例，會更明白下背景色的作用喔！

這次做排版的時候，預設圖片使用了假圖生產器的圖片，這樣能使排版上更為清楚，推薦再排版前期的時候使用。

[假圖生產器](https://fakeimg.pl/):https://fakeimg.pl/
<h6>*※※※詳細的使用方法會在日後補上*</h6>

最後，寫code的時候，我們不一定能保持過程中都能專注，或是下次檢視程式碼，能馬上理解之前所寫的內容，所以**請善用註解功能**吧，這樣能讓整體程式碼結構更為清楚，對日後工作時的共同協作，也非常有幫助喔。

<h2>阿布的練習過程:</h2>

<h3>在未看教學詳解前的成果</h3>


成品連結:
https://codepen.io/idkxoskg-the-looper/pen/JjNgRpK

與老師示範主要差異點:
nav項目未使用ul li清單
sub-content改成50%(RWD會跑版)
圖片為單div製作(RWD會跑版)

<h3>在看完教學詳解後的重製成果</h3>


成品連結:
https://codepen.io/idkxoskg-the-looper/pen/qBmeVdJ
命名與架構強化後，寫作結構更完整，網頁縮放(RWD)後架構也能保留更完整。

- [↳回筆記首頁](https://hackmd.io/@a91929s/SJdkV0okY)

###### tags: `六角筆記王` `阿布的前端學習筆記`

{%hackmd Iiu5mOixR7yWkPHKCkabBg %}
<iframe class="LikeCoin" height=210 src="https://button.like.co/in/embed/a91929s/button?referrer=https://hackmd.io/@a91929s" width="100%"></iframe>