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实现九宫格抽奖可固定抽中某项奖品)
- python八卦图(Python实现九宫格式的朋友圈功能内附“马云”朋友圈)
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- css宫格布局(CSS实现页面九宫格布局的简单示范)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- html网页设计排版布局(HTML利用九宫格原理进行网页布局)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
- 阴生植物为什么不怕照不到阳光(阴生植物为什么不怕照不到阳光)
- 阴生环境 耐阴地被植物,你知道哪些(阴生环境耐阴地被植物)
- 常见的喜阴植物有哪些 养室内盆栽就在这里选(常见的喜阴植物有哪些)
- 这8种耐阴植物,营造阴生植物花境,也是一个不错的选择(营造阴生植物花境)
热门推荐
- css长度单位px、em、pt
- mysqlexplain各个字段作用(MySQL EXPLAIN语句的使用示例)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- python改变字体颜色指令(使用Python自动化破解自定义字体混淆信息的方法实例)
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)
- mysql统计下个月过生日的人数(Mysql出生日期转换为年龄并分组统计人数的方法示例)
- dedecms前台发布文章(dedecms随机调用文章数据方法汇总)
- html如何给table加边框(HTML table 表格边框的实现思路)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)