救急,请教朋友们,这个页面的结构要怎么弄出来呢?CSS,js,JQ?

图片说明

可以的话帮忙弄弄哦,谢谢

9个回答

<!DOCTYPE html>






*{ margin: 0; padding: 0; box-sizing: border-box; } .div1{ width: 100%; height: 100%; position: absolute; border: 1px solid black; display: flex; /* 使用flex布局,让div2垂直居中 */ align-items: center; } .div2{ width: 80%; height: 80%; margin: 0 auto; /*使div2水平居中*/ border: 1px solid black; display: flex; /*使用flex布局*/ align-items: center; /*让子元素垂直居中*/ justify-content: space-around; /*让子元素水平居中,并且元素之间的距离相等*/ } .div2>div{ /*.div2>div的意思就是选择div2里面的所有div元素*/ width: 20%; height: 20%; border: 1px solid black; }








效果如下:
图片说明

好像不能显示代码,截个图吧。
图片说明

用嵌套div和浮动的方法

嵌套div调调位置就可以了

一、可以用百分比布局;
二、可以用h5的vw和vh;
三、可以使用js获取屏幕高宽在计算后赋值;

放一个大的div里面放一个div,在这个里面的div里面放三个,按要求设置他们的局部css样式,最后用整体css样式设置其他的

这个应该很简单吧,就是嵌套几个div 然后设置下占页面的比例css。几句代码就能搞定的。

这个结合absolute和relative就能解决

html:

css:

*{
margin: 0;
padding: 0;
}
.outermost{
width:100%;
height: 100%;
background-color: red;
position: absolute;
overflow: hidden;
}
.outermost .outerInner{
width:80%;
height: 80%;
position: relative;
left: 10%;
top: 10%;
background-color: green;
display: flex;
justify-content: space-around;
}
.outermost .outerInner .inner{
width: 20%;
height: 40%;
background-color: blue;
float: left;
position: relative;
top: 30%;
}

hyp520520
hyp520520 谢谢
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
救急 请教spring的配置问题
![图片说明](https://img-ask.csdn.net/upload/201905/05/1557039042_870781.png) Configuration problem: Failed to import bean definitions from URL location [classpath:applicationContext-common.xml] Offending resource: class path resource [applicationContext.xml]; nested exception is org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from class path resource [applicationContext-common.xml]; nested exception is java.io.FileNotFoundException: class path resource [applicationContext-common.xml] cannot be opened because it does not exist
各们大神,江湖救急,在web页面中显示远程服务器桌面问题!!!
做了一个页面,通过服务器的IP与端口,实现这个页面能够显示服务器的桌面并能进行操作,如果不借助VNC能不能实现?大神们,看到的,知道的,希望不吝赐教。。。小弟在此感谢!!!
大作业救急!!!!聚类算法的实现与分析
![图片说明](https://img-ask.csdn.net/upload/201510/30/1446208157_222231.png) 大家好,有没有会这种聚类算法的思路呀?希望弄举个具体点的实例。我们老师要求实现图上的两种算法。还有这个成绩分析的话,分级聚类是不是有点不合适用在成绩分析上呀?如果要用分级的话怎么做,求提供思路(最好有具体点的实例)。万分感谢!谢谢!作业救急!!!!
aspx网页显示白页面,源文件没有内容
有一个项目的aspx页面 VS F5运行或者在IIS中打开,界面空白没有一个字符,浏览器中查看源文件也是没有一个标签。 VS调试时在PageLode中能够全部走完,不报错。但是就是不显示。 在cs文件中使用Response.Write();写数据,界面倒是可以显示出来。 搞了好久,各位大牛! 江湖救急啊!!!
求大神帮忙啦!怎么可以给一段音频生成链接呢,江湖救急!
怎么给一段音频生成链接?求大神帮忙啦!怎么可以给一段音频生成链接呢,江湖救急!
救急!!这个程序在vs2017中无法运行
``` #include "pch.h" #include <iostream> using namespace std; void a(double a, double b, double *add) { *add = a + b; } void j(double a, double b, double *jian) { *jian = a - b; } void m(double a, double b, double *cheng) { *cheng = a * b; } void c(double a, double b, double *chu) { *chu = a / (float)b; } int main() { double *s1 = NULL; int d; cin >> d; if (d == 0) { a(12, 4, s1); cout << s1; } else if (d == 1) { j(12, 4, s1); cout << s1; } else if (d == 2){m(12, 4, s1); cout << s1; } else if (d == 3) { c(12, 4, s1); cout << s1; } else cout << "输入错误值"; } ``` 如题 麻烦大家解决一下,最好能把程序
救急!!!!,万能的社区
centos安装好了svn我自己可以访问,为什么设置帐号的认证用户报错。他们只能访问根目录,trunk 目录报错,,救急,大神们![图片](https://img-ask.csdn.net/upload/201703/28/1490705773_960867.jpg)![图片](https://img-ask.csdn.net/upload/201703/28/1490706039_860717.jpg)
有没有大佬会玩qrcode 教教我可以吗 江湖救急啊。
有没有大佬会玩qrcode 教教我可以吗 江湖救急啊
WPF datagrid 单元格选中会变色 怎么取消 江湖救急!!!
# WPF datagrid 单元格选中会变色 怎么取消 江湖救急!!!![图片说明](https://img-ask.csdn.net/upload/201906/11/1560259173_729157.png) 不是悬浮的时候显示的,是点击按钮后显示的蓝色
大神救急!用VB编写的这个公式是否有问题?
``` Private Function H(t As Single, x As Single) As Single '溴化锂水溶液焓-浓度方程(焓) Dim a(4) As Single, b(4) As Single, c(4) As Single a(0) = -121.189: a(1) = 16.7809: a(2) = -0.517766: a(3) = 6.31755 * 10 ^ (-3): a(4) = -2.60914 * 10 ^ (-4) b(0) = 0.671458: b(1) = 1.01548 * 10 ^ (-2): b(2) = -5.41941 * 10 ^ (-4): b(3) = 6.82514 * 10 ^ (-6): b(4) = -2.80048 * 10 ^ (-8) c(0) = 1.23744 * 10 ^ (-3): c(1) = -7.74557 * 10 ^ (-5): c(2) = 1.94305 * 10 ^ (-6): c(3) = -2.01424 * 10 ^ (-8): c(4) = 6.5288 * 10 ^ (-11) H = 0 For i = 0 To 4 H = H + a(i) * x ^ i + t * b(i) * x ^ i + t ^ 2 * c(i) * x ^ i Next i End Function![图片说明](https://img-ask.csdn.net/upload/201905/28/1559033182_787462.jpg) ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559033205_465217.jpg) ```
vue上的echarts geo3d地图 点击事件该怎么确定是点到哪了?(江湖救急)
我做了一个3D地图,他被要求可以旋转,可以翻来覆去,我本来想根据x、y点判断的,但是看了看前面那些要求我放弃了,我突然想到一个办法,高亮时将一个Boolean改为true,鼠标移出高亮区域时Boolean改为false,并将高亮时返回的县名存起来,点击事件触发时判断那个Boolean是否为true,是的话就利用我存起来的县名执行下一步我要执行的方法,我的直觉告诉我,有把鼠标移出高亮区域就触发的回调函数但是我找了半天文档并没有发现我要的,什么geoselectchanged、geoselected、geounselected都试了,都没用,至于chart.getZr().on.('click',fanction(){})、chart.getZr().on.('mouseover',fanction(){}).......等等等等,都是整个地图的方法,哪怕在高亮区域外面都能看到他们生效,最迟明天早上,做不出来就凉凉了,我太难了..............................................
MysQL 简单的SQL语法 年及月的合并- 救急
我想要程现的现方式为 2019/01 我现在的数字为 2019 1 我要如何拼成2019/01 我需要有0这个字存在 Select concatenate(2019,'/',1) 类似这样的写方?
window.opener.document.getElementById()获取不到值
同样的XP系统IE8浏览器,为什么有的机子上使用在子页面window.opener.document.getElementById()后父页面没有显示传过来的值,江湖救急,这个弄不好要加班啊,大部分机子都是没问题的,是不是IE要设置什么?
JS中HTML锚点链接 如何链接 点击函数执行后的页面呢?
本人JavaScript 新手 js不太熟悉 感谢大虾指点! **图1** 是 锚点链接将要跳转到对应的页面的前端代码 ![图片说明](https://img-ask.csdn.net/upload/201704/21/1492745138_477093.png) **图2** 是 锚点链接跳转对应页面的前端代码 ![图片说明](https://img-ask.csdn.net/upload/201704/21/1492745194_65394.png) **救急问题:** 因为图2 的 ``` name="already_attention_signal" ``` 是需要 ``` onclick="showwithtab(2,this)" ``` 才能执行显示出来的页面 所以图1 不知道如何加改,在线等!急! 我会及时回复!
特洛格goodui学习平台动画实现原理?
救急救急. 我刚到一个公司上班,公司有一个CS版本的管理系统,现在要让我维护这个系统。 老板的老婆在特洛格goodui学ui设计,看到goodui那个学习系统登录界面上那个动画, 老板就想在我们这个系统上也加动画效果。我先觉得很简单,就直接让美工给我弄了 一个gif动画图,放上去之后只有在win7系统有效果。winxp没有动画效果,图片不动。 我用spy++看了一下, goodui那个也是用了图片控件放的图片,他那个为什么在xp上会动。并且我们这个系统面向的单位还全是用的xp系统, 所以这个系统用的.net2.0 又不能用wpf。救急救急急,求各位大神帮忙,折腾了三天了.... 下面的界面,主要是我画圈那个logo那块. ![图片说明](https://img-ask.csdn.net/upload/201702/12/1486865607_449171.jpg) 这个是他们网址,哪位大神帮忙研究看一下 [www.goodui.org.cn](http://www.goodui.org.cn "")
新人C语言救急 !!!
在C语言中, 键盘输入k 个整数到数组x 中。 将数组x 中的k 个数放入数组y 中,但不重复放(一个数只放一次),而后输出y的这些有效元素。 例如,程序执行后的输入输出界面可设计为: x=? 23 55 -6 0 23 23 0 -12 y= 23 55 -6 0 -12 用for语句完成,不要用指针和函数。 救急!!!
江湖救急Js截取字符串
../../../../../Project 如和截取成 ../../../../ 救急啊 谢谢
江湖救急:关于fastdb的基础内容
FastDbCommand.Delete方法是否能删除数据库中的数据,如果是的话如何调用,如果不是的话应该怎么做?更新语句又该怎么写?
Kafka实战(三) - Kafka的自我修养与定位
Apache Kafka是消息引擎系统,也是一个分布式流处理平台(Distributed Streaming Platform) Kafka是LinkedIn公司内部孵化的项目。LinkedIn最开始有强烈的数据强实时处理方面的需求,其内部的诸多子系统要执行多种类型的数据处理与分析,主要包括业务系统和应用程序性能监控,以及用户行为数据处理等。 遇到的主要问题: 数据正确性不足 数据的收集主要...
volatile 与 synchronize 详解
Java支持多个线程同时访问一个对象或者对象的成员变量,由于每个线程可以拥有这个变量的拷贝(虽然对象以及成员变量分配的内存是在共享内存中的,但是每个执行的线程还是可以拥有一份拷贝,这样做的目的是加速程序的执行,这是现代多核处理器的一个显著特性),所以程序在执行过程中,一个线程看到的变量并不一定是最新的。 volatile 关键字volatile可以用来修饰字段(成员变量),就是告知程序任何对该变量...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
有哪些让程序员受益终生的建议
从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家,记得帮我点赞哦。 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃有余,这篇文章很长,但绝对是精品,记得帮我点赞哦!!!! 一腔肺腑之言,能看进去多少,就看你自己了!!! 目录: 在校生篇: 为什么要尽量进大厂? 如何选择语言及方...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
GitHub开源史上最大规模中文知识图谱
近日,一直致力于知识图谱研究的 OwnThink 平台在 Github 上开源了史上最大规模 1.4 亿中文知识图谱,其中数据是以(实体、属性、值),(实体、关系、实体)混合的形式组织,数据格式采用 csv 格式。 到目前为止,OwnThink 项目开放了对话机器人、知识图谱、语义理解、自然语言处理工具。知识图谱融合了两千五百多万的实体,拥有亿级别的实体属性关系,机器人采用了基于知识图谱的语义感...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
微信支付崩溃了,但是更让马化腾和张小龙崩溃的竟然是……
loonggg读完需要3分钟速读仅需1分钟事件还得还原到昨天晚上,10 月 29 日晚上 20:09-21:14 之间,微信支付发生故障,全国微信支付交易无法正常进行。然...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
YouTube排名第一的励志英文演讲《Dream(梦想)》
Idon’t know what that dream is that you have, I don't care how disappointing it might have been as you've been working toward that dream,but that dream that you’re holding in your mind, that it’s po...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
相关热词 c# 二进制截断字符串 c#实现窗体设计器 c#检测是否为微信 c# plc s1200 c#里氏转换原则 c# 主界面 c# do loop c#存为组套 模板 c# 停掉协程 c# rgb 读取图片
立即提问