Rumah  >  Artikel  >  hujung hadapan web  >  网站的分页思路

网站的分页思路

php中世界最好的语言
php中世界最好的语言asal
2018-03-12 16:41:101166semak imbas

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

在制作网站时,很多分页都是采用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>

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

相关阅读:

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

JS实现贝叶斯分类器

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

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

Atas ialah kandungan terperinci 网站的分页思路. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn