zoukankan      html  css  js  c++  java
  • L1--直角分页标签制作

    介绍

     直角分页页码制作

    制作流程

    • 静态结构页面制作
    <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="#">199</a> 
      <a href="#">200</a> 
      <a href="#">&gt;</a>
    </div>

    效果:

    <1 2 3 4 5 6 7 ... 199 200 >

    • 添加css样式
    .page-normal{
       text-align: center;
       color: #ff6500;
       font-size: 0;
    }
    .page-normal a,.page-normal span,.page-normal .page-current,.page-normal .page-prev {
       font-size: 18px;
       margin-left:10px;
       padding: 5px 7px;
    }
    .page-normal a {
       border: 1px solid #ff9600;
       color: #ff6500;
       text-decoration: none;
       cursor: pointer;
    }
    .page-normal a:hover {
       border: 1px solid #ff6500;
       background: #ffbe94;
    }
    .page-normal .page-current {
       border: 1px solid #ff6500;
       color: #ff6500;
       background: #ffbe94;;
    }
    .page-normal .page-prev {
       border: 1px solid #ffe3c6;
       color: ffe3c6;
    }

    效果:

    < 1 2 3 4 5 6 7 ... 199 200 >

    注意问题

    • 使用什么标签来制作分页页码
    <a>标签 、<span>标签、 <div>标签皆可以
    • 使用html实体标签输入"<",">"
    • 内联元素设置居中(设置其所在容器的text-align:center即可)
    • 修复行内元素之间间隔bug问题
      • 产生原因:换行符,tab(制表符),空格产生空隙
      • 解决方法:1、元素写成一行;2、设置font-size:0.
  • 相关阅读:
    猎户、双子、英仙
    第二卦,还叫我保持现状?
    昨晚的第三卦,就快万劫不复了
    明天要出去办事,看看情况
    luogu P3939 数颜色 |vector
    luogu P2701 [USACO5.3]巨大的牛棚Big Barn |动态规划
    luogu P2345 奶牛集会 |排序+树状数组
    luogu P4943 密室 |最短路
    luogu P4343 [SHOI2015]自动刷题机 |二分答案
    luogu P3110 [USACO14DEC]驮运Piggy Back |最短路
  • 原文地址:https://www.cnblogs.com/guDouMaoNing/p/4282677.html
Copyright © 2011-2022 走看看