HTML将页面平均分成四部分

最新推荐文章于 2022-11-18 20:17:20 发布
最新推荐文章于 2022-11-18 20:17:20 发布
阅读量7.4k 收藏 7
点赞数 2
分类专栏： html 文章标签： html均分页面 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将页面平均分成四部分</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .quarter-div{
            width: 50%;
            height: 50%;
            float: left;
        }
        .blue{
            background-color: #5BC0DE;
        }
        .green{
            background-color: #5CB85C;
        }
        .orange{
            background-color: #F0AD4E;
        }
        .yellow{
            background-color: #FFC706;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="quarter-div blue"></div>
        <div class="quarter-div green"></div>
        <div class="quarter-div orange"></div>
        <div class="quarter-div yellow"></div>
    </div>
</body>
</html>
鱿鱼ing
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wav-splitter:使用 Java 将 WAV 文件分成多个部分
06-20
分波器 使用 Java 将 WAV 文件分成多个部分 该程序将嵌入的 WAV 文件 (cheering.wav) 拆分为 500 毫秒的多个部分。 跑步： 蚂蚁跑
blobUpload:使用Blob API将大型视频分成多个部分，以简化视频上传
05-07
使用JavaScript和创建视频上传 视频是非常大的文件，所有服务器对文件大小的上传都有限制。 您希望用户看到的最后一件事（在等待文件上传之后）是“ 413：请求太大”错误。 解决方法是使用HTML 5 File API将视频切成更小的位，并上传每个更小的块。 在此演示中，视频被分割为1 MB的块，但更大的大小是可以的（在APi.video，我们建议每个块的大小保持在100MB以下）。 入门 所有HTML5和香草JS。 您所需就是从委托的上载令牌。 替换变量url的token参数，并且您自己的版本将立即运行。 测试一下！
将数组分成和相等的三个部分1
08-03
示例 1：输入：[0,2,1,-6,6,-7,9,1,2,0,1]解释：0 + 2 + 1 = -6 + 6 - 7 + 9 + 1 = 2 + 0 + 1示例
url-parse:HMTL，JS，SASS将URL分成多个部分
05-11
网址解析 HMTL，JS，SASS将URL分成多个部分 查看工作访问
使用分页标签把网页分成两半
11-21
使用html中的分页标签 实现两个网站在同一网页访问
页面平均分成4部分
yuanyuan214365的博客
10-25 1159
将页面平均分成四部分 *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; }
html中怎么把一页分成两半写,HTML+CSS入门 如何将一个页面平均分成四个部分
weixin_33284411的博客
05-31 2383
本篇教程介绍了HTML+CSS入门 如何将一个页面平均分成四个部分，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<数据监控页面需要同时显示4个板块内容，如下图：CSS如何将一个页面平均分成四个部分(div)呢？html>将页面平均分成四部分*{margin:0;padding:0;}.main{width:100%;height:100%;position...
html将页面分成四部分,html – 如何使用flexbox将网页划分为四个部分？
weixin_36071439的博客
06-03 1424
您可以简化代码并获得所需的输出.在这里,我删除了行并使用了一个容器.这种结构的主要好处是,如果您认为有必要,可以改变列的顺序.我也选择使用flex-basis而不是flex-grow来使它们保持50％的宽度,无论其内容大小如何.在更宽的屏幕上,使用媒体查询,将列设置为50％宽,并将容器设置为：flex; flex-wrap：wrap;.在较窄的屏幕上,以及作为块元素,它们默认堆叠在一起html, ...
html网页框架分割三部分,Dreamweaver用框架建立网站把浏览器的显示空间分割为几个部分...
weixin_32586767的博客
06-10 1435
有时看到一些论坛，左边是每个讨论区的名称，点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容，不过左右部分是独立显示的，比如拖动左边的滚动条不会影响右侧的显示效果。其实这是在页面中利用了框架技术，因此可以把浏览器的显示空间分割为几个部分，每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集，能够让页面具有更为丰富的效果。效果说明先建立两个页面，分别为“ myphoto.htm ”、...
学习——第三天
m0_59087547的博客
11-18 720
主要介绍css语法，书写位置，还有部分选择器
CSplitURL-将URL分成多个组成部分
04-08
WinInet InternetCrackUrl函数的包装器类
java中将一个List等分成n个list的工具方法(推荐)
08-31
下面小编就为大家带来一篇java中将一个List等分成n个list的工具方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用SplitContainer将窗体分成左右两部分.rar
07-01
用SplitContainer将窗体分成左右两部分.rar
html5+css3实现圆分成四个扇形，并有点击事件
12-15
】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形），html5+css3实现圆分成四个扇形，并有点击事件。使用的是vue，但是可以提取为html+css，自己提取
将一张照片等分成若干部分
03-16
将一张照片等分成若干部分
夸克的树级分裂幅度分成四个共线的部分
04-23
我们在常规尺寸正则化中计算了一个夸克父级的树级分裂幅度，其极限是四个部分彼此共线。 这是在强耦合常数下，QCD散射幅度处于下一个到下一个超前阶（N3LO）的通用红外行为的一部分。 此外，我们考虑了当m'无质量...
leetcode下载-coloredPrintHelper:将pdf分成彩色和黑白部分，便于打印
06-29
将pdf分成彩色和黑白部分，便于打印时分开打（不同打印机），好处是省钱，而且不用再一页一页人工记录彩色页面位置了！！支持双面和单面打印。 注意 受到打印机的限制，如果是双面打印的话，实际上是两页两页进行的...
split-upload:通过将文件分成几部分将文件上传到 servlet
06-08
拆分上传通过将文件分成几部分将文件上传到 Servlet。 我使用 RandomAccessFile 并行上传部分。 目前，与简单上传相比，它没有显示任何时间改进。 真的很想在这个项目中得到一些帮助。
将图片平均分成4块网页代码
最新发布
05-17
这里提供一个简单的实现方法，使用HTML和CSS将图片平均分成4块。 首先，需要创建一个包含图片的HTML元素。可以使用`<img>`标签来插入图片，也可以将图片作为元素的背景，使用CSS的`background-image`属性来设置。例如： ```html <div class="image-container" style="background-image: url('your-image-url.jpg')"></div> ``` 接下来，需要定义4个子元素，用来分割图片。可以使用`<div>`标签来定义子元素，并使用CSS的`position`、`top`、`left`、`width`和`height`属性来定位和尺寸子元素。例如： ```html <div class="image-container" style="background-image: url('your-image-url.jpg')"> <div class="split" style="top: 0; left: 0; width: 50%; height: 50%;"></div> <div class="split" style="top: 0; left: 50%; width: 50%; height: 50%;"></div> <div class="split" style="top: 50%; left: 0; width: 50%; height: 50%;"></div> <div class="split" style="top: 50%; left: 50%; width: 50%; height: 50%;"></div> </div> ``` 最后，需要使用CSS的`overflow`属性来隐藏原始的图片元素，并为子元素添加边框和背景色等样式以突出显示。例如： ```css .image-container { position: relative; width: 400px; height: 400px; overflow: hidden; } .split { position: absolute; border: 2px solid white; background-color: rgba(0, 0, 0, 0.5); } ``` 完整的HTML和CSS代码如下所示： ```html <div class="image-container" style="background-image: url('your-image-url.jpg')"> <div class="split" style="top: 0; left: 0; width: 50%; height: 50%;"></div> <div class="split" style="top: 0; left: 50%; width: 50%; height: 50%;"></div> <div class="split" style="top: 50%; left: 0; width: 50%; height: 50%;"></div> <div class="split" style="top: 50%; left: 50%; width: 50%; height: 50%;"></div> </div> <style> .image-container { position: relative; width: 400px; height: 400px; overflow: hidden; } .split { position: absolute; border: 2px solid white; background-color: rgba(0, 0, 0, 0.5); } </style> ``` 记得将`your-image-url.jpg`替换为你自己的图片URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值