CSS 练习翻页效果

最新推荐文章于 2024-10-12 13:41:57 发布

原创最新推荐文章于 2024-10-12 13:41:57 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS创建翻页效果。首先通过HTML结构布局，然后利用CSS去除默认样式，设置页面元素居中对齐，将页码转换为内联块元素并进行样式调整，包括字体、下划线、高度和内边距等，以此达到翻页视觉效果。

例子一：翻页样式
在这里插入图片描述
制作思路:

创建结构：ul.pagenation>(li>a{$})*11，按tab键快速建立。再逐个修改内容。
去掉ul原本样式:list-style: none;,设定外面盒子的样式

.pagenation{
			list-style: none;
			padding: 0;
			width: 600px;
			height: 40px;
			border: 1px solid black;
			margin: 50px auto 0;
			text-align: center;

为了让页码横向排列：转化为内联块样式，并在父级设定：text-align: center;使其居中。
设置页码外面的盒子，也就是li的样式：高度，左右间距，转化为内联块元素。使得内联块垂直居中使用margin而不要用line-height。

.pagenation li{
			/* width: ; */
			height:26px;
			margin: 7px 5px 0;
			display: inline-block;

设置页码的格式：字体/去掉下划线/转化为内联块/设置高度和line-height，padding,background

.pagenation li a{
			text-decoration: none;
			font-size: 12px;
			font-family: 'Microsoft Yahei';
			color: black;
			display: inline-block;
			height: 26px;
			line-height: 26px;
			padding: 0 10px;
			background-color: gold;