在網站開發中，移動端分頁導航是不可缺少的一部分。可以通過CSS3的媒體查詢和一些特定的樣式來實現移動端分頁導航的效果。本文將介紹一個簡單的CSS3分頁導航源碼。

1
2
3
4
5
Next

上面的HTML代碼是一個基本的分頁導航結構。現在，我們需要用CSS3樣式來實現移動端分頁導航的效果。我們可以使用@media查詢和flexbox布局來實現，代碼如下：

/* CSS3源碼 */
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin-top: 20px;
}
.pagination li {
margin: 0 10px;
}
.pagination a,
.pagination span {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-radius: 4px;
}
.pagination a:hover {
background: #ccc;
}
/* 移動端樣式 */
@media (max-width: 768px) {
.pagination {
flex-wrap: wrap;
margin: 0;
}
.pagination li {
flex-grow: 1;
margin: 0;
margin-bottom: 10px;
}
}

以上代碼中，我們首先對.pagination進行了樣式設置，使用flexbox布局來居中，去掉了列表樣式。然后我們針對分頁導航的每個條目li，設置了一個margin值，使其在橫向排列的時候，有一定的間隔。

接下來是@media查詢的部分，當屏幕寬度小于或等于768px的時候，我們將.pagination進行了一些重新排列。使用了flex-wrap:wrap屬性讓.pagination的子元素可以換行，并設置了margin:0;來去掉原來的間隔。然后我們針對每個子元素li進行了更詳細的調整，使用了flex-grow:1;來讓每一個子元素盡可能的占據空間，讓分頁導航在移動端更加友好。

以上就是簡單的移動端CSS3分頁導航源碼，如果需要更復雜的效果，可以在此基礎上進行修改。