CSS 图片
CSS 图片
本章节将为大家介绍如何使用 CSS 来布局图片。
圆角图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#divcss5{ margin:0px auto}
#divcss5 img{ border-radius:50%;}
</style>
</head>
<body>
<div id="divcss5">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" width="400" height="500"/>
</div>
</body>
</html>缩略图
我们使用 border 属性来创建缩略图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Paris" width="400" height="300">
</body>
</html>响应式图片
响应式图片会自动适配各种尺寸的屏幕。
实例中，你可以通过重置浏览器大小查看效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" width="1000" height="300">
</body>
</html>卡片式图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {margin:25px;}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
<div class="polaroid">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" style="width:100%">
<div class="container">
<p>Northern Lights in Norway</p>
</div>
</div>
</body>
</html>响应式图片相册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2 style="text-align:center">响应式图片相册</h2>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<h4>重置浏览器大小查看效果</h4>
</div>
</body>
</html>图片 Modal(模态)
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示
neue Datei
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Paris" width="400" height="300">
</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)