[css] 手写一个满屏品字布局的方案

<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="stylesheet" href="style.css"></head><body><article class="container"><div class="firstRow"><div class="item"></div></div><div class="secondRow"><div class="item"></div><div class="item"></div></div></article></body>
</html>//style.css
html, body{height: 100%;margin: 0;padding: 0;
}.container {display: flex;flex-direction: column;flex-wrap: wrap;width: 100%;height: 100%;
}.firstRow, .secondRow {width: 100%;height: 30%;display: flex;flex-direction: row;justify-content: center;margin: 10px 0;
}.item {background-color: red;width: 40%;height: 100%;margin: 0 auto;border-radius: 10%;
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 手写一个满屏品字布局的方案相关推荐

Web前端面试指导(十七)：一个满屏品字布局如何设计?
题目点评这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了. 需要用到 ...
基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
使用 JAVA 手写一个录屏GUI程序
使用JAVAFX模块写的GUI程序,供学习使用. 先上一下动态效果图展示,下面分别是主界面和菜单界面,实现的功能有转GIF(需要用到ffmpeg),压缩视频,定时录屏等. 代码部分 public fi ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...
c语言安卓录屏,手写 Android 录屏直播
简介观看手游直播时,我们观众端看到的是选手的屏幕上的内容,这是如何实现的呢?这篇博客将手写一个录屏直播 Demo,实现类似手游直播的效果获取屏幕数据很简单,Android 系统有提供对应的服务,难 ...
[css] 让你手写一个reset的文件，你应该怎么写？要考虑哪些方面呢？
[css] 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢? 肯定首先考虑的是浏览器本身的样式,还有浏览器兼容.margin,padding ==>0ul,ol list styl ...
CSS布局之品字布局
为什么80%的码农都做不了架构师?>>> 最近有同学面试被问到关于品字布局的问题.虽然我觉得这种布局确实比较难看,应该也不会用到,但是既然有人问到,我还是自己尝试写了一下品字布 ...
用HTML，css,boostrap写一个综合大型购物网站
用HTML,css,boostrap写一个综合大型购物网站首先来看看页面的效果: 有需要的可以参考首先是首页index: <!DOCTYPE html> <html>< ...
手写一个http容器【上】决策树与路由表
Linux之父说过,伪代码是最好的语言,因为它能够表达所有的逻辑.所以本文所有的代码示例都是伪代码. ALFP协议如果让我来定义http协议的话,我会给他取一个完全不同的名字:ALFP(Applic ...

[css] 手写一个满屏品字布局的方案

[css] 手写一个满屏品字布局的方案

个人简介

主目录

[css] 手写一个满屏品字布局的方案相关推荐

最新文章

热门文章