masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > CSS快速制作图片轮播的焦点_html/css_WEB-ITnose

CSS快速制作图片轮播的焦点_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:56:46
asal
1276 orang telah melayarinya

来源：http://www.ido321.com/858.html

 

效果图：

演示地址：http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/

代码：

   1: <!DOCTYPE html>
Salin selepas log masuk
   2: <html lang="en">
Salin selepas log masuk
   3: <head>
Salin selepas log masuk
   4:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
Salin selepas log masuk
   5:     <title>图片轮播的焦点</title>
Salin selepas log masuk
   6:     <style type="text/css">
Salin selepas log masuk
   7:         .div
Salin selepas log masuk
   8:         {
Salin selepas log masuk
   9:             width: 240px;
Salin selepas log masuk
  10:             position: absolute;
Salin selepas log masuk
  11:         }
Salin selepas log masuk
  12:         ul
Salin selepas log masuk
  13:         {
Salin selepas log masuk
  14:             list-style: none;
Salin selepas log masuk
  15:             margin-left: -50px;
Salin selepas log masuk
  16:         }
Salin selepas log masuk
  17:         ul li
Salin selepas log masuk
  18:         {
Salin selepas log masuk
  19:             width: 50px;
Salin selepas log masuk
  20:             height: 50px;
Salin selepas log masuk
  21:             margin-left: 10px;
Salin selepas log masuk
  22:             float: left;
Salin selepas log masuk
  23:             border: 1px solid #ccc;
Salin selepas log masuk
  24:             background-color: #ccc;
Salin selepas log masuk
  25:             border-radius:25px;
Salin selepas log masuk
  26:             text-align: center;
Salin selepas log masuk
  27:         }
Salin selepas log masuk
  28:         li:hover
Salin selepas log masuk
  29:         {
Salin selepas log masuk
  30:             background-color: red;
Salin selepas log masuk
  31:         }
Salin selepas log masuk
  32:         span
Salin selepas log masuk
  33:         {
Salin selepas log masuk
  34:             font-size: 30px;
Salin selepas log masuk
  35:             line-height: 50px;
Salin selepas log masuk
  36:         }
Salin selepas log masuk
  37:     </style>
Salin selepas log masuk
  38: </head>
Salin selepas log masuk
  39: <body>
Salin selepas log masuk
  40:     <div class="div">
Salin selepas log masuk
  41:         <ul>
Salin selepas log masuk
  42:             <li><span>1</span></li>
Salin selepas log masuk
  43:             <li><span>2</span></li>
Salin selepas log masuk
  44:             <li><span>3</span></li>
Salin selepas log masuk
  45:             <li><span>4</span></li>
Salin selepas log masuk
  46:         </ul>
Salin selepas log masuk
  47:     </div>
Salin selepas log masuk
  48: </body>
Salin selepas log masuk

 

Label berkaitan：
buat gambar cepat fokus karusel
sumber：php.cn
Artikel sebelumnya：loading 动画效果（收藏起来以后留着慢慢用）_html/css_WEB-ITnose Artikel seterusnya：:before和 :after_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Ungkapan biasa untuk memadankan perkataan Saya mempunyai skrip di mana saya cuba memadankan nama kerja baharu dengan nama kerja sedi...
daripada 2024-04-06 21:24:04
0
1
606
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...
daripada 2024-04-06 19:23:03
0
1
411
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan