当前位置:Gxlcms > JavaScript > 网站的分页思路

网站的分页思路

时间:2021-07-01 10:21:17 帮助过:2人阅读

这次给大家带来网站的分页思路,制作网站时的分页效果注意事项有哪些,下面就是实战案例,一起来看一下。

在制作网站时,很多分页都是采用li的显示为内嵌,但这样不利于定义背景,所以最好的办法是让li显示为块加浮动去解决,但这里有个问题,因为分页是不固定的,而又要让其始终居中,ul的宽度就无法去固定,所以按平时常用的margin或是text-align就不起作用了,想让分页始终居中,就要按以下的方法去定义。
1.文字居中定义
文字居中始终是要的,所以首先给予ul外层div一个text-align(文本对齐:居中),还可以给一个“溢位:隐藏(overflow: hidden;)”,当然也可以定义一下高和宽。
2.ul定义
ul不能定义宽度,我们只能给一个定位,类型为相对(position: relative),置入左为50%(left: 50%),当然也可以给一个浮动。请注意,ul千万不能用溢位:隐藏(overflow: hidden;),这样,部分li就无法显示。
3.li定义
li的定义跟ul差不多,宽度不固定,同样给一个定位,类型为相对(position: relative),置入右为50%(right: 50%),恰恰和ul相反,这样定义后li就可以无论分页多少始终居中了。

<!doctype html><html><head><meta charset="utf-8"><title>by eric zheng</title><style type="text/css">
    *{margin:0; padding: 0;}    ol{list-style: none;}    ol{        height: 32px;        border: solid 1px red;        position: absolute;        left: 50%;
    }    li{        position: relative;        left: -50%;        width: 30px;        height: 30px;        border: solid 1px #ccc;        text-align: center;        line-height: 30px;        font-size: 14px;        margin: 0 5px;        float: left;
    }</style></head><body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol></body></html>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

Python编写的通知栏脚本启动工具

JS实现贝叶斯分类器

H5的Canvas如何实现绘制音乐环形频谱图

如何使用js-xlsx之单元格样式

以上就是网站的分页思路的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行