masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

imej CSS

Imej CSS

Bab ini akan memperkenalkan cara menggunakan CSS untuk susun atur imej.

Imej bulat

<!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>

Imej lakaran kecil

我们使用 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>

Responsif Responsif imej

Imej responsif akan menyesuaikan diri secara automatik pada skrin pelbagai saiz.

Dalam contoh, anda boleh menyemak kesannya dengan menetapkan semula saiz penyemak imbas:

<!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>

Gambar gaya kad

<!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>

Album Gambar Responsif

<!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 Gambar (modal)

Contoh ini menunjukkan cara menggabungkan CSS dan JavaScript untuk memaparkan gambar bersama-sama.

Pertama, kami menggunakan CSS untuk mencipta tetingkap modal (dialog), yang disembunyikan secara lalai.

Kemudian, kami menggunakan JavaScript untuk memaparkan tetingkap modal Apabila kami mengklik pada imej, imej akan dipaparkan dalam tetingkap pop timbul


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492970 permainan