css宫格布局(CSS实现页面九宫格布局的简单示范)
类别:Web前端 浏览量:1663
时间:2022-01-17 01:51:03 css宫格布局
CSS实现页面九宫格布局的简单示范一、效果图:
三、布局二(各浏览器兼容性良好)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>九宫格布局</title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- </head>
- <body>
- <html>
- <head>
- <style type="text/css">
- body{margin:0;padding:0;}
- .grid_wrapper{
- width: 170px;
- height: 170px;
- margin-left: auto;
- margin-right: auto;
- }
- .grid{
- margin-left: 5px;
- margin-top: 5px;
- }
- .grid:after{
- content: ".";
- display: block;
- line-height: 0;
- height: 0;
- clear: both;
- visibility: hidden;
- overflow: hidden;
- }
- .grid a,.grid a:visited{
- float: left;
- display: inline;
- border: 5px solid #ccc;
- width: 50px;
- height: 50px;
- text-align: center;
- line-height: 50px;
- margin-left: -5px;
- margin-top: -5px;
- position: relative;
- z-index: 1;
- }
- .grid a:hover{
- border-color: #f00;
- z-index: 2;
- }
- </style>
- </head>
- <body>
- <li class="grid_wrapper">
- <li class="grid">
- <a href="#" title="1">1</a>
- <a href="#" title="2">2</a>
- <a href="#" title="3">3</a>
- <a href="#" title="4">4</a>
- <a href="#" title="5">5</a>
- <a href="#" title="6">6</a>
- <a href="#" title="7">7</a>
- <a href="#" title="8">8</a>
- <a href="#" title="9">9</a>
- </li>
- </li>
- </body>
- </html>
IE6下兼容有问题,效果图如下:
三、布局二(各浏览器兼容性良好)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>九宫格布局</title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- </head>
- <body>
- <html>
- <head>
- <style type="text/css">
- body,ul,li{margin:0;padding:0;}
- .grid_wrapper{
- width: 170px;
- height: 170px;
- margin-left: auto;
- margin-right: auto;
- }
- .grid{
- margin-left: 5px;
- margin-top: 5px;
- list-style-type:none;
- }
- .grid:after{
- content: ".";
- display: block;
- line-height: 0;
- width:0;
- height: 0;
- clear: both;
- visibility: hidden;
- overflow: hidden;
- }
- .grid li{float:left;line-height: 50px;}
- .grid li a,.grid li a:visited{
- display:block;
- border: 5px solid #ccc;
- width: 50px;
- height: 50px;
- text-align: center;
- margin-left: -5px;
- margin-top: -5px;
- position: relative;
- z-index: 1;
- }
- .grid li a:hover{
- border-color: #f00;
- z-index: 2;
- }
- </style>
- </head>
- <body>
- <li class="grid_wrapper">
- <ul class="grid">
- <li><a href="#" title="1">1</a></li>
- <li><a href="#" title="2">2</a></li>
- <li><a href="#" title="3">3</a></li>
- <li><a href="#" title="4">4</a></li>
- <li><a href="#" title="5">5</a></li>
- <li><a href="#" title="6">6</a></li>
- <li><a href="#" title="7">7</a></li>
- <li><a href="#" title="8">8</a></li>
- <li><a href="#" title="9">9</a></li>
- </ul>
- </li>
- </body>
- </html>
您可能感兴趣
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- python八卦图(Python实现九宫格式的朋友圈功能内附“马云”朋友圈)
- css宫格布局(CSS实现页面九宫格布局的简单示范)
- html网页设计排版布局(HTML利用九宫格原理进行网页布局)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
热门推荐
- C#中float的取值范围和精度
- chrome适合开发的插件(Chrome插件扩展开发全攻略完整demo)
- docker插件容器使用(Docker容器开jupyter不能访问到的解决方法)
- 去除inline-block元素间的间隙
- mysql主从同步工作原理(MySQL是如何实现主备同步)
- python的三维画图(python处理DICOM并计算三维模型体积)
- python复杂的验证码处理(Python 通过打码平台实现验证码的实现)
- python定时任务脚本(对Python定时任务的启动和停止方法详解)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- css垂直左右居中的方式(css常用元素水平垂直居中方案)