|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在頁面布局時,為了呈現一定的效果,經常需要使用CSS虛線樣式,但是很多人新手對CSS虛線樣式還比較陌生,這篇文章就和大家講講,如何使用CSSborder屬性制作虛線樣式,以及CSS虛線樣式的一些運用實例。比如:CSS虛線邊框的運用,CSS虛線下邊框的運用,一條虛線的運用等等。有需要的小伙伴可以參考一下。一、CSS虛線的制作方法 border-style 屬性可以設置一個元素的四個邊框的樣式, 它的常用屬性值如下: border-style屬性可以設置一個值,兩個值,三個值,四個值,他們代表的意思如下: 邊框的寫法: border:border-width, border-style,border-color 。所以,寬度為1px的黑色虛線可以這樣寫 border:1px dashed #000; 二、CSS虛線的運用實例 1、CSS虛線邊框 <style type="text/css">
div{border: 1px dashed #000;}
</style>
<body>
<div>生活不止眼前的茍且,還有詩和遠方的田野</div>
</body>效果圖:
2、li列表虛線分割,即CSS虛線下邊框 頁面中用css li標簽布局的也比較多,每行li下邊用虛線將內容分開,用border-bottom來實現。 <style type="text/css">
li{border-bottom: 1px dashed #000;}
</style>
<body>
<ul>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
</ul>
</body>效果圖:
3、CSS一條水平虛線,用hr 標簽,然后對hr標簽添加樣式,border: 1px dotted #FF0000 <hr style="border: 1px dotted #FF0000;"> 效果圖:
4、超鏈接虛線下劃線,用border-bottom: 1px dashed #FF0000,對a標簽中的內容進行強調。 <style type="text/css">
a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
<body>
<div>歡迎大家來<a href="#">PHP中文網</a>學習知識</div>
</body>效果圖:
以上介紹了CSS虛線樣式的制作方法,以及虛線樣式在頁面布局中的運用實例,小伙伴們可以多動手嘗試,試一試不一樣的效果,希望這篇文章可以幫助愛學習的你! 以上就是CSS虛線樣式的制作方法及虛線樣式的運用實例的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!