大學生新聞網，大學生新聞發布平臺
CSS 圖片廊
圖片廊
T以下是使用CSS創建圖片廊：
實例
<html>
<head>
<style>
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
T以下是使用CSS創建圖片廊：
實例
<html>
<head>
<style>
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
- 作者：大學生新聞網 來源：大學生新聞網
- 發布時間：2025-03-29 閱讀：
- 掃一掃 分享悅讀
- CSS 圖像透明/不透明
- 注意：CSS Opacity屬性是W3C的CSS3建議的一部分。
- 03-29 關注：0
- CSS 圖片廊
- CSS 圖片廊
- 03-29 關注：1
- CSS 下拉菜單
- 使用 CSS 創建一個鼠標移動上去后顯示下拉菜單的效果。
- 03-29 關注：0
- CSS 導航欄
- 熟練使用導航欄，對于任何網站都非常重要。
- 03-29 關注：0
- CSS 偽元素
- CSS偽元素是用來添加一些選擇器的特殊效果。
- 03-29 關注：0
- CSS 組合選擇符
- CSS 組合選擇符可以讓你直觀的明白選擇器與選擇器之間的關系。
- 03-29 關注：1
- CSS Float（浮動）
- CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其他的浮動框為止。
- 03-29 關注：0
- CSS 水平對齊(Horizontal Align)
- 關于 CSS 中元素的水平對齊(Horizontal Align)，你可以使用多種屬性來進行設置。
- 03-29 關注：1
-
客服QQ：471708534 大學生新聞網©版權所有