CSS/HTML5简单大方的蓝色CSS分页样式

固定宽度实现页面自适应居中

    • 说明
    • 部分css代码解释
    • Index代码
    • 演示图

说明

演示效果分辨率为1980x1080分辨率效果
width设置为1336px使在分辨率为1366x720的浏览器不出现左右移动框
使用margin来控制浮动

部分css代码解释

#model14 ul {
			  padding-inline-start: 0 !important;
			 /* 设置ul的开头距离为零必面设置自动居中时影响美观  */
			}
			#model14 li:first-child {
					margin-left: 0;
				/*	li:first-child可设置第一个li元素的样式,第二个第三个同。 */
				}

Index代码


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			a{
				text-decoration: none;
			}
			#arrowup-center {
			  display: table;
			  height: 16px;
			  margin: 0 auto;
			}
			
			#model14 ul {
			  padding-inline-start: 0 !important;
			}
			#model14 li:first-child {
					margin-left: 0;
					}
			#model14 {
			  float: left;
			  width: 1100px;
			  text-align: center;
			  margin-top: 500px;
			}
			
			#model14 li {
			  position: relative;
			  float: left;
			  list-style: none;
			  margin-left: 31px;
				
			
			}
			
			#model14 li.active a {
			  font-size: 16px;
			  color: #2699fb;
			}
			
			#model14 li a {
			  font-size: 16px;
			  color: #bce0fd;
			}
			
			
			li a img {
			  margin-top: -3px;
			}
			
		style>
	head>
	

	<body>

		<div id="model14">
			<div>
				<ul id="arrowup-center">
					<li class="arrowup">
						<a href="#" >
							<img src="翻页-上一页.png" alt="">
						a>
					li>
					<li ><a href="#" >1a>li>
					<li ><a href="#" >2a>li>
					<li ><a href="#" >3a>li>
					<li ><a href="#" >4a>li>
					<li ><a href="#" >5a>li>
					<li ><a href="#" >6a>li>
					<li ><a href="#" >7a>li>
					<li ><a href="#" >8a>li>
					<li ><a href="#" >9a>li>
					<li ><a href="#" >10a>li>
					<li class="arrowdown">
						<a href="#" >
							<img src="翻页-下一页.png" alt="">
						a>
					li>
				ul>
			div>
		div>
	body>
html>

演示图

演示效果图上的图标、图片类,我已经上传到博客文件里。不能设置免费下载,大家体谅一下或者可以加我QQ来获取文件 1209793794
CSS/HTML5简单大方的蓝色CSS分页样式_第1张图片

你可能感兴趣的:(样式笔记,组件)