|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的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中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
