关于分页页码制作

昨晚看了一点关于SEO的东西,然后有提及些分页页码的注意事项,以前也没怎么细思过。

1.

这样的分页比如你想浏览第十页的内容,就要一直点击下一页才能找到--造成用户体验比较差,而且搜索引擎也不喜欢。

2.

这样的分页就好了点,如果想要访问第十页就可以直接转到第十页了,但是页面超多就难以全都铺开来呀。

3.

所以就有了这样的带着下拉列表的分页页码。

然后现在在看视频

1.用什么标签,用<a>还是用<span><div>?

我:应该是要用a的吧,可以在href属性中添加真实链接,在禁用js或者不支持js时可以平稳退化,然后比较具有语义化。

老师:当前页为1时,那么上页和1应该用span。(但是当页面跳转到第二页的时候又要将第二页该为span标签不是很麻烦么,用class是不是比较方便?)

2.实体标签输入“<”“>”表示上页和下页?

我:“<”--&lt;  “>”--&gt;

3.内联元素设置居中?

我:居中?不是用text-align:center;么?

  首先,a标签是内联元素,所以他根本不支持设置宽度啊,顶多padding,这样不是本身就居中的么。

老师:给父级设置text-align:center;哦,老师说的是整个分页页码在页面中居中。

4.修复行内元素之间间隔bug?

我:喵喵喵,有bug吗?什么bug?只知道换行自带间距。那样的话不要换行不就可以了。

老师:就是这个bug。

  1.只有内联元素有这种bug;

  2.造成的原因:换行,tab,空格

  3.解决办法:不换行,但是代码看着混乱;给父级设置font-size:0,再单独给文本设置字体大小。

就这样吧,想看剧可是周三没有什么更新的,好冷想喝奶茶呢!

时间: 2024-07-29 17:31:25

关于分页页码制作的相关文章

L1--直角分页标签制作

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

Web分页页码的制作

效果图: HTML代码 <!doctype html><html><head> <meta charset="utf-8"> <title>分页页码</title> <link rel="stylesheet" type="text/css" href="style.css" ></head> <body ><di

【超酷超实用】CSS3可滑动跳转的分页插件制作教程

原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷,很适合一些个性化的个人网站使用,当然,这款分页插件也适合ajax翻页,效果都挺不错的.先来看看效果图: 怎么样,还挺酷的吧. 当然你也可以在这里查看插件的DEMO演示. 接下来我们来分享一下源码的实现思路,这里用到了jQuery UI框架,这么酷的滑杆是靠它实现的,不然,写的累死.. 首先是HTM

js分页页码算法

function get_hs_page(cur_page, total_page) { var result = ""; for(var i = 1; i <= total_page; i++) { if(i == 2 && cur_page - 6 > 1) { i = cur_page - 6; }else if(i == cur_page + 6 && cur_page + 6 < total_page) { i = total

dede仿站栏目列表页分页页码链接问题

最近在学习dede仿站,在仿站过程中,出现了栏目列表页分页页码链接问题,网上找不到解决的方法.花了30大洋注册了dede官方论坛,希望可以得到解决.问题就是:不管栏目是顶级栏目还是二级栏目,点击页码链接出错,如点击第2页,本来应当是这样的:…/news/list_1_2.html, 实际情况是这样的:…/list_1_2.html分页调用标签:{dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize

设置分页页码

/// <summary> /// 设置分页页码 /// </summary> /// <param name="pageNum">当前页码</param> /// <param name="pageCount">总页数</param> /// <param name="sideNum">每页显示条数</param> /// <param nam

一个分页页码示例

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分页页码--加入小图标</title> <style type="text/css"> .page-icon{ margin:20px 0 0 0; font-size:0;/*

转载:分页原理+分页代码+分页类制作

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理:       所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?       当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特

分页原理+分页代码+分页类制作

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理:       所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?       当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特