仔细看看上面的分页条，其实也不是那么复杂，几个分页按钮加上分页的信息，于是很快就模仿了一个类似的分页栏，先上图：
界面实现起来还是比较容易的，主要的是按钮的 *** 作和分页信息的显示，我们需要定义几个变量：currentPage（当前页）、countPerPage（每页的条数）、pageCount（页数）、count（总数），定义了这几个变量就可以将上图中分页的信息表示出来
跳转的话随便加个超链接加个网页就好<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*浏览器默认设置*/
*{
padding: 0margin: 0font-size: 12pxfont-family: Verdana,Arial,'宋体'
}
a{
text-decoration: nonecolor: black
}
a:hover{
text-decoration: underline
}
img{
border: 1px solid #e7e7e7
}
li{
list-style-type: none
}
/*设置显示主窗体*/
.wrap{
width: 1129pxmargin: 0 auto
border-left: 2px solid #e7e7e7
border-right: 2px solid #e7e7e7
text-align:left
}
.content,.head,.footer{
margin-left: 12px
margin-right: 12px
}
/*设置顶部*/
.head{
text-align: center
}
.header ul{
width: 1100px
position: relative
height: 50px
}
.header ul li{
position:absolute
height: 50px
top:0
}
.header ul li a{
font-size: 14px
line-height: 50px
}
.header ul li a:hover{
border-bottom: 3px solid #cc0000
text-decoration: none
}
#nav1{
left: 0width: 155px
}
#nav2{
left: 155pxwidth: 157px
}
#nav3{
left: 312pxwidth: 167px
}
#nav4{
left: 479pxwidth: 158px
}
#nav5{
left: 637pxwidth: 101px
}
#nav6{
left: 738pxwidth: 185px
}
#nav7{
left: 923pxwidth: 177px
}
/*设置正文左部*/
.contentleft{
float: left
width: 180px
background-color: #f9f9f9
}
.contentleft h2{
font-size: 20px
text-align: center
background-color: #bebebe
color: white
font-weight: normal
height: 50px
line-height: 50px
}
#optional{
margin-top: 10px
}
.contentleft ul li{
padding-left: 5px
}
.contentleft h3{
margin-top: 10px
margin-bottom: 5px
}
/*设置正文右半部分*/
.contentright{
float: left
width: 720px
margin: 15px 0 0 10px
}
/*清除浮动*/
.content{
width: 100%
overflow: hidden
}
.htmlcourse{
font-size: 25px
border-bottom: 1px solid #aaa
}
/*设置侧边栏*/
.contentprofile{
float: left
width: 180px
margin-left: 10px
overflow: hidden
}
.chs a:hover{
color: red
}
.ch,.chs{
border-bottom: 2px solid #aaa
line-height: 30px
}
.contentright h2{
line-height: 50px
}
.names{
background-color: #f88e8b
color: white
width: 100px
height: 30px
margin-bottom: 10px
}
.name{
margin-bottom: 10px
margin-left: 20px
}
/*设置页底*/
.footer{
background-color: #b6b6b6
margin-top: 30px
margin-bottom: 10px
}
</style>
<title>HTML教程</title>
</head>
<body>
<div class="wrap">
<div class="head">
<head>
<img src="images/header.png" alt="这里是w3school!">
</head>
<nav>
<div class="header">
<ul>
<li id="nav1"><a href="#" title="HTML系列教程">HTML/CSS</a></li>
<li id="nav2"><a href="#" title="浏览器脚本教程">JavaScript</a></li>
<li id="nav3"><a href="#" title="服务器脚本教程">Server Side</a></li>
<li id="nav4"><a href="#" title="ASP.NET教程">ASP.NET</a></li>
<li id="nav5"><a href="#" title="XML系列教程">XML</a></li>
<li id="nav6"><a href="#" title="Web Services 系列教程">Web Services</a></li>
<li id="nav7"><a href="#" title="建站手册">Web Building</a></li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="contentleft">
<h2>课程表</h2>
<ul><h3>HTML 基础教程</h3>
<li><a href="#">HTML简介</a></li>
<li><a href="#">HTML基础</a></li>
<li><a href="#">HTML元素</a></li>
</ul>
<ul><h3>HTML 高级教程</h3>
<li><a href="#">HTML头部</a></li>
<li><a href="#">HTML脚本</a></li>
<li><a href="#">HTML实体</a></li>
</ul>
<ul><h3>HTML 媒体</h3>
<li><a href="#">HTML媒体</a></li>
<li><a href="#">HTML对象</a></li>
<li><a href="#">HTML音频</a></li>
</ul>
<ul><h3>HTML XHTML</h3>
<li><a href="#">XHTML简介</a></li>
<li><a href="#">XHTML元素</a></li>
<li><a href="#">XHTML属性</a></li>
</ul>
<ul><h3>HTML5</h3>
<li><a href="#">HTML5教程</a></li>
<li><a href="#">HTML5参考手册</a></li>
</ul>
</li>
<h2 id="optional">选修课</h2>
<ul><h3>建站手册</h3>
<li><a href="#">万维网联盟（W3C）</a></li>
<li><a href="#">浏览器信息</a></li>
<li><a href="#">语义网</a></li>
</ul>
</li>
</div>
<div class="contentright">
<article>
<div class="htmlcourse">HTML教程</div>
<div class="ch">
<input type="button" name="name" class="name" value="上一节">
<input type="button" name="name" class="name" value="下一节">
</div>
<div class="chs">
<h2>HTML 教程</h2>
在本教程中，你将学习如何使用 HTML 来创建站点。<br>
HTML 很容易学习！你会喜欢它的！<br>
<a href="#">现在开始学习HTML</a>
</div>
<div class="chs">
<h2>HTML 实例</h2>
学习 100 个实例！使用我们的编辑器，你可以编辑 HTML，然后点击测试按钮来查看结果。<br>
<input type="button" class="names" name="names" value="亲自来试一试吧">
</div>
<div class="chs">
<h2>HTML 测验</h2>
在 W3School 测试你的 HTML 技能！<br>
<a href="#">开始 HTML 测验！</a>
</div>
<div class="chs">
<h2>HTML 参考手册</h2>
在 W3School，我们提供完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。<br>
<a href="#">HTML 4.01 参考手册</a>
</div>
<div class="ch">
<input type="button" name="name" class="name" value="上一节">
<input type="button" name="name" class="name" value="下一节">
</div>
</article>
</div>
<div class="contentprofile">
<img src="./images/profile.png" alt="我是侧边栏">
</div>
</div>
<footer>
<div class="footer">
<p>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。</p>
<p>当使用本站时，代表您已接受了本站的<a href="#" title="关于使用">使用条款</a>和<a href="#"title="关于隐私">隐私条款</a>。版权所有，保留一切权利。 赞助商：<a href="#" title="上海赢科投资有限公司">上海赢科投资有限公司</a>。 蒙ICP备06004630号</p>
</div>
</footer>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）