<h2 CSS 定位 (Positioning) 實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例 CS....
CSS 定位 (Positioning) 實例
CSS 實例
- CSS 背景實例
- CSS 文本實例
- CSS 字體(font)實例
- CSS 邊框(border)實例
- CSS 外邊距 (margin) 實例
- CSS 內邊距 (padding) 實例
- CSS 列表實例
- CSS 表格實例
- 輪廓（Outline)實例
- CSS 尺寸 (Dimension) 實例
- CSS 分類 (Classification) 實例
CSS 定位 (Positioning) 實例- CSS 偽類 (Pseudo-classes)實例
- CSS 偽元素 (Pseudo-elements)實例
01設置元素的形狀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01設置元素的形狀</title>
<style type="text/css">
img {
position:absolute;
clip: rect(0px 100px 300px 0px);
}
</style>
</head>
<body>
<img src="cc.jpg" width="510px" height="730px" />
</body>
</html>
02如何使用滾動條來顯示元素內溢出的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02如何使用滾動條來顯示元素內溢出的內容</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: scroll;
}
</style>
</head>
<body>
<p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
<div>
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。
</div>
</body>
</html>
03如何隱藏溢出元素中溢出的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03如何隱藏溢出元素中溢出的內容</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: hidden;
}
</style>
</head>
<body>
<p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
<div>
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。
</div>
</body>
</html>
04如何設置瀏覽器來自動地處理溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04如何設置瀏覽器來自動地處理溢出</title>
<style type="text/css">
div {
width: 250px;
height: 80px;
background-color: #cc9966;
overflow: auto;
}
</style>
</head>
<body>
<p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
<div>
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible。
</div>
</body>
</html>
05垂直排列圖象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05垂直排列圖象</title>
<style type="text/css">
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>
這是一副<img class="top" border="1" src="55.jpg" />位於段落中的圖像。
</p>
<p>
這是一副<img class="bottom" border="1" src="55.jpg" />位於段落中的圖像。
</p>
</body>
</html>
06Z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06Z-index</title>
<style type="text/css">
img.x {
position: absolute;
top: 30px;
left: 0px;
z-index: -1;
}
img.y {
position: absolute;
top: 150px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<h1>這是一標題</h1>
<img class="x" src="55.jpg" />
<p>預設的 z-index 是 0。Z-index -1 擁有更低的優先順序。</p>
<h1>這是二標題</h1>
<img class="y" src="55.jpg" />
<p>預設的 z-index 是 0。Z-index 1 擁有更高的優先順序。</p>
</body>
</body>
</html>
07使用固定值設置圖像的上右下左邊緣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07使用固定值設置圖像的上右下左邊緣</title>
<style type="text/css">
img.top {
position: absolute;
top: 0px;
}
img.right {
position: absolute;
right: 0px;
}
img.bottom {
position: absolute;
bottom: 0px;
}
img.left {
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
</body>
</html>
08使用百分比設置圖像的上右下左邊緣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08使用百分比設置圖像的上右下左邊緣</title>
<style type="text/css">
img.top {
position: absolute;
top: 5%;
}
img.right {
position: absolute;
right: 5%;
}
img.bottom {
position: absolute;
bottom: 5%;
}
img.left {
position: absolute;
left: 20%;
}
</style>
</head>
<body>
<h1>這是標題</h1>
<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
</body>
</html>
CSS 定位 (Positioning)總結
