实例详解html+css实现静态分页效果（附代码）

大家在浏览网站时有没有注意到网页上的分页效果，正在学习HTML和CSS的小伙伴，你会写静态html分页代码吗？这篇文章就结合实例给大家介绍HTML分页效果的制作步骤，最后将html分页代码分享给大家，供大家参考，感兴趣的小伙伴可以看看哦。

实现分页效果需要用到很多CSS中的属性，比如float浮动，hover伪类选择器，text-align居中等，如有不清楚的同学可以参考PHP中文网的相关文章，或者访问CSS视频教程，希望可以帮助到你。

实例详解html+CSS实现静态分页效果的步骤：

html部分

创建一个

，给其一个类名center，便于将分页居中；在

标签里面创建

标签和
• 标签，ul和li可以制作一个无序列表，因为我们需要点击跳转效果，所以需要在li标签中插入a标签，具体代码如下：

  <div class="center">
     <ul class="page">
         <li><a href="#">上一页</a></li>
         <li><a href="#">1</a></li>
         <li><a class="active" href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li><a href="#">6</a></li>
         <li><a href="#">7</a></li>
         <li><a href="#">8</a></li>
         <li><a href="#">下一页</a></li>
     </ul>
    </div>

  目前的效果是这样的：

  

  CSS部分

  由上图可见，目前的页面比较丑，现在我们需要用CSS进行美化。首先用float: left让无序列表左浮动，排列在一行，用text-decoration: none去除a标签默认的下划线，用 padding调整间距，给分页效果添加颜色和鼠标点击或悬停的效果，具体代码如下：

  .page {
         display: inline-block;
         padding: 0;
         margin: 0;
     }   
     .page li {display: inline;}  
     .page li a {
         color: black;
         float: left;
         padding: 8px 16px;
         text-decoration: none;
         transition: background-color .3s;
         border: 1px solid #ddd;
     }   
     .page .active {
         background-color: #4CAF50;
         color: white;
         border: 1px solid #4CAF50;
     }  
     .page a:hover:not(.active) {background-color: #ddd;}   
     .center {text-align: center;}

  效果如图所示：

  

  由图可见，我们的静态html分页效果已经实现了，当鼠标点击分页内容时，被激活的部分呈现绿色，当鼠标悬停在分页内容上会出现灰色，并让整个分页效果出现在页面的中间。

  以上给大家介绍了如何用HTML和CSS实现分页效果，比较详细，初学者可以自己动手尝试，看看你能不能制作出更加炫酷的分页效果，希望这篇文章对你有所帮助！

  【相关教程推荐】

  1. Html视频教程
  2. CSS3最新版参考手册
  3. bootstrap教程 

  Atas ialah kandungan terperinci 实例详解html+css实现静态分页效果（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7711

15

Tutorial Java

1640

14

Tutorial CakePHP

1394

52

Tutorial Laravel

1288

25

Tutorial PHP

1232

29

Tunjukkan Lagi