大學(xué)生新聞網(wǎng)，大學(xué)生新聞發(fā)布平臺(tái)
CSS 圖片廊
圖片廊
T以下是使用CSS創(chuàng)建圖片廊：
實(shí)例
<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創(chuàng)建圖片廊：
實(shí)例
<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>
- 作者：大學(xué)生新聞網(wǎng) 來源：大學(xué)生新聞網(wǎng)
- 發(fā)布時(shí)間：2025-03-29 閱讀：
- 掃一掃 分享悅讀
- CSS 圖像透明/不透明
- 注意：CSS Opacity屬性是W3C的CSS3建議的一部分。
- 03-29 關(guān)注：0
- CSS 圖片廊
- CSS 圖片廊
- 03-29 關(guān)注：1
- CSS 下拉菜單
- 使用 CSS 創(chuàng)建一個(gè)鼠標(biāo)移動(dòng)上去后顯示下拉菜單的效果。
- 03-29 關(guān)注：0
- CSS 導(dǎo)航欄
- 熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。
- 03-29 關(guān)注：0
- CSS 偽元素
- CSS偽元素是用來添加一些選擇器的特殊效果。
- 03-29 關(guān)注：0
- CSS 組合選擇符
- CSS 組合選擇符可以讓你直觀的明白選擇器與選擇器之間的關(guān)系。
- 03-29 關(guān)注：1
- CSS Float（浮動(dòng)）
- CSS float 屬性定義元素在哪個(gè)方向浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，直到該塊級(jí)框的外邊緣碰到包含框或者其他的浮動(dòng)框?yàn)橹埂?/li>
- 03-29 關(guān)注：0
- CSS 水平對(duì)齊(Horizontal Align)
- 關(guān)于 CSS 中元素的水平對(duì)齊(Horizontal Align)，你可以使用多種屬性來進(jìn)行設(shè)置。
- 03-29 關(guān)注：1
-
客服QQ：471708534 大學(xué)生新聞網(wǎng)©版權(quán)所有