css实现9宫格
CSS 实现
2023-09-11 14:19:39 时间
html
<div class="nine"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
css
*{ list-style: none; padding: 0; margin: 0; } .nine{ width: 170px; height: 170px; background: blue; margin:50px auto ; } .nine ul li{ width: 50px; height: 50px; color: #000; text-align: center; float: left; margin: 5px 0 0 5px; background: #fff; line-height: 50px; } .nine ul li:hover{ border: 5px #f00 solid; box-sizing:border-box; width: 60px; height: 60px; margin: 0 -5px -5px 0; }
相关文章
- CSS 奇技淫巧:动态高度过渡动画
- 使用纯 CSS 实现滚动阴影效果
- css移动端设置底部导航栏(1+X Web前端开发初级 例题)
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序
- CSS - 鼠标移入图片放大及缓慢过渡效果(仅 “内部“ 放大,不改变容器大小)鼠标移入图片变成发大镜效果
- CSS简介代码实现表格(table)只有横线没有竖线的效果,一个简约卡片化精美的数据表格(类似Bootstrap表格)
- 通过css修改input的边框
- css+js实现兼容性select的样式
- js 获取css非行内样式,你应该了解的getComputedStyle方法
- CSS如何实现波浪效果
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- scss文件报错处理 (报错信息Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require)
- 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——导读
- css实现加入购物车动画(水平抛物线)
- css实现高度不固定的div元素模块在页面中水平垂直居中
- 四个漂亮CSS样式表
- css 修改element组件自动生成后的样式
- CSS实现单行、多行文本溢出显示省略号(…)
- CSS outline 属性
- html/css 实现下拉菜单效果
- css实现下划线的最佳实践及其他方式
- CSS:实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转