CSS 图片廊
使用CSS创建图片廊：
显示如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
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 href="#"><img src="http://img.php.cn/upload/image/837/831/318/1476339949246926.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">1</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/153/383/263/1476339955769441.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">2</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/815/625/584/1476339961304990.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">3</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/870/504/597/1476339972616793.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">4</div>
</div>
</body>
</html>代码解释：
CSS图片廊，每显示一个图片用2层div；外层的css类为img,包含一个<a>标签，在<a>标签中的<img>标签设置图像路径，alt属性是鼠标移上显示的提示；内层div显示图像描述，其css类是desc；
div.img, .是css类选择器，定义"img"类的属性：
外边距：2px;
边框：1px，实线，颜色；
高度：自动；
宽度：自动；
向左浮动；
文本中间对齐；
div.img （img标签为行内元素）
行内元素； 自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的；
外边距：3px;
边框：1px, 实线，颜色；
div.desc
文本对齐：中间对齐
字体粗细：正常
宽度：120px
外边距：2px
div.img a:hover img {border: 1px solid #0000ff;}
鼠标悬停时img边框和颜色改变
neue Datei
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
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 href="#"><img src="https://img.php.cn//upload/image/837/831/318/1476339949246926.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">1</div>
</div>
<div class="img">
<a href="#"><img src="https://img.php.cn//upload/image/153/383/263/1476339955769441.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">2</div>
</div>
<div class="img">
<a href="#"><img src="https://img.php.cn//upload/image/815/625/584/1476339961304990.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">3</div>
</div>
<div class="img">
<a href="#"><img src="https://img.php.cn//upload/image/870/504/597/1476339972616793.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">4</div>
</div>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)