html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月3日 星期六

CSS DIV 區塊標籤 標簽 div,

CSS DIV 區塊標籤

DIV 可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,大致長成這樣 <div>內容</div>,你可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。
border: 5px #ffac55 solid 邊框 , background-color:#FFD382 背景顏色

<h3>這裡是網頁標題</h3>
<div style="border: 5px #ffac55 solid; height: 60px; width: 90%;">
這裡是網頁第一個區塊的內容</div>
<div style="background-color:#FFD382; height: 60px; width: 70%;">
這裡是網頁第二個區塊的內容</div>

 

這裡是網頁標題

這裡是網頁第一個區塊的內容
這裡是網頁第二個區塊的內容

display:table : 將div直接模擬成table來使用
display: table-cell : 對應 table <td>標籤

<div style="display:table;height: 180px;width: 100%;">

<div style="text-align: center;vertical-align: top;display: table-cell;height: 100%;padding: 10px;width: 30px;background-color: #666;">Block one</div>
 
<div style="text-align: center;vertical-align: middle;display: table-cell;height: 100%;padding: 10px;width: 30px;background-color: #777;">Block two</div>
 
<div style="text-align: center;vertical-align: bottom;display: table-cell;height: 100%;padding: 10px;width: 30px;background-color: #888;">Block three</div>

</div>

 
Block one
Block two
Block three

css_table : 將div直接模擬成<table>來使用
class="css_tr": 將div直接模擬成 <tr>標籤
class="css_td": 將div直接模擬成 <td>標籤
<div id="css_table" style="width:100%;">
<div class="css_tr" >
<div class="css_td" style="width:20%; text-align: center">標題</div>
<div class="css_td" style="width:30%; text-align: center">回應</div>
<div class="css_td" style="width:40%; text-align: center">日期</div>
</div>
<div class="css_tr">
<div class="css_td">第1 行 A</div>
<div class="css_td">第1 行 B</div>
<div class="css_td">第1 行 C</div>
</div>
<div class="css_tr">
<div class="css_td">第1 行 A</div>
<div class="css_td">第1 行 B</div>
<div class="css_td">第1 行 C</div>
</div>
</div>

<style>
#css_table {display:table;border: 2px #000000 solid}
.css_tr {display: table-row;}
.css_td {display: table-cell;border: 1px #000000 solid ;}
</style>
 
標題
回應
日期
第1 行 A
第1 行 B
第1 行 C
第1 行 A
第1 行 B
第1 行 C

沒有留言:

張貼留言