masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > pertukaran kod_pengalaman gaya penomboran css

pertukaran kod_pengalaman gaya penomboran css

WBOY

Lepaskan： 2016-05-16 12:05:45

asal

1484 orang telah melayarinya

Yang pertama ialah kesan dari 360 seperti yang ditunjukkan dalam gambar: paging tanda biasa, keserasian yang baik. Gaya hijau

Kod demo:

[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Jenis Kedua: kesan biru tua, sudah tentu anda boleh mengubah suai warna itu sendiri.
Kesannya adalah seperti yang ditunjukkan:

Kod demo:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>gaya penomboran css 2</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px; font-family:Verdana;}
a { color:#333; text-decoration:none;}
ul { list-style:none;}
#pagelist {width:600px; margin:30px auto; padding:6px 0px; height:20px;}
#pagelist ul li { float:left; border:1px solid #5d9cdf; height:20px; line-height:20px; margin:0px 2px;}
#pagelist ul li a, .pageinfo { display:block; padding:0px 6px; background:#e6f2fe;}
.pageinfo  { color:#555;}
.current { background:#a9d2ff; display:block; padding:0px 6px; font-weight:bold;}
</style>

<div id="pagelist">
  <ul>
    <li><a href="#">Rumah</a></li>
    <li><a href="#">Halaman sebelumnya</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="current">3</li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Halaman seterusnya</a></li>
    <li><a href="#">Halaman terakhir</a></li>
    <li class="pageinfo">Halaman 3</li>
    <li class="pageinfo">8 muka surat kesemuanya</li>
  </ul>
</div>

Label berkaitan：

css 分页

sumber：php.cn

Artikel sebelumnya：Kod contoh penggunaan lanjutan Marquee_Pertukaran pengalaman Artikel seterusnya：Menggunakan CSS untuk membangunkan bar navigasi bergaya Bahagian 2_Pertukaran pengalaman

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

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1335

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

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

Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...

daripada 2024-04-06 20:45:26

0

2

386

Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...

daripada 2024-04-06 20:41:51

0

1

518

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