HTML 的靜態網頁分頁樣式
阿新 • • 發佈:2018-11-09
HTML 的靜態網頁分頁樣式
page.css程式碼如下:
#page-normal{ color:#ff9655; text-align:center; font-size:0px; } #page-normal a{ border:1px solid #ff9600; padding:5px 7px; color:#ff9655; text-decoration:none; font-size:15px; margin-right:10px; } #page-normal a:hover{ border:1px solid #ff9600; padding:5px 7px; background-color:#ffbe94; } #page-prev{ border:1px solid #ff9600; color:#ff9600; padding:5px 7px; font-size:15px; margin-right:10px; } #page-prev i{ margin-right:5px; } #page-next i{ margin-left:5px; } #page-current{ border:1px solid #ff9600; padding:5px 7px; background-color:#ffbe94; font-size:15px; margin-right:10px; } #page-ellipsis{ font-size:15px; margin-right:10px; }
main.html程式碼如下:
<head><link href="../css/page.css" rel="stylesheet" type="text/css"></head> <body> <div id="page-normal"> <span id="page-prev"><i></i>上一頁</span> <span id="page-current">1</span> <a herf="#">2</a> <a herf="#">3</a> <a herf="#">4</a> <a herf="#">5</a> <a herf="#">6</a> <a herf="#">7</a> <span id="page-ellipsis">...</span> <a herf="#">148</a> <a herf="#">149</a> <a herf="#">150</a> <a id="page-next" href="#">下一頁<i></i></a> </div> </body>