界面布局怎么做(抖音和安卓界面布局详解)

seoxin 09-04 11:24 16次浏览

前几天发了几个视频,视频标题跟本文章标题一样,带大家用五种方式实现了一道有关布局的面试题。现特此附上源码。如果有想看整个内容介绍的,可以根据本标题或选择关注本人,或搜索标题内容,选择视频也可以看到更详细内容。

面试题的要求如下:

假设高度已知,请写出三栏布局,其中左栏,右栏各为300px,中间自适应,要求用尽可能多的方式实现这个布局。

在此我用五种方式实现了这个题目的要求,我在视频里面详情介绍了。下面贴出整个实现源码。

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>五种方式实现布局</title>

<style>

*{

padding:0;

margin:0

}

.layout div{

height:100px;

}

.layout{

margin-bottom:20px;

}

</style>

</head>

<body>

<!– 第一种布局 浮动布局 –>

<section class=”layout float”>

<style>

.float .left{

float:left;

width:300px;

background-color: red;

}

.float .right{

float:right;

width:300px;

background-color: green;

}

.float .center{

background-color:yellow;

}

</style>

<article class=”left-right-center”>

<div class=”left”></div>

<div class=”right”></div>

<div class=”center”>

<h1>这是浮动布局</h1>

<p>这是浮动布局</p>

</div>

</article>

</section>

<!– 第二种布局 绝对定位 父相子绝–>

<section class=”layout absolute”>

<style>

.absolute .left-center-right{

position: relative;

}

.absolute .left-center-right >div{

position: absolute;

}

.absolute .left{

width:300px;

left:0;

background-color: red;

}

.absolute .center{

left:300px;

right:300px;

background-color: yellow;

}

.absolute .right{

right:0;

width:300px;

background-color: green;

}

</style>

<article class=”left-center-right”>

<div class=”left”></div>

<div class=”center”>

<h1>这绝对定位布局</h1>

<p>这绝对定位布局</p>

</div>

<div class=”right”></div>

</article>

</section>


<!– 第三种布局 flexBox布局 –>

<section class=”layout flex”>

<style>

.flex{ margin-top:140px; }

.flex .left-center-right{ display: flex; }

.flex .left{ width:300px; background-color: red; }

.flex .center{ flex:1; background-color: yellow; }

.flex .right{ width:300px; background-color: green; }

</style>

<article class=’left-center-right’>

<div class=”left”></div>

<div class=”center”>

<h1>这flexBox布局</h1>

<p>这flexBox布局</p>

</div>

<div class=”right”></div>

</article>

</section>
<!– 这是第四种布局解决方案 表格 布局–>

<section class=”layout table”>

<style>

.table .left-center-right{ display: table; width:100%; height:100px; }
.table .left-center-right>div{ display: table-cell; }
.table .left{ width:300px; background-color: red; }

.table .center{ width:auto; background-color: yellow; }

.table .right{ width:300px; background-color: green; }

</style>

<article class=”left-center-right”>

<div class=”left”></div>

<div class=”center”>

<h1>这是表格布局解决方案</h1>

<p>这是表格布局解决方案</p>

</div>

<div class=”right”></div>

</article>

</section>
<!– 第五种解决方案 网格布局 –>

<section class=”layout grid”>

<style>

.grid .left-center-right{

display: grid;

grid-template-rows: 100px;

grid-template-columns: 300px auto 300px;

}
.grid .left{ background-color: red; }

.grid .center{ background-color: yellow; }

.grid .right{ background-color: green; }

</style>

<article class=”left-center-right”>

<div class=”left”></div>

<div class=”center”>

<h1>这是网格布局解决方案</h1>

<p>这是网格布局解决方案</p>

</div>

<div class=”right”></div>

</article>

</section>

</body>

</html>

附上最终效果图

  • 暂无推荐