想用HTML or CSS做出Word Page頁面效果

css

javascript- 2018-03-20 14:48:18 ‧ 5309 瀏覽

分享至

請問如何用CSS做出圖片中的效果呢?

html的ul沒有中間自動點補全，跟最右邊字串對稱

wei225890 iT邦新手 5 級 ‧ 2018-03-20 15:01:13 檢舉

這個用html的ul就能做出來了

javascript- iT邦新手 5 級 ‧ 2018-03-20 15:08:51 檢舉

html的ul沒有中間自動點補全，跟最右邊字串對稱

窮嘶發發發 iT邦高手 1 級 ‧ 2018-03-20 15:09:24 檢舉

這各要用 CSS做，項目字元長度不同，所以實際上要用三個DIV 去層疊才能產生這樣的效果

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

ccutmis

iT邦高手 2 級 ‧ 2018-03-20 16:28:19

最佳解答

希望有幫助~

<html>
<head>
<style>
.wordUL{}
.wordUL li{border-bottom:dotted 2px #333;}
.DB{display:inline-block;}
.FL{float:left;}
.FR{float:right;}
.noBB{border-bottom:solid 2px #fff;}
</style>
</head>
<body>
<ul class="wordUL">
    <li>
        <span class="DB FL noBB">1. ABC</span>
        <span class="DB FR noBB">Page01~20</span>
    </li>
    <li>
        <span class="DB FL noBB">2. CDE</span>
        <span class="DB FR noBB">Page21~30</span>
    </li>
    <li>
        <span class="DB FL noBB">3. FGH</span>
        <span class="DB FR noBB">Page31~40</span>
    </li>
</ul>
</body>
</html>

回應 3
分享
檢舉

wolfwang iT邦研究生 4 級 ‧ 2018-03-20 17:16:28 檢舉

簡單易用的障眼法

ccutmis iT邦高手 2 級 ‧ 2018-03-20 17:16:57 檢舉

^^多謝!

javascript- iT邦新手 5 級 ‧ 2018-03-20 17:31:34 檢舉

登入發表回應

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-03-20 16:27:28

中間自動點補全只用css，只有一種做法，其他的html or css可以做到

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2018-03-20 18:12:28

<html>
    <head>
        <title>測試一下啦!!!!</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            .word_ol li{
                border-bottom-color: #000;
                border-bottom-style: dotted;
                border-bottom-width: 1px;
                position: relative;
                width: 500px;
                padding: 5px 0px;
            }
            .word_ol div{/*在此調整字體大小跟對應位置*/
                top: 0px;
                font-size: 18px;
                padding-bottom: 5px;
            }
            .word_ol .title_name{
                position: absolute;
                background-color: #fff;
                margin-top: 5px;
            }
            .word_ol .page_box{
                position: absolute;
                right: 0px;                
                background-color: #fff;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <ol class="word_ol">
            <li><div class="title_name">tttttttttttt</div><div class="page_box">.20</div></li>
            <li><div class="title_name">taaaat</div><div class="page_box">.20</div></li>
            <li><div class="title_name">ttwwwwwttt</div><div class="page_box">.20</div></li>
            <li><div class="title_name">fffggh</div><div class="page_box">.20</div></li>
            <li><div class="title_name">s35567</div><div class="page_box">.page20~40</div></li>


        </ol>



    </body>
</html>

另外一種做法也給你參考。這是用色塊蓋住的方法處理的。