2019.12.5-网站首页及翻页实例（用的是行内块元素布局）代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>翻页实例</title>
</head>
<style type="text/css">
.menu{
width: 958px;
height: 40px;
border:1px solid #000;
margin:50px auto 0;
padding: 0;
list-style: none; /* 去掉前面点*/
text-align: center; /* 标题居中 */
line-height: 40px; /* 垂直居中 */
font-size: 0;
}

.menu li{
display: inline-block; /* 转换为行内块元素 */
font-size: 14px;
}

.menu .line{
color: #333;
margin: 0 20px;
}

.menu li a{
font-family: ‘Microsoft Yahei‘;
color: #333;
text-decoration: none; /* 去掉下划线*/
}

.menu li a:hover{
color: red;
}

.pagenation{
width: 958px;
height: 40px;
border:1px solid #000;
margin:50px auto 0;
font-size: 0;
text-align: center;
}

.pagenation a{
display: inline-block; /* 转换成行内块元素*/
padding: 5px 10px;
background-color: gold;
font-size:12px;
font-family: ‘Microsoft Yahei‘;
text-decoration: none;
margin: 8px 5px;
color: #333;
}

.pagenation a:hover{
background-color: red;
color: #fff;

}

.pagenation span{
display: inline-block;
font-size: 12px;
}

</style>
<body>

</body>
</html>

原文地址：https://www.cnblogs.com/lishuide/p/11992709.html

时间： 2024-11-05 19:31:05

2019.12.5-网站首页及翻页实例（用的是行内块元素布局）代码

2019.12.5-网站首页及翻页实例（用的是行内块元素布局）代码的相关文章

2019.12.5-网站首页代码（浮动）

Atitit.列表页面and条件查询的实现最佳实践(2)------翻页分页控件的实现java .net php

bootstrap(5)分页，翻页，徽章效果

使用Python在自己博客上进行自动翻页

Android自己定义控件实战——仿多看阅读平移翻页

移动web：翻页场景动画

【jqGrid】翻页获取选中的值

Android自定义控件实战——仿多看阅读平移翻页

织梦DEDECMS网站首页如何实现分页翻页