专栏首页佛系编程人div+css | 底部 分页框 布局

div+css | 底部 分页框 布局

知识学而不用,那仅仅是知识,是别人的智慧。运用知识,融汇贯通才能生发出自己的智慧。你说是还是不是?接下来我将会分享我所学的给大家作为参考,以下是本次实现的效果图,使用的div+css布局,这里默认有html 和 css 基础。

在开始写代码之前,我们先从外到内的顺序对着图分析一下:

  • 首先最外边的框我们使用列表ul 标签 来实现
  • 内部的框自然是使用 li 标签 来实现,不过 li 是块元素,不能显示在一行,所以要将其转换为行内元素,使用display:inline-block 来实现一行显示
  • 要注意小框内的文字除了...其余都是链接,所以要使用a标签来实现,但a标签是行内元素,不能设置宽高,所以要转化为块元素。

通过以上的分析会不会觉得实现起来更加容易呢?好,现在开始编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页练习</title>
    <style>
.box {               
         width:602px;
          height:42px;
          border: 1px solid #000;
          box-sizing:border-box;
          margin:50px auto 0;
          list-style: none;
          padding:0px;
          font-size:0px;
          text-align:center;
      }
      .box li {
          height:26px;
          margin:7px 6px 0px;
          font-size:12px;
          display:inline-block;
      }
      .box li a {
          display:block;
          height:26px;
          background-color: gold;
          color:#000;
          font:12px/26px 'Microsoft Yahei';
          text-decoration:none;
          padding:0px 7px;
      }
      .box li a:hover {
          color:red;
          background-color: wheat;
      }
</style>
</head>
<body>
    <ul class="box">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>...</span></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</body>
</html>

常见的文本样式:

代码已完成,此刻的你是否有一种立即尝试的冲动~~那么抓紧动手趴。

本文分享自微信公众号 - 佛系编程人(py520llj),作者:佛系小卢

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这些HTML标签你知道吗?

    包含有序列表 <ol></ol> and 无序列表 <ul></ul>,列表项由<li></li>显示,其中有序列表的列表项以数字开头,无序列表的列表项...

    佛系编程人
  • 一键下载电影

    学编程是为啥?偷懒呗~有时候去豆瓣看到比较感兴趣的或者想看朋友文字推荐的电影,就得打开电影网站获取电影的下载链接,然后用迅雷下载观看,我觉得挺麻烦的。当然要是在...

    佛系编程人
  • 算法系列 | 快速排序

    根据快排的基本思想,可知快排过程中需要有递归操作,因此我们需要自定义一个函数qsort()用于包装代码

    佛系编程人
  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺
  • 作业-原生js完成轮播图与悬停

    代码亮点:增加图片时,你只需要再加一个li就可以了。不需要改动其他任何代码。

    乐心湖
  • 0行JS,30行css搞定导航栏下划线跟随效果

    在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?

    Javanx
  • 从零开始学 Web 之 移动Web(四)实现JD分类页面

    如下面的结构:大盒子1和大盒子2分为上下结构,小盒子3和小盒子4在大盒子2的内部,分为左右结构。

    Daotin
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • 获取元素

    例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,再对其进行操作。

    星辰_大海
  • 3.列表-HTML基础

    到现在为止,我们学习了很多标签,但是由于不熟悉标签的语义化,有时我们可能会用别的标签代替另一个标签,从而实现相同的效果,但这是一种错误的思想。

    见贤思齊

扫码关注云+社区

领取腾讯云代金券