一个满屏品字布局怎么设计？

最新推荐文章于 2022-08-09 21:38:30 发布
最新推荐文章于 2022-08-09 21:38:30 发布
阅读量196 收藏
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38152997/article/details/90912483
版权

需要用到技术

  1. 元素水平居中对齐

  1. 使用margin对齐(推荐)

  2. 使用left：50%

  3. 使用text-align：行内元素居中对齐，给父元素设置text-align： center

  1. 元素对相对窗口定位

  1. 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位

  2. 使用absolute定位

  3. 使用html和body的width和height填?这个窗口

  1. 元素左右定位

  1. 使用float左右浮动

  2. 使用绝对定位进行左右定位（推荐）
    第一种方式：

满屏品字布局
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019060518301458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTUyOTk3,size_16,color_FFFFFF,t_70)

第二种方式：

满屏品字布局
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190605182942955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTUyOTk3,size_16,color_FFFFFF,t_70)
秋英之空
关注
专栏目录
css实现满屏品字
low666的博客
05-10 651
css实现满屏品字 第一种方法： 上面那块用margin: 0 auto;居中； 下面两块用float或者inline-block不换行； 用margin调整位置使他们居中。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏品字布局</title> <style type="text/css"> *{
品字布局设计
weixin_30423977的博客
05-02 190
基本思路1：三块高宽是确定的；上面那块用margin: 0 auto;居中；下面两块用float或者inline-block不换行；用margin调整位置使他们居中。 <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <t...
一个满屏 品 字布局 如何设计？简单的思路。
LuckXinXin的博客
03-30 289
需要用到技术 元素水平居中对齐 使用margin对齐(推荐) 使用left：50% 使用text-align：行内元素居中对齐，给父元素设置text-align： center 元素对相对窗口定位 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位 使用absolute定位 使用html和body的width和height填?这个窗口 元素左右...
CSS应用之设计满屏品字布局
Freya_yyy的博客
07-29 1162
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有： 1.元素的水平居中： 使用margin:0 auto;可以水平居中； 使用text-align:center;给父元素设置使其行内元素水平居中。 2.元素相对窗口定位： 使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位； 使用positio...
一个满屏 品 字布局 如何设计?
weixin_30294021的博客
07-11 260
需要用到的技术 1. 元素水平居中对齐 1)使用margin对齐(推荐) 2)使用left：50% 3)使用text-align 2. 元素对相对窗口定位 1)使用filxed（推荐） 2)使用absolute定位 3)使用html和body的width和height填?这个窗...
CSS实现全屏“品”字布局
老曹的博客
09-13 613
1.grid布局实现 这种方式不容易想到，但是现在主流浏览器已经支持grid布局了，所以以后可以考虑考虑。 实现思路： 给容器设置等宽两列，根据grid默认布局“先行后列”特点，此时会展示成这样： 接下来只要让第一个项目/元素（item）占满一列就可以了，设置垂直网格线的起始位置就可以了（两列在垂直方向上有3条网格线）。 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset
使用html5，css，实现品字形布局
dre的博客
07-25 5734
使用HTML，CSS3实现品字形布局html,body{ margin:0; padding:0; } div:first-child{ width:100%; height:100%; background:red; } 如果这样写的话div的height:100%;是无效的，需要在html,body中加入  height：100%:或者div:first-child中加入pos
H5全栈_布局
AKIRAZXX的博客
08-12 359
页面布局 浮动布局（脱离文档流） 宽度不在占据整个屏幕，需要手动添加宽度 1、宽度如果没有手动指定那么就由内容决定 2、多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行 3、浮动元素失去了对父元素的支撑 元素 float： 可以使块元素脱离当前的文档流  left  right  none clear 清理左/右/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的...
Web前端面试指导(十七)：一个满屏 品 字布局 如何设计?
liudanyang_21的博客
06-21 162
题目点评 这道题目有可能是笔试题，有可能面谈的时候进行叙述，如果是笔试题要求对css样式代码非常熟练，如果是面谈叙述，就需要你的表达能力非常强，要抓住要点，把需要用到的技能点讲清楚就可以了。 需要用到技术 1. 元素水平居中对齐 1)使用margin对齐(推荐) 2)使用left：50% 3)使用text-align 2. 元素对相对窗口定位 1)使用filxed（推荐） 2)使用abs...
满屏的一个品字布局设计
weixin_49592652的博客
09-09 357
品字布局设计一，思路及注意点实现效果 一，思路及注意点 1.写三个块元素 设置宽高 及颜色 2.注意html，body默认宽度和高度为0px，设置宽和高分别为为100% 实现效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
一个满屏品字布局怎么布？
limeng886549的博客
02-12 332
代码如下： 满屏品字布局
css设计一个品字php,面试题｜设计一个满屏品字布局
weixin_29549793的博客
03-23 141
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有：1.元素的水平居中：使用margin:0 auto;可以水平居中；使用text-align:center;给父元素设置使其行内元素水平居中。2.元素相对窗口定位：使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位；使用position:absolute;...
满屏品字布局怎么设计
weixin_34260991的博客
03-20 136
body{ height: 1200px; } .main { position: fixed; left: 0; top: 0; height: 100%; width: 100%; ...
【CSS实战】实现满屏品字布局
在热爱技术的路上一直前行。
08-09 701
代码】【CSS实战】实现满屏品字布局。
“品”字布局两种方法
ysn121101的博客
08-12 1672
用定位布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台布局-定位</title> <style> html { color: #333; font:normal 12px '微软雅黑','Micros...
一个满屏品字布局如何设计
qq_20901397的博客
06-21 948
代码：&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;div class="first"&gt; &lt;div class="up"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="second"&am
一个满屏的品字布局
蜗牛的博客
09-30 757
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
css品字布局
qq_44746317的博客
03-15 1195
css品字布局
用css写一个品字布局
最新发布
03-13
可以的，品字布局可以使用CSS的flexbox布局来实现。具体实现方法可以参考以下代码： HTML代码： ``` <div class="container"> <div class="header">头部</div> <div class="left">左侧</div> <div class="main">主体</div> <div class="right">右侧</div> <div class="footer">底部</div> </div> ``` CSS代码： ``` .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; } .header, .footer { width: 100%; height: 50px; background-color: #ccc; } .left, .right { width: 200px; height: calc(100% - 100px); background-color: #eee; } .main { flex: 1; height: calc(100% - 100px); background-color: #fff; } ``` 以上代码实现了一个简单的品字布局，其中头部和底部占据整个容器的宽度，左侧和右侧固定宽度，主体部分自适应宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值