W3.CSS提供了使用w3-image作为主类以美丽而有趣的方式显示图像的选项.
锶.不. | 类名&描述 |
---|---|
1 | w3-image 表示没有任何边框的基本样式图像. |
2 | w3-circle 在圆圈内显示图像 |
3 | w3-title 用于将文字放在图像上. |
4 | w3-card 将图片绘制为卡片. |
<html> <head> <title>The W3.CSS Images</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css"> </head> <body class = "w3-container"> <h2>Images Demo</h2> <hr/> <h3>Simple Image</h3> <div class = "w3-image"> <img src = "html5-mini-logo.jpg" alt = "html5"> </div> <h3>Circled Image</h3> <div class = "w3-image"> <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle"> </div> <h3>Text over image</h3> <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5"> <div class = "w3-title w3-text-black">Learn HTML5</div> </div> <h3>Image as a card</h3> <div class = "w3-image"> <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4"> </div> </body> </html>
验证结果.