第六课《学习布局》作业

2019-02-26 23:42:34 阅读：238 来源： 互联网

标签：第六课 color 布局作业 300px height 宽度 background left

一、分别尝试使用 float、position、flex 实现如下需求

1.实现一个两栏布局，左侧占百分之三十宽度，右侧占百分之七十宽度

DOM结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>try</title>
        <link rel="stylesheet" href="try.css">
    </head>
    <body>
        <div id="container">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </body>
</html>

float样式:

body {
    margin: 0;
}

#left {
    float: left;
    width: 30%;
    height: 300px;
    background-color: aqua;
}

#right {
    float: left;
    width: 70%;
    height: 300px;
    background-color: bisque;
}

position样式:

body {
    margin: 0;
}

#container {
    position: relative;
}

#left {
    position: absolute;
    width: 30%;
    height: 300px;
    background-color: aqua;
}

#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 300px;
    background-color: bisque;
}

flex样式

body {
    margin: 0;
}

#container {
    display: flex;
}

#left {
    height: 300px;
    background-color: aqua;
    flex-grow: 3;
}

#right {
    height: 300px;
    background-color: bisque;
    flex-grow: 7;
}

2.实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

3.实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

4.实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

5.实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

二、参考如下设计稿实现HTML页面及CSS样式

标签：第六课,color,布局,作业,300px,height,宽度,background,left
来源： https://www.cnblogs.com/lixiang12/p/10440970.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第六课《学习布局》作业

一、分别尝试使用 float、position、flex 实现如下需求

二、参考如下设计稿实现HTML页面及CSS样式