這篇文章主要介紹怎么使用html和css實現5R筆記模板，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們提供的服務有：成都網站設計、做網站、微信公眾號開發、網站優化、網站認證、貞豐ssl等。為上千余家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的貞豐網站制作公司

緣起

網上有很多現成的模板，下載下來之后吧，看著好像在上面寫英文可能更方便一點，行距很小，而且還有網址在上面，心里不是很樂意的說呢。后來想著自己在word或者excel里面做一個模板出來，后來愣是不會把一個表格的一行設置成占總表格的70%，最終放棄，后來想起來，css里面是可以用cm做單位的呀，為什么不自己寫一個呢，只用div就可以了呀

實現

1.先把一個div設置成A4紙的大小，寬21cm，高29.7cm

<div id="abody">
    </div>
#abody { width: 21cm; height: 29.7cm; margin: 0 auto; overflow: hidden; padding: 1.5cm 1.2cm 1.2cm 2.5cm;}

2.給A4紙這么大的div里面加兩個浮動的div，一個往左，占用29%的空間，一個往右，占用68%的空間

<div id="main" class="main le">
        <div class="aline">提示</div>
        <div class="aline"></div>
</div>
<div id="sider" class="main ri">
        <div class="aline">筆記</div>
        <div class="aline"></div>
</div>
<div id="footer" class="footer">
        <div class="aline doubleline">概要</div>
        <div class="aline"></div>
</div>

用css的border分開兩欄

.main {height: 75%; overflow: hidden;}

    .le { width: 28.99999%; border-right: double 3px #666; float: left; }
    .ri { width: 69.99999%; float: right; }

3.往大框里面寫一行一行的橫線，用一個div 的aline類實現，html見上面

這里如果你的編輯器支持emmet的話，寫一個 div.aline*42 ，就會有42行相同的div出現了。然后用css的border屬性畫出一條條的線出來。

.aline { height: 0.9cm; border-bottom: 1px; border-bottom-style: dashed; border-bottom-color: #999; 
            margin-right: 8px; color: #eee; line-height: 0.9cm;}

4.再在左右兩個大框的后面放一個div，清除浮動，放概要部分。

<div id="main" class="main le">
        <div class="aline">提示</div>
        <div class="aline"></div>
</div>
<div id="sider" class="main ri">
        <div class="aline">筆記</div>
        <div class="aline"></div>
</div>
<div id="footer" class="footer">

        <div class="aline doubleline">概要</div>
        <div class="aline"></div>
</div>

，里面的首行，用實線分出來5R筆記的下部分結構來

.footer {clear: both; overflow: hidden;}
.doubleline { border-top: double 3px #666;}

以上是“怎么使用html和css實現5R筆記模板”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前標題：怎么使用html和css實現5R筆記模板-創新互聯
當前網址：http://vcdvsql.cn/article30/didgpo.html

成都網站建設公司_創新互聯，為您提供用戶體驗、做網站、網站排名、手機網站建設、定制網站、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯