为了账号安全,请及时绑定邮箱和手机立即绑定

分页页码制作

难度初级
时长 1小时 0分
学习人数
综合评分9.37
203人评价 查看评价
9.6 内容实用
9.5 简洁易懂
9.0 逻辑清晰
  • 鼠标悬停状态,:hover 行内元素中间有空隙 可以给他们的容器/父级加上样式font-size:0;然后给他们重新添加例font-size:18px; 再给他们自定义空隙margin-left:10px
    查看全部
  • 前页和当前页不需要a标签跳转,所以用span标签 前页“<”和后页“>”会和代码的括号重复,电脑不识别,可用&lt;和&gt;符号代替。
    查看全部
  • 行内元素间隔
    查看全部
  • 分页页码使用标签问题
    查看全部
  • 分页页码制作的四个注意的问题
    查看全部
  • 行内元素中间有空隙: 产生原因:换行符、tab、空格产生空隙 解决方法:元素写成一行;设置font-size:0
    查看全部
  • 注意4点: 1)使用什么标签来制作分页页码,a标签,span标签,div标签; 2)使用html实体标签输入“<”和“>”; 3)内联元素设置居中; 4)修复行内元素之间间隔bug问题;
    查看全部
  • 设置背景,要将行内样式转化为块状样式display:inline-block
    查看全部
  • CSS (下): .page-prev i { background-position: -67px -608px; margin-right: 5px; } .page-next i { background-position: -74px -608px; margin-left: 5px; }
    查看全部
  • CSS(限制一千个字 上): .page-normal { text-align: center; word-spacing: -4px; } .page-normal a, .page-normal .page-current, .page-normal .page-prev, .page-normal .page-next, .page-normal .ellipsis { padding: 5px 7px; margin-left: 10px; } .page-normal a { border: 1px solid #ff9600; color: #8e44ad; text-decoration: none; } .page-normal a:hover { background: #ffbe94; cursor: pointer; } .page-normal .page-prev:hover { cursor: not-allowed; } .page-normal .page-next:hover { background: #1eb449; cursor: pointer; } .page-normal .page-current { color: #ff6500; } .page-normal .page-prev, .page-normal .page-next, .page-normal .ellipsis { color: #ffe3c6; } .page-normal .page-prev, .page-normal .page-next { border: 1px solid #c0392b; } .page-normal .page-prev, .page-normal .page-next { color: #ccc; } .page-normal i { display: inline-block; background: url(../img/bg_hotsale.gif); width: 5px; height: 9px; }
    查看全部
  • HTML: <div class="page-normal"> <span class="page-prev"><i></i>上一页</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> <span class="ellipsis">...</span> <a href="#">199</a> <a href="#">200</a> <span class="page-next">下一页<i></i></span> </div>
    查看全部
  • html 特殊符号<span>&XXX</span>
    查看全部
  • 2、画实心圆的方法: 宽度和高度一致(正方形),然后四个角设置为高度或者宽度的1/2. <div class="circle"></div> .circle{ width:100px; height:100px; background-color:#cb18f8; border-radius:50px; } 效果:    总结: CSS3实现圆角的方式既优雅又方便,但是兼容性不够好,如果需要考虑旧版本的浏览器的话,可以考虑优雅降级的方式。开始提到的两种方式的优点是兼容性好,但不够优雅。
    查看全部
    1 采集 收起 来源:bug解决

    2018-03-22

  • border-radius属性其实可以分为四个其他的属性: 1 2 3 4 5 border-radius-top-left /*左上角*/ CSS3属性之圆角效果——border-radius属性 border-radius-top-right /*右上角*/ border-radius-bottom-right /*右下角*/ border-radius-bottom-left /*左下角*/ //提示:按顺时针方式
    查看全部
    0 采集 收起 来源:bug解决

    2017-07-12

  • 行内元素间隔的bug,及解决方法
    查看全部

举报

0/150
提交
取消
课程须知
您需要具备HTML、CSS样式基础知识。
老师告诉你能学到什么?
通过本课程的学习,我们可以学到以下技术: 1. 制作分页页码时的语义化 2. 行内标签居中 3. 使用css sprite 技术实现小icon插入

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!