纯css九宫格布局排版

简介:

<title></title>

<style type="text/css">

* {

padding: 0;

margin: 0;

}

  body { text-align: center; background:#ddd; }

div {

width: 170px;

margin: 100px auto;

}

a {

float: left;

width: 50px;

height: 50px;

border: solid 1px #000;

display: block;

line-height: 50px;

_line-height: 40px;

text-align: center;

margin: 0 -1px -1px 0;

z-index: 1;

position: relative;

}

a:hover {

border-color: red;

z-index: 2;

}

  img{ width:50px; height:50px;}</style>

<div>

<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a></div>


原文:http://www.zaole.net/demo/20150302331.html

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1785148

相关文章
|
3天前
|
移动开发 前端开发 HTML5
深掘 CSS3 Flex 布局的奥秘:打造无界限的灵活页面布局
深掘 CSS3 Flex 布局的奥秘:打造无界限的灵活页面布局
|
3天前
|
移动开发 前端开发 HTML5
2024.4.5-CSS 布局模型(层模型)
2024.4.5-CSS 布局模型(层模型)
|
7天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
12天前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
|
12天前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
|
9天前
|
前端开发 容器
如何用css实现两列布局?
如何用css实现两列布局?
12 1
|
14天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
17天前
|
前端开发 开发者 容器
CSS基础-Flexbox布局基础
【6月更文挑战第11天】Flexbox是CSS3的全新布局模式,简化了网页动态布局问题。通过`display: flex`设置容器,调整`flex-direction`、`justify-content`、`align-items`等属性控制项目排列和对齐。适用于响应式布局、均匀分布空间和元素对齐。注意浏览器兼容性、选择合适布局模式及区分对齐与排序属性。通过实例代码学习和实践,掌握Flexbox能有效提升网页布局效率。
|
17天前
|
前端开发 开发者 容器
CSS基础-Grid布局基础
【6月更文挑战第11天】CSS Grid布局简化了网页设计,提供前所未有的灵活性。本文探讨Grid基础、常见问题及解决方案。学习重点包括理解容器和项目、正确使用网格线、避免固定单位、有效对齐元素以及选择合适布局模型。通过深入学习、实践调试和参考资源,设计师能避免陷阱,掌握这一现代布局技术。实践是关键,不断尝试将使你在Grid布局中游刃有余。
|
23天前
|
前端开发 容器
7. CSS 网格布局
7. CSS 网格布局
17 4