国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

  3. 





    
    
    
        
                    
                
    
    

    



    
	
    
			
			
    
				
    
					
					
					
					
					
					
				
    
				
			
    
			
	
    
	

    

    
	
    
		
	
    
		
    CSS 分頁(yè)
    
		
    本章節(jié)我們將為大家介紹如何通過(guò)使用 CSS 來(lái)創(chuàng)建分頁(yè)的實(shí)例。
    簡(jiǎn)單分頁(yè)
    如果你的網(wǎng)站有很多個(gè)頁(yè)面，你就需要使用分頁(yè)來(lái)為每個(gè)頁(yè)面做導(dǎo)航。
    以下實(shí)例演示了如何使用 HTML 和 CSS 來(lái)創(chuàng)建分頁(yè)：
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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>

<h2>簡(jiǎn)單的分頁(yè)</h2>
<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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式
    如果點(diǎn)擊當(dāng)前頁(yè)，可以使用 .active 來(lái)設(shè)置當(dāng)期頁(yè)樣式，鼠標(biāo)懸?？梢允褂?:hover選擇器來(lái)修改樣式：
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式</h2>
<p>移動(dòng)鼠標(biāo)的分頁(yè)的數(shù)字上。</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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式</h2>
<p>移動(dòng)鼠標(biāo)的分頁(yè)的數(shù)字上。</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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    圓角樣式
    可以使用 border-radius 屬性為選中的頁(yè)碼來(lái)添加圓角樣式:
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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: #4CAF50;
    color: white;
    border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>圓角樣式</h2>
<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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    鼠標(biāo)懸停過(guò)渡效果
    我們可以通過(guò)添加 transition 屬性來(lái)為鼠標(biāo)移動(dòng)到頁(yè)碼上時(shí)添加過(guò)渡效果 to the page links to create a transition effect on hover:
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>鼠標(biāo)懸停過(guò)渡效果</h2>
<p>鼠標(biāo)移動(dòng)到分頁(yè)碼上。</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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    帶邊框分頁(yè)
    我們可以使用 border 屬性來(lái)添加帶邊框分頁(yè):
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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;}
</style>
</head>
<body>

<h2>帶邊框分頁(yè)</h2>
<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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    圓角邊框
    提示: 在第一個(gè)分頁(yè)鏈接和最后一個(gè)分頁(yè)鏈接添加圓角：
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>圓角邊框</h2>
<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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    分頁(yè)間隔
    提示: 你可以使用 margin 屬性來(lái)為每個(gè)頁(yè)碼直接添加空格：
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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 4px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>分頁(yè)間隔</h2>
<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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    分頁(yè)字體大小
    我們可以使用 font-size 屬性來(lái)設(shè)置分頁(yè)的字體大小:
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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: 22px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>分頁(yè)字體大小</h2>
<p>我們可以使用 font-size 屬性來(lái)設(shè)置分頁(yè)的字體大小:</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>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    居中分頁(yè)
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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>

<h2>分頁(yè)居中</h2>

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

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
    面包屑導(dǎo)航
    • 首頁(yè)
    • 前端
    • HTML 教程
    • HTML 段落
    另外一種導(dǎo)航為面包屑導(dǎo)航，實(shí)例如下：
    實(shí)例
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>面包屑導(dǎo)航</h2>
<ul class="breadcrumb">
  <li><a href="#">首頁(yè) </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>

</body>
</html>

    運(yùn)行實(shí)例 ?
    點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例