masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
cari
logo
  • Log masuk
  • Daftar
Penetapan semula kata laluan berjaya

Ikuti proiects vou berminat dengan andi aet terbaru mengenai mereka

penomboran CSS

Dalam bahagian ini kami akan memperkenalkan cara membuat contoh halaman dengan menggunakan CSS3.

Mari kita mulakan dengan paging yang mudah: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
</style>
</head>
<body>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Gaya mouseover: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Mouseover dengan bucu bulat Gaya berhenti: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color:red;
    color: white;
    border-radius: 25px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Gaya pemisah halaman dengan jidar: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 2px solid red;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Gaya pecah sempadan dengan bucu bulat: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.pagination li:first-child a {
    border-top-left-radius:25px;
    border-bottom-left-radius: 25px;
}
.pagination li:last-child a {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
ul.pagination li a.active {
    background-color: gray;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

Penomboran dengan jurang: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 10px;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Tetapkan saiz fon: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 30px;
}
ul.pagination li a.active {
    background-color: pink;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<ul class="pagination">
  <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="#">»</a></li>
</ul>
</body>
</html>

Berpusat :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<div class="center">
  <ul class="pagination">
    <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="#">»</a></li>
  </ul>
</div>
</body>
</html>

Gaya navigasi halaman: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
         body {
        font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
      }
      .pager {
        list-style: none outside none;
        margin: 20px;
        padding: 0;
        text-align: center;
      }
      .pager li {
        display: inline-block;
        margin: 0;
        padding: 0;
      }
      * html .pager li   { display: inline; }  
      *+html .pager  li   { display: inline; }
      .pager li.pager-current,
      .pager li a {
      -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
        border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      background: #232B30; /* old browsers */
      background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
      -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
      -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */ 
      box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
        color: #FFFFFF;
        font-size: 12px;
        margin-left: 10px;
        padding: 3px 12px;
      -webkit-transition: all 0.5s ease-in 0s;
        -moz-transition: all 0.5s ease-in 0s;
        -o-transition: all 0.5s ease-in 0s;
        transition: all 0.5s ease-in 0s;
      text-decoration: none;
      zoom:1;
      }
      .pager li.pager-current {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      color: #d54e21;
      font-weight: bold;
      }
      .pager li a:hover {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      background: #4C5A64; /* old browsers */
      background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
      color: #d54e21;
      }
</style>
</head>
<body>
 <ul class="pager">
        <li class="pager-first first">
          <a class="active" title="到第一页" href="/css3">« 首页</a>
        </li>
        <li class="pager-previous">
          <a class="active" title="返回上一个页面" href="/css3?page=2">‹ 上一页</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 1 页" href="/css3">1</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 2 页" href="/css3?page=1">2</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 3 页" href="/css3?page=2">3</a>
        </li>
        <li class="pager-current">4</li>
        <li class="pager-item">
          <a class="active" title="到第 5 页" href="/css3?page=4">5</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 6 页" href="/css3?page=5">6</a>
        </li>
        <li class="pager-next">
          <a class="active" title="去下一个页面" href="/css3?page=4">下一页 ›</a>
        </li>
        <li class="pager-last last">
          <a class="active" title="到最后一页" href="/css3?page=5">尾页 »</a>
        </li>
      </ul>
</body>
</html>



Meneruskan pembelajaran
fail baharu
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #pagination-clean li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-clean a { border-right:solid 1px #DEDEDE; margin-right:2px; } #pagination-clean .previous-off, #pagination-clean .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-clean .next a,#pagination-clean previous a { border:none; font-weight:bold; } #pagination-clean .active { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; } #pagination-clean a:link,#pagination-clean a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; } #pagination-clean a:hover { text-decoration:none; } #pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; } #pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; } #pagination-digg .next a,#pagination-digg .previous a { font-weight:bold; } #pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; } #pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-digg a:hover { border:solid 1px #0e509e; } #pagination-flickr li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-flickr a { border:solid 1px #DDDDDD; margin-right:2px; } #pagination-flickr .previous-off,#pagination-flickr .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-flickr .next a,#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; } #pagination-flickr .active { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; } #pagination-flickr a:link, #pagination-flickr a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-flickr a:hover { border:solid 1px #000; background:#0063DC; color:#FFF; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } h2{ clear:both; border:0; margin:0; padding-top:30px; font-size:13px; } p{ border:0; margin:0; padding:0; padding-bottom:20px; } ul{ border:0; margin:0; padding:0; } </style> </head> <body> <h2>清新极简风格</h2> <p>A simple and clean pagination style</p> <ul id="pagination-clean"> <li class="previous-off">« Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>高亮按钮风格</h2> <p>A simple pagination style Digg-like</p> <ul id="pagination-digg"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>Flickr网站风格</h2> <p>A simple pagination style Flickr-like</p> <ul id="pagination-flickr"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> </body> </html>
Tetapkan Semula Kod
Operasi automatik
serahkan
logo
Pratonton Clear
Bahagian sebelumnya
bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Percuma Cepat bermain dengan tutorial CSS3
Percuma Manual pembangunan HTML
Percuma Manual teknikal XML
Percuma Manual Tutorial Permulaan SQL
Percuma Bermula dengan Perl
Percuma Dokumen tutorial dalam talian DTD
Percuma Tutorial pengenalan asas Python
Percuma Tutorial asas Servlet
Percuma Manual penuh HTML5
Percuma manual rujukan dalam talian jsp
Percuma Tutorial XPath
Percuma Tutorial manual terbaru MySQL
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
496453
Mari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP Pengenalan pantas kepada pembangunan bahagian hadapan web Pembangunan Tianlongbabu praktikal skala besar bagi rangka kerja MVC versi Mini meniru laman web ensiklopedia perkara yang memalukan Bermula dengan Pembangunan Praktikal PHP: Penciptaan PHP Pantas [Forum Perniagaan Kecil] Pengesahan log masuk dan papan mesej klasik Pengumpulan pengetahuan rangkaian komputer Mula Pantas Node.JS Versi Penuh Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal] Tulis rangka kerja PHP MVC anda sendiri (40 bab secara mendalam/butiran besar/mesti dibaca untuk pemula untuk maju)