HTML寫出豎線的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中創(chuàng)建p標(biāo)簽內(nèi)容；最后通過(guò)“border-left:3px solid #369;”屬性實(shí)現(xiàn)豎線效果即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

html：div中加個(gè)豎條

border-left: 3px solid #369;
效果如下

代碼如下

<p class="new-right">     <p class="title-top">         <h3>           最新文章          <span>NEWS</span>         </h3>         </p>         <ul class="news-ul">             <li><a href="#">虛擬主機(jī)相關(guān)知識(shí)</a></li>             <li><a href="#">虛擬主機(jī)相關(guān)知識(shí)</a></li>             <li><a href="#">虛擬主機(jī)相關(guān)知識(shí)</a></li>             <li><a href="#">虛擬主機(jī)相關(guān)知識(shí)</a></li>             <li><a href="#">虛擬主機(jī)相關(guān)知識(shí)</a></li>         </ul>     </p>

css

.new-right{     float: right; } .title-top{     height: 28px;     text-align: left;     border-bottom: 1px solid #ccc;     border-bottom-width: 1px;     border-bottom-style: solid;     border-bottom-color: rgb(204, 204, 204); } .title-top h3{     padding-left: 10px;     border-left: 3px solid #369;     color: #333; } .title-top span{     color: #ccc;     font: italic 16px/18px Palatino Linotype,simsun;     padding-left: 10px;     letter-spacing: 1px; } .news-ul{     padding-left:20px; }

推薦學(xué)習(xí)：《HTML視頻教程》