怎么使用html和css實(shí)現(xiàn)5R筆記模板-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、貞豐ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的貞豐網(wǎng)站制作公司

緣起

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

實(shí)現(xiàn)

1.先把一個(gè)div設(shè)置成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里面加兩個(gè)浮動(dòng)的div，一個(gè)往左，占用29%的空間，一個(gè)往右，占用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.往大框里面寫一行一行的橫線，用一個(gè)div 的aline類實(shí)現(xiàn)，html見上面

這里如果你的編輯器支持emmet的話，寫一個(gè) div.aline*42 ，就會(huì)有42行相同的div出現(xiàn)了。然后用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.再在左右兩個(gè)大框的后面放一個(gè)div，清除浮動(dòng)，放概要部分。

<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>

，里面的首行，用實(shí)線分出來5R筆記的下部分結(jié)構(gòu)來

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

以上是“怎么使用html和css實(shí)現(xiàn)5R筆記模板”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：怎么使用html和css實(shí)現(xiàn)5R筆記模板-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://bm7419.com/article30/didgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、做網(wǎng)站、網(wǎng)站排名、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)