企业网站综合布局实战4-5 企业网站页码制作【练习】@慕课网原创_慕课网

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
.page{
    height:40px;
    margin-top:10px;
    text-align:center;
}
.page a{
    display:inline-block;
    border:1px solid #E8E8E8;
    text-decoration:none;
    padding:5px 10px;
    margin:1px;
}
.page a:link, .page a:visited{
    color:#000;
}
.page a:hover, .page a:active{
    color:#FFF;
    background:red;
}

</style>
</head>

<body>
<!--在此制作页码的基本结构-->
<div class="page">
    <a href="#">首页</a>
    <a href="#">&lt</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">...</a>
    <a href="#">&gt</a>
    <a href="#">末页</a>
</div>

</body>
</html>