標籤：style class blog c code java
一. 塊下面介紹一個非常常用的標籤:<div></div>, div是divison(界限)的縮寫. <div>允許你將頁面分成不同的容納塊, 例如下面這段代碼:
<!DOCTYPE html><html> <head> <title>Division</title> </head> <body> <div style="width:50px; height:50px; background-color:red"></div> <div style="width:50px; height:50px; background-color:blue"></div> <div style="width:50px; height:50px; background-color:green"></div> </body></html>
產生三個長度和寬度都為50像素,背景顏色分別為紅,藍,綠的三個塊, 簡單表示如下:
| 紅 |
| 藍 |
| 綠 |
我們可以在這些塊上添加連結.
二. <span><div>允許我們把網頁分成一個個樣式不同片, <span>允許我們空置一個網頁小範圍內的樣式, 例如文本. 如果想讓一個段落的某個詞變成紅色, 我們可以這樣做:
<body> <p>This text is black, except for the word <span style="color:red">red!</span></p> </body>
這樣"red"將顯示紅色.
三. 表的另一個用途---照片牆我們已經知道關於表的所有東西了, 這裡介紹一個閉用表格式化文本更有用的東西---格式化圖片.
1.第一步, 建立一個m*n的表格, 這裡以1*3為例
2.第二步, 在每一個<tb></td>裡寫入圖片的連結, 即<img src="URL" />
3.選做, 可以為圖片添加連結.
下面是一個例子:
<!DOCTYPE html><html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>My Photo Page</title> </head> <body> <table> <thead> <th>PhotoTable</th> </thead> <tr> <td> <a href="http://www.qq.com"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" /> </a> </td> <td> <a href="http://www.qq.com"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" /> </a> </td>
<td>
<a href="http://www.qq.com">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" />
</a>
</td> </tr> </table> </body></html>
效果是這樣的:
PS:這個照片牆是3*3的,這裡只選了一張圖片, 並且每個圖片的連結都是www.qq.com.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
