html 实现格子效果,div+css实现九宫格效果

div+css实现九宫格效果 有3种方法:

1、方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现。优点:兼容性100%支持,缺点div太多,使用不方便。

2、方法二:把九宫图按特定格式排列成一张图,再用9个div合在一起,改变宽高和padding,实现。优点:兼容性100%支持,缺点div太多,使用不方便。

0818b9ca8b590ca3270a3433284dd417.png

0818b9ca8b590ca3270a3433284dd417.png

一张背景实现自适应九宫格

/*为了让看得简单清晰点,CSS跟XHTML代码就不写那么复杂了*/

div,span{display:block;background-image:url(./UploadFiles/20081210213558176.gif);}/*我懒所以直接div,span算了*/

.mdl{overflow:hidden;position:relative;width:70%;padding:52px 28px 28px;background:#657B93;}

.mdl div{position:absolute;z-index:2;}

h3{position:absolute;top:20px;z-index:3;margin:0;}

.mdl_t_l{top:0;left:0;width:28px;height:52px;background-position:-28px -52px;}

div.mdl_t_c{top:0;z-index:1;width:100%;height:52px;background-position:-56px 0;}

.mdl_t_c span{height:52px;background-position:-112px 0;}

.mdl_t_r{top:0;right:0;width:28px;height:52px;background-position:-55px -52px;}

div.mdl_c_l{top:0;left:0;z-index:1;width:28px;background-position:0 -52px;}

.mdl_c_l span{width:28px;height:2000px;background-position:0 -132px;}

div.mdl_c_r{top:0;right:0;z-index:1;width:28px;background-position:right top;}

.mdl_c_r span{width:28px;height:2000px;background-position:right -80px;}

.mdl_b_l{bottom:0;left:0;width:28px;height:28px;background-position:-28px -104px;}

div.mdl_b_c{bottom:0;z-index:1;width:100%;height:28px;background-position:0 -133px;}

.mdl_b_c span{bottom:0;height:28px;background-position:-56px -133px;}

.mdl_b_r{bottom:0;right:0;width:28px;height:28px;background-position:-55px -104px;}

一张背景实现自 适应九宫格

在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,不过在切图方面会比较严禁有1px的不对称就会出问题,请留意下面例子的切割分析。

3、方法三:使用css的border-image属性实现。优点:div只用1个,使用方便,缺点是极少数机型会出现白线的问题。

目前推荐使用这种方法:

-webkit-border-image: url('../assets/button_9slice.png') 18 repeat;

border-image: url('../assets/button_9slice.png') 18 fill repeat;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何升级成鸿蒙,如何将自己的华为手机升级成鸿蒙系统

看完6月2号晚上的华为鸿蒙系统发布会,大家肯定都跃跃欲试,想把自己的华为手机升级成鸿蒙系统了是吧?小编我也是迫不及待想要升级,借此机会小编我就和大家说一下,如何将自己的华为手机升级成鸿蒙系统。1、首先打开华为手…

[工具]iperf测试带宽

之前被要求测试网卡带宽能力,发现了iperf这个工具,记录下来防止遗忘。 iperf是个开源跨平台测试带宽工具,windows、linux、macOS……都支持,安装也挺方便。 1.安装 地址:https://iperf.fr/ 2.测试 参看:htt…

计算机能做什么英语对话,计算机英语会话∣实用电脑英语

原标题:计算机英语会话∣实用电脑英语Practical English for Computer实用电脑英语Key sentence必备表达All players must be ready for the game to start.所有玩家准备开始游戏。Are you sure you want to cancel your changes?你确认要取消改变吗?Ar…

Maven学习总结(七)——eclipse中使用Maven创建Web项目

Maven学习总结(七)——eclipse中使用Maven创建Web项目 一、创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如下图所示: 在New窗口中选择 Maven -> Maven Project。点击【next】如下图所示: 1.2 选择项目路径 根…

简单的Flash GUI工具(Simple Flash GUI Tool)

原文引用:http://blog.soulwire.co.uk/code/actionscript-3/simple-flash-prototype-gui-tool#more-1242 简单的Flash GUI工具 40 代码: 用最小的比较快AS3原型 更新:基思自己一直致力于类似的想法,并释放 MinimalConfigurator 。 基思彼得的 最小的组件 任何Flash…

计算机网络模拟校园,计算机网络课程设计-模拟校园网组网实验

计算机网络课程设计-模拟校园网组网实验 福建农林大学金山学院 信息工程类 课程实习报告 课程名称: 计算机网络 实习题目: 校园网组网方案 姓 名: 严夫 系: 信息与机电工程系 专 业: 计算机科学与技术 年 级&#xff1…

计算机网络纳新水粉画,小学教育专业“书法诗画创作社团”顺利举办纳新活动...

原标题:小学教育专业“书法诗画创作社团”顺利举办纳新活动小学教育专业“书法诗画创作社团”顺利举办纳新活动为了丰富同学们的课余生活,向全校师生展现小学教育专业的风采,2018年10月21日上午9:30,隶属于小学教育专业的“书法诗…

理论物理极础3:动力学

莱尼:“乔治,物体咋会运动起来?” 乔治:“因为物体受力,莱尼。” 莱尼:“物体咋会又不动了?” 乔治:“还是因为物体受力,莱尼。” 亚里士多德运动定律 亚里士多德生活在一…

人工神工机器人是什么_为什么企业要用电销机器人代理人工

不管各行各业,只要你有产品有服务,就离不开销售工作。销售工作分哪些,我们可以简单总结:1、人工客服,通过人工处理电话、上门、在线咨询工作。2、销售人员,分析客户名单,主动寻找筛选洽谈客户&a…

树莓派网页服务器的网页留言板,树莓派利用Django搭建聊天网页服务器 —— 准备篇...

利用Django在树莓派上搭建一个聊天网页服务器,话很少说,直接上流程。html首先来看一下刚建立的Django项目文件结构:前端 项目文件配置setting.py配置第一个咱们先来看一下setting.py文件的配置,须要更改两处地方:pytho…

verilog异步复位jk触发器_HDLBits: 在线学习Verilog(Problem 120-126)

这几天在刷HDLBits,参考的是HDLBits中文导学专栏:HDLBits中文导学,刷到120题的时候发现缺少了中间的120题到126题的解析,就打算自己边写边记录一下。也方便其他的同学进行参考。Problem 120 Simple FSM 1s牛刀小试一个很简单的状态机的题目,给定一个输入…

python中字典的value可以为任意对象_Python学习之字典的删改查操作

字典的删改查操作https://www.zhihu.com/video/1185227901603094528字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值(key>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 。字典是Python语言…

网站服务器商标属于哪类,网络水晶头属于商标哪个类别

水晶头是一种能沿固定方向插入并自动防止脱落的塑料接头,俗称“水晶头”,专业术语为RJ-45连接器(RJ-45是一种网络接口规范,类似的还有RJ-11接口,就是我们平常所用的“电话接口”,用来连接电话线)。之所把它称之为“水晶…

require.js的基本用法

一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码&…

CSS3实现小黄人动画

转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿。 自己也想说搞…

editview只输入英文_搜狗输入法Mac版更新:适配苹果M1处理器

12月24日消息 据搜狗输入法官方,近日Mac版应用程序已完成更新,新版本引入苹果M1桌面处理器原生支持,体验更优、速度更快,兼容搭载MacBook Pro、MacBook Air和Mac mini等机型,令使用苹果M1系列产品的用户们获得更加高效…

angular div 滚动条事件_DOM事件

事件是在编程时系统内发生的动作或发生的事情(单击、鼠标移动、滚动页面等)。HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。JS与HTML之间的交互是通过事件实现的,DOM支持大量的事件。事件的本质是程序各个组成部分之间的一种通信方式…

android byte[] 转string 好多问号_Android 仿抖音实现动态壁纸

code小生,一个专注 Android 领域的技术平台公众号回复 Android 加入我的安卓技术群作者:7_px链接:https://www.jianshu.com/p/fc5cf284abbb声明:本文已获7_px授权发表,转发等请联系原作者授权一、概述: 壁纸运行在一个…

升序排序中国_干货满满!6行python代码挑战展示2020下半年中国最娱乐的人气男明星人气排行榜top10!...

本回答主要以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例来展示如何用python生成动态条形图。知乎视频​www.zhihu.com一、 python生成动态条形图:以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例。1. 安装第三方库1.1 下载第三方库的网址…

YII2 实现后台操作记录日志

一、连接linux服务器&#xff0c;创建数据文件 php yii migrate/create user_log 二、修改数据文件 console/migrations/m150721_032220_admin_log.php <?phpuse yii\db\Schema; use yii\db\Migration;class m150721_032220_admin_log extends Migration {public function…