页码制作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.page-normal{
color: #ff6500;
text-align: center;
font-size: 0;
}
a{
border:1px solid #ff9600;
padding: 5px 7px;
text-decoration: none;
color: #ff6500;
font-size: 18px;
margin-left: 15px;
}
a:hover{
border:1px solid #ff6500;
padding: 5px 7px;
color: #ff6500;
background-color: #ffbe94;

}
.page-current{
border:1px solid #ff6500;
padding: 5px 7px;
color: #ff6500;
background-color: #ffbe94;
font-size: 18px;
margin-left: 15px;
}
.page-prev{
border:1px solid #ffe3cb;
color: #ffe3cb;
padding: 5px 7px;
font-size: 18px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="page-normal">
<span class="page-prev">&lt;</span>
<span class="page-current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">...</a>
<a href="#">199</a>
<a href="#">200</a>
<a href="#">&gt;</a>
</div>
</body>
</html>

时间: 2024-10-03 21:25:53

页码制作的相关文章

关于分页页码制作

昨晚看了一点关于SEO的东西,然后有提及些分页页码的注意事项,以前也没怎么细思过. 1. 这样的分页比如你想浏览第十页的内容,就要一直点击下一页才能找到--造成用户体验比较差,而且搜索引擎也不喜欢. 2. 这样的分页就好了点,如果想要访问第十页就可以直接转到第十页了,但是页面超多就难以全都铺开来呀. 3. 所以就有了这样的带着下拉列表的分页页码. 然后现在在看视频 1.用什么标签,用<a>还是用<span><div>? 我:应该是要用a的吧,可以在href属性中添加真实

直角页码制作

1.html结构 采用a标签(行内元素),因为当前页和"<"采用<span>单独分离 "<",< ">",> 2.行内元素之间的间隔BUG问题 产生原因:换行符,tab(空格.制表符产生空隙) 解决方法:1.元素写成一行 2.设置font-size:0; 3.padding:5px 7px;

用scrollTop制作一个滚动栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. 1 <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-co

L1--直角分页标签制作

介绍 直角分页页码制作 制作流程 静态结构页面制作 <div class="page-normal"> <span class="page-prev"><</span> <span class="page-current">1</span> <a href="#">2</a> <a href="#">3&l

信息滚动制作

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>向上无缝滚动</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 慕课网课

无间隙滚动制作

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta content="tex

案例:焦点图轮播特效

案例:焦点图轮播特效 案例:焦点图轮播特效 案例:固定边栏滚动特效 案例:固定边栏滚动特效 案例:弹出层效果 案例:弹出层效果 案例:分页页码制作 案例:分页页码制作案例:焦点图轮播特效,布布扣,bubuko.com

练习题:间歇性向上滚动

1 <!DOCTYPE html > 2 <html > 3 <head> 4 <meta charset=utf-8" /> 5 <title>新闻间歇性向上滚动</title> 6 <style> 7 body { 8 font-size: 12px; 9 line-height: 24px; 10 text-algin: center; /* 页面内容居中 */ 11 } 12 * { 13 margin:

信息滚动效果介绍

文字信息滚动是经常用到的效果!单独的marquee的html标签就已经实现了这种文字滚动的效果,但由于效果太单一,现在使用这种原始的效果已经很少了!下面我就介绍一些比较常见的文字滚动效果! 首先介绍的是原始的marquee标签实现的滚动的效果! 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans