Pure.CSS教程:图片

Pure.CSS提供选项以使用纯图像作为主要类以响应方式显示图像。

序号类名和描述
1个纯img表示没有任何边框的基本样式图像。图像会随着内容保持正确的比例而增大和缩小。

例子

purecss_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Images Demo</h2>
      <hr/> 
      <div class = "pure-g">	
	  
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
         </div>
		 
      </div>
   </body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/purecss/2250.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月2日 上午10:40
下一篇 2021年4月2日 上午10:56

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注