|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章主要的介紹了關于css樣式中的盒模型的邊框介紹,有著完整的實例,還有css盒模型邊框細節的介紹和代碼的解釋。下面就讓我們一起來看這篇文章吧首先我們來聊聊盒模型的組成部分: 想到盒模型就不由自主的想到一個盒子,css樣式的盒模型里面有內容,邊框,內邊距,外邊距等等,我們今天這篇文章主要說的就是盒模型的邊距。 我們先看幾個屬性和介紹:
記得在之前的文章里面講過關于border的用法,第一個用過了,但是我們還是要說一說的。 現在我們先來看個完整的實例: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網</title>
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>這是個完整的HTML所有的代碼,里面把上面那三個屬性都用上去了。 現在我們來看看在瀏覽器中顯示的效果:
這就是邊框的內容了,有三個屬性定義了這個圖像的完成。(想看更多就到PHP中文網css參考手冊欄目中學習) 我們再來看看深入點的內容:
我們來把這個加入代碼中去: <style type="text/css">
table{border-style:solid; border-width:medium; border-color:red;border-top-style:double;border-left-style:double;
border-width:20px;}
</style>是不是有些多了,現在我們再來看看效果:
上和左是雙線邊框,下和右都沒設置,所以是一起的,像上圖一樣,是一條實線。像素為20px。 好了,以上就是本篇關于css和模型的介紹了(想看更多就到PHP中文網css學習手冊欄目中學習),有問題的可以在下方留言提問。 以上就是css盒模型的邊框用法你知道嗎?這里有css盒模型的組成介紹的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!