本發(fā)明涉及網(wǎng)頁開發(fā)技術(shù)領(lǐng)域，具體涉及一種實(shí)現(xiàn)實(shí)線兩端圓點(diǎn)的方法。

背景技術(shù)：

在WEB前端開發(fā)的過程中，經(jīng)常會用到一些線的兩端是圓點(diǎn)的樣式；一般來說，我們都是用背景圖的方式直接實(shí)現(xiàn)的。但是圖片的方式后期維護(hù)不方便，有小改動就要更改圖片，而且每訪問一次圖片就會與服務(wù)器發(fā)生一次通訊，無形中也會增加了服務(wù)器的壓力。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明解決的技術(shù)問題在于提供一種基于純HTML+CSS代碼實(shí)現(xiàn)實(shí)線兩端圓點(diǎn)的方法，替代了以往使用圖片實(shí)現(xiàn)實(shí)線兩端圓點(diǎn)的方法，增加了后期維護(hù)的便捷性，也降低了對服務(wù)器的訪問次數(shù)，減少服務(wù)器的壓力。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案是：

所述的方法是通過純HTML和CSS代碼直接展現(xiàn)出實(shí)線兩端圓點(diǎn)的樣式。

所述的方法包括如下步驟：

第1步、創(chuàng)建HTML元素界面布局文件；

第2步、創(chuàng)建CSS樣式文件；

第3步、創(chuàng)建HTML元素DIV，并設(shè)置元素DIV的CSS樣式，包括寬度、高度、背景色、行距等值；

第4步、設(shè)置元素DIV的偽類“：before”與“：after”的共同樣式，以此生成圓點(diǎn)，包括字體大小、content、以及上邊距；

第5步、設(shè)置偽類“：before”的單獨(dú)樣式，包括左邊距與縮進(jìn)間距，讓圓點(diǎn)定位在線的最左端；

第6步、設(shè)置偽類“：after”的單獨(dú)樣式，包括右邊距與字符間距，讓圓點(diǎn)定位在線的最右端；

第7步、引入CSS樣式文件。

本發(fā)明的有益效果是：純代碼實(shí)現(xiàn)實(shí)線兩端圓點(diǎn)，增加了后期維護(hù)的便捷性，也降低了對服務(wù)器的訪問次數(shù)，減少服務(wù)器的壓力。

附圖說明

下面結(jié)合附圖對本發(fā)明進(jìn)一步說明：

圖1為本發(fā)明布局圖；

圖2為本發(fā)明操作流程圖。

具體實(shí)施方式

見附圖1、2所示，本發(fā)明具體包括如下步驟：

第1步、創(chuàng)建HTML元素界面布局文件；

第2步、創(chuàng)建CSS樣式文件；

第3步、創(chuàng)建網(wǎng)頁主體main部分，并且設(shè)置寬度、高度、絕對定位等屬性；

HTML部分：<div id＝″line″></div>

CSS部分：#line{height：1px；background：#000；width：100px；margin：50px auto；position：relative；line-height：1px；}

第4步、設(shè)置元素DIV的偽類“：before”與“：after”的共同樣式，以此生成圓點(diǎn)，包括字體大小、content、以及上邊距；

#line：before，#line：after{content：″·″；position：absolute；font-size：60px；top：0；}

第5步、設(shè)置偽類“：before”的單獨(dú)樣式，包括左邊距與縮進(jìn)間距，讓圓點(diǎn)定位在線的最左端；

#line：before{left：0；text-indent：-5px；}

第6步、設(shè)置偽類“：after”的單獨(dú)樣式，包括右邊距與字符間距，讓圓點(diǎn)定位在線的最右端；

#line：after{right：0；letter-spacing：-5px；}

第7步、引入CSS樣式文件。