热爱工作,投身事业,在这一过程中,抑制私心,陶冶人格,同时积累经验,提高能力。这样,才能获得周围人们的信任和尊敬。
一、效果图:
三、布局二(各浏览器兼容性良好)
CSS Code复制内容到剪贴板
- <!DOCTYPEhtml>
- <html>
- <head>
- <metacharset="utf-8">
- <title>九宫格布局</title>
- <metahttp-equiv="X-UA-Compatible"content="IE=edge">
- </head>
- <body>
- <html>
- <head>
- <styletype="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;
- }
- .grida,.grida:visited{
- float:left;
- display:inline;
- border:5pxsolid#ccc;
- width:50px;
- height:50px;
- text-align:center;
- line-height:50px;
- margin-left:-5px;
- margin-top:-5px;
- position:relative;
- z-index:1;
- }
- .grida:hover{
- border-color:#f00;
- z-index:2;
- }
- </style>
- </head>
- <body>
- <divclass="grid_wrapper">
- <divclass="grid">
- <arel="nofollow noopener noreferrer" href="#"title="1">1</a>
- <arel="nofollow noopener noreferrer" href="#"title="2">2</a>
- <arel="nofollow noopener noreferrer" href="#"title="3">3</a>
- <arel="nofollow noopener noreferrer" href="#"title="4">4</a>
- <arel="nofollow noopener noreferrer" href="#"title="5">5</a>
- <arel="nofollow noopener noreferrer" href="#"title="6">6</a>
- <arel="nofollow noopener noreferrer" href="#"title="7">7</a>
- <arel="nofollow noopener noreferrer" href="#"title="8">8</a>
- <arel="nofollow noopener noreferrer" href="#"title="9">9</a>
- </div>
- </div>
- </body>
- </html>
IE6下兼容有问题,效果图如下:
三、布局二(各浏览器兼容性良好)
CSS Code复制内容到剪贴板
- <!DOCTYPEhtml>
- <html>
- <head>
- <metacharset="utf-8">
- <title>九宫格布局</title>
- <metahttp-equiv="X-UA-Compatible"content="IE=edge">
- </head>
- <body>
- <html>
- <head>
- <styletype="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;
- }
- .gridli{float:left;line-height:50px;}
- .gridlia,.gridlia:visited{
- display:block;
- border:5pxsolid#ccc;
- width:50px;
- height:50px;
- text-align:center;
- margin-left:-5px;
- margin-top:-5px;
- position:relative;
- z-index:1;
- }
- .gridlia:hover{
- border-color:#f00;
- z-index:2;
- }
- </style>
- </head>
- <body>
- <divclass="grid_wrapper">
- <ulclass="grid">
- <li><arel="nofollow noopener noreferrer" href="#"title="1">1</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="2">2</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="3">3</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="4">4</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="5">5</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="6">6</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="7">7</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="8">8</a></li>
- <li><arel="nofollow noopener noreferrer" href="#"title="9">9</a></li>
- </ul>
- </div>
- </body>
- </html>
以上就是CSS如何实现页面九宫格布局的简单示范。也许世间的事,都是那么的千奇百怪,随时随刻都会发生,但你要镇静,可又能镇静得了吗?我们都是俗人,没有什么惊天动地的事情,我们只有这份爱,可又那么的叫人难猜。更多关于CSS如何实现页面九宫格布局的简单示范请关注haodaima.com其它相关文章!