品字布局设计

最新推荐文章于 2022-08-09 21:38:30 发布
最新推荐文章于 2022-08-09 21:38:30 发布
阅读量176 收藏
点赞数
原文链接：http://www.cnblogs.com/haimengqingyuan/p/5453056.html
版权

 

基本思路1：三块高宽是确定的；上面那块用margin: 0 auto;居中；下面两块用float或者inline-block不换行；用margin调整位置使他们居中。

<! DOCTYPE  html>
< html >
     < head  lang = "en" >
       < meta  charset = "UTF-8" >
      < title ></ title >
     < style >
  *{
     margin: 0;
    border: 0;
  }
  .d1, .d2, .d3{
    height: 100px;
    width: 100px;

     background-color: #FF0000;

     border: solid 1px #000000;

  }

  .d1{

    margin: 0 auto;

  }

  .d3{

    float: left;

    margin-left: -200px;

  }

 .d2{

   float: left;

  margin-left: 50%;
  }
</ style >
</ head >
< body >
    < div  class = "d1" >上</ div >

    <div class="d2">右</div>

    <div class="d3">左</div>

  </body>

</ html >

基本思路2：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline或者inline-block使其不换行即可。

（1）

<!doctype>

<html>

<head>

<title>test</title>

</head>

<style>

*{

margin:0;

padding: 0;

}

.main .left{

 

float:left;

height:50%;

width:50%;

}

.main .right{

 

height:50%;

}

.clear{

clear:both;

}

.header{

height:50%;

 

width:100%;

}

</style>

<body>

<div class="header">1</div>

<div class="main">

<div class="left"></div>

<div class="right"></div>

<div class="clear"></div>

</div>

</body>

</html>

 （2）

<!doctype>

<html>

<head>

<title>test</title>

</head>

<style>

*{

margin:0;

padding: 0;

}

.left{

 

float:left;

height:50%;

width:50%;

}

.right{

 

height:50%;

}

.header{

height:50%;

 

width:100%;

}

</style>

<body>

<div class="header">1</div>

<div class="left"></div>

<div class="right"></div>

</body>

</html>

转载于:https://www.cnblogs.com/haimengqingyuan/p/5453056.html

1361976860
关注
一个满屏品字布局怎么设计？
sjinsa的博客
04-28 1万+
需要用到技术1. 元素水平居中对齐1) 使用margin对齐(推荐)2) 使用left：50%3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center 2. 元素对相对窗口定位1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位2)
CSS实现全屏“品”字布局
老曹的博客
09-13 580
1.grid布局实现 这种方式不容易想到，但是现在主流浏览器已经支持grid布局了，所以以后可以考虑考虑。 实现思路： 给容器设置等宽两列，根据grid默认布局“先行后列”特点，此时会展示成这样： 接下来只要让第一个项目/元素（item）占满一列就可以了，设置垂直网格线的起始位置就可以了（两列在垂直方向上有3条网格线）。 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset
一个满屏 品 字布局 如何设计？简单的思路。
LuckXinXin的博客
03-30 276
需要用到技术 元素水平居中对齐 使用margin对齐(推荐) 使用left：50% 使用text-align：行内元素居中对齐，给父元素设置text-align： center 元素对相对窗口定位 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位 使用absolute定位 使用html和body的width和height填?这个窗口 元素左右...
Web前端面试指导(十七)：一个满屏 品 字布局 如何设计?
liudanyang_21的博客
06-21 152
题目点评 这道题目有可能是笔试题，有可能面谈的时候进行叙述，如果是笔试题要求对css样式代码非常熟练，如果是面谈叙述，就需要你的表达能力非常强，要抓住要点，把需要用到的技能点讲清楚就可以了。 需要用到技术 1. 元素水平居中对齐 1)使用margin对齐(推荐) 2)使用left：50% 3)使用text-align 2. 元素对相对窗口定位 1)使用filxed（推荐） 2)使用abs...
一个满屏品字布局如何设计
qq_20901397的博客
06-21 933
代码：&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
一个满屏 品 字布局 如何设计?
weixin_30294021的博客
07-11 234
需要用到的技术 1. 元素水平居中对齐 1)使用margin对齐(推荐) 2)使用left：50% 3)使用text-align 2. 元素对相对窗口定位 1)使用filxed（推荐） 2)使用absolute定位 3)使用html和body的width和height填?这个窗...
使用html5，css，实现品字形布局
dre的博客
07-25 5718
使用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
一个值得学习的css布局设计-taobo的
08-12
本话题聚焦于一个值得学习的CSS布局设计，尤其关注“taobao”的布局策略。在这个设计中，我们能够看到盒模型的应用以及可换肤功能的实现，这些都是构建高效、美观网页界面的关键要素。 首先，让我们来深入理解CSS盒...
Bootstrap学习2：bootstrap中的布局
D_evin_的博客
09-18 1857
Bootstrap中的布局 四、栅格布局 - 栅格系统是用于页面布局，属于Bootstrap的核心 - 可以在不同终端显示不同效果（响应式） - 栅格，具有行row、列col的概念，网格列是通过跨越指定的 12 个列来创建。 1.栅格布局的列 - 一行平均分为12个列 - `.col-1~12`代表列占有行的十二分之几份 2.栅格布局的响应式 - `.col-sm-*` 小屏幕 - `.col-md-*` 中屏幕 - `.col-lg-*` 大屏幕 - .
CSS应用之设计满屏品字布局
Freya_yyy的博客
07-29 1140
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有： 1.元素的水平居中： 使用margin:0 auto;可以水平居中； 使用text-align:center;给父元素设置使其行内元素水平居中。 2.元素相对窗口定位： 使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位； 使用positio...
一个满屏品字布局怎么布？
limeng886549的博客
02-12 315
代码如下： 满屏品字布局
满屏品字布局怎么设计
weixin_34260991的博客
03-20 132
body{ height: 1200px; } .main { position: fixed; left: 0; top: 0; height: 100%; width: 100%; ...
【CSS实战】实现满屏品字布局
在热爱技术的路上一直前行。
08-09 684
代码】【CSS实战】实现满屏品字布局。
满屏的一个品字布局设计
weixin_49592652的博客
09-09 343
品字布局设计一，思路及注意点实现效果 一，思路及注意点 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
css设计一个品字php,面试题｜设计一个满屏品字布局
weixin_29549793的博客
03-23 132
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有：1.元素的水平居中：使用margin:0 auto;可以水平居中；使用text-align:center;给父元素设置使其行内元素水平居中。2.元素相对窗口定位：使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位；使用position:absolute;...
css实现满屏品字
low666的博客
05-10 634
css实现满屏品字 第一种方法： 上面那块用margin: 0 auto;居中； 下面两块用float或者inline-block不换行； 用margin调整位置使他们居中。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏品字布局</title> <style type="text/css"> *{
用css写一个品字布局
最新发布
03-13
可以的，品字布局可以使用CSS的flexbox布局来实现。具体实现方法可以参考以下代码： HTML代码： ``` 头部 左侧 主体 右侧 底部 ``` CSS代码： ``` .container { display: flex; flex-wrap: wrap; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值