HTML前端小技巧—页面九宫格排版

最新推荐文章于 2024-06-19 16:02:18 发布

云南仟龙Mark

最新推荐文章于 2024-06-19 16:02:18 发布

阅读量2.6k

点赞数

文章标签：前端 html css

原文链接：https://blog.51cto.com/u_15111999/4734210

版权

今天分享下”HTML前端小技巧—页面九宫格排版“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。网站布局多样化是大家前面的拿手菜！近期见到UC浏览器的默认设置标签页应用的便是九宫格合理布局。就科学研究了下，在这儿，我便介绍一下编码，共同学习下！实际效果如下所示：

在这里插入图片描述

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>全兼容的HTML九宫格布局</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;}
.xttblog{
width: 1200px;
height: 170px;
margin-top:50px;
margin-left: auto;
margin-right: auto;
}
.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
.box:after{
content: ".";
display: block;
line-height: 0;
width:0;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.box li{float:left;line-height: 230px;}
.box li a,.box li a:visited{
display:block;
border: 5px solid #ccc;
width: 380px（http://www.qlyl1688.com）;
height: 230px;
text-align: center;
margin-left: -5px;
margin-top: -5px;
position: relative;
z-index: 1;
}
.box li a:hover{border-color: #f00;z-index: 2;}
</style>
</head>
<body>
<div class="xttblog">
<ul class="box">
<li><a href="#" title="1"><img src="sh.jpg"/></a></li>
<li><a href="#" title="2"><img src="bd.jpg"/></a></li>
<li><a href="#" title="3"><img src="tb.jpg"/></a></li>
<li><a href="#" title="4"><img src="fh.jpg"/></a></li>
<li><a href="#" title="5"><img src="tb.jpg"/></a></li>
<li><a href="#" title="6"><img src="tb.jpg"/></a></li>
<li><a href="#" title="7"><img src="tb.jpg"/></a></li>
<li><a href="#" title="8"><img src="tb.jpg"/></a></li>
<li><a href="#" title="9"><img src="tb.jpg"/></a></li>
</ul>
</div>
</body>
</html>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML前端小技巧—页面九宫格排版

今天分享下”HTML前端小技巧—页面九宫格排版“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。网站布局多样化是大家前面的拿手菜！近期见到UC浏览器的默认设置标签页应用的便是九宫格合理布局。就科学研究了下，在这儿，我便介绍一下编码，共同学习下！实际效果如下所示：XML/HTML Code复制内容到剪贴板<!DOCTYPE html> <html><head><
复制链接

扫一扫