Html5與Css3佈局、盒模型（七）

原創

qq_34664510

2020-02-20 17:47

佈局

CSS設計代碼的結構

一、一般樣式
1.主題樣式
2.reset樣式
3.鏈接
4.標題
5.其他元素

/*@group  general  styles*/

二、輔助樣式
1.表單
2.通知和錯誤
3.一致的條目

/*@group  helper  styles*/

三、頁面結構
1.標題、頁腳、導航
2.佈局
3.其他頁面結構元素

/*@group  pages structure*/

四、頁面組件
各個頁面

/*@group  page components*/

五、覆蓋

/*@group overrides*/

一些有用的註釋（待補充）

@todo:需修改、修復、複查
@bugfix：代碼問題
@workaround:不完善的權宜之計

實例：規範的命名和編排
避免過多的class，div
語義化

<body>
<div class="page"><!--page開始-->
    <header class="masthead" role="banner"><!--masthead開始-->
        <p class="logo"><a href="#"><img src="logo.png"/>Logo圖片</a></p>
        <ul class="socical-sites">
            <li><a herf="#"><img src="pics-01.png"/>圖片01</a></li>
            <li><a herf="#"><img src="pics-02.png"/>圖片02</a></li>
            <li><a herf="#"><img src="pics-03.png"/>圖片03</a></li>
        </ul>
        <nav role="navigation">
            <ul>
                <li><a herf="#">主導航欄01</a></li>
                <li><a herf="#">主導航欄02</a></li>
                <li><a herf="#">主導航欄03</a></li>
            </ul>
        </nav>
    </header><!--masthead結束-->

    <div class="container"><!--container開始-->
        <main role="main"><!--main開始-->
            <h1>主題內容</h1>
            <article>
                <hgroup>
                    <h1>文章主標題</h1>
                    <h2>文章副標題</h2>
                </hgroup>
                <section class="post">
                    <h1>章節內容01</h1>
                    <img src="post01.png" class="post-photo-full"/>
                    <div class="post-blurb">
                        <p>推薦廣告</p>
                    </div>
                    <footer class="footer">
                        <ul>
                            <li><a herf="#">章節條目頁腳04</a></li>
                            <li><a herf="#">章節條目頁腳05</a></li>
                            <li><a herf="#">章節條目頁腳06</a></li>
                        </ul>
                    </footer>
                </section>

                <section class="post">
                    <h1>章節內容02</h1>
                    <img src="post02.png" class="post-photo"/>
                    <div class="post-blurb">
                        <p>推薦廣告</>
                    </div>
                    <footer class="footer">
                        <ul>
                            <li><a herf="#">章節條目頁腳04</a></li>
                            <li><a herf="#">章節條目頁腳05</a></li>
                            <li><a herf="#">章節條目頁腳06</a></li>
                        </ul>
                    </footer>
                    <nav role="navigation">
                        <ol>
                            <li><a herf="#">章節有序列表07</a></li>
                            <li><a herf="#">章節有序列表08</a></li>
                            <li><a herf="#">章節有序列表09</a></li>
                        </ol>
                    </nav>
                </section>  
            </article>
        </main><!--main結束-->

        <div class="sidebar"><!--sidebar開始-->
            <article class="about">
                <h2>About me工具欄</h2>
            </article>
            <aside>
                <h2>側欄1</h2>
                <ul class="links">
                    <li>側欄列表01</li>
                    <li>側欄列表02</li>
                    <li>側欄列表03</li>
                </ul>
            </aside>
            <aside>
                <h2>側欄2</h2>
                <ul class="links">
                    <li>側欄列表04</li>
                    <li>側欄列表05</li>
                    <li>側欄列表06</li>
                </ul>
            </aside>
        </div><!--sidebar結束-->
    </div><!--container結束-->

    <footer role="contentinfo" class="footer"><!--footer開始-->
        <p class="legal"><small>&copy;2017 Adeline zhang</small></p>
    </footer><!--footer結束-->
</div><!--page結束-->
</body>

對舊版瀏覽器爲Html5添加樣式
HTML5 shiv
Modernizr
對默認樣式進行重置或標準化
normalize
盒模型

背景（藍色區域）：會延伸到邊框的後面，通常情況下僅在內邊距所延伸到的區域可見，除非邊框是透明或者半透明
1.內邊距padding：內容區域與邊框的距離，背景顏色會填充內容區域和內邊距
2.外邊距：元素與其他元素之間的空間
css的width：內容區域的寬度
瀏覽器顯示的寬度：內容寬度+左右內邊距+左右邊框