百度前端学院学习DAY07-08 学习布局

其他 2018-06-24 07:18:25 阅读次数: 3

百度前端学院学习DAY07-08

第七天到第八天，学习布局

课程目标

通过大量练习，来学习布局的各种方式

复习

首先对上一个任务进行复习，如果还没有完成上一课任务的同学，请先完成上一个任务。

课程描述

阅读

编码

分别尝试使用Float、Position或者Flexbox来实现如下需求：

  • 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
  • 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
  • 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
  • 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
  • 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

要求：

  • 每一个需求都尽可能多地用多种方式来实现

编码

参考如下设计稿实现HTML页面及CSS样式：链接: https://pan.baidu.com/s/1IndqG9nanVhKxwysibZZRg 密码: vfs6

设计稿描述：

  • 设计稿分为头部，中间的Banner，主导航，内容区域，底部
  • 头部区域为100%宽的一个深色背景，头部中间有一块960px的定宽居中区域，里面包括了左边的Logo和右上角导航
  • Banner为100%宽的区块，中间右下方有banner轮显的当前图片数字的示例，其中正在显示的图片对应的数字有特殊样式（注意不需要实现轮显banner的业务逻辑，只是按照设计稿做静态样式）
  • 主导航区域，有一个100%宽的灰色线条，线条之上，在中间960px区域是导航菜单，当前正在浏览页对应的菜单有特殊样式
  • 主要内容区域，宽度为960px，里面每个内容都有至少80px的padding，每一个内容的宽度均为自适应，可以使用flex布局

提交

把你的代码提交到 Github，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在Github中预览你的HTML代码，并提交预览地址。

验证

这两天的内容稍多，请反复确认你是否掌握了以下概念

  • Position相关概念及使用Postion进行布局的场景和方法
  • Flexbox相关概念及使用Flexobx进行布局的场景和方法
  • 掌握常用的两栏、三栏布局的各种方式

任务学习情况：

  1. 认真阅读了上述各类文档，发现自己还不熟练的地方，进行练习；
  2. 完成上述任务的编码。

1.实现一个两栏布局，左侧占30%宽度，右侧占70%宽度

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <link rel="stylesheet" href="003_style.css">
</head>
<body>
    <div class="container">
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
    </div>
</body>
</html>

CSS01-float实现

* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    overflow: auto;  /*清除浮动*/
    box-sizing: content-box;
    background-color: #99CC99;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现01 */
.left {
    float: left;
    box-sizing: border-box;
    width: 30%;
}
.right {
    float: right;
    box-sizing: border-box;
    width: 70%;
}

CSS02-inline-block实现

* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    height: 100px;
    background-color: #99CC99;
    /* font-size: 0; */
    font-size: 0px;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现02 */
.left {
    display: inline-block;
    box-sizing: border-box;
    width: 30%;
    vertical-align: top;
    font-size: 16px;

}
.right {
    display: inline-block;
    box-sizing: border-box;
    width: 70%;
    vertical-align: top;
    font-size: 16px;
}

CSS03-float+margin实现

* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    overflow: hidden;
    height: 100px;
    background-color: #99CC99;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现03 */
.left {
    float: left;
    width: 30%;
}
.right {
    margin-left: 30%;
    width: 70%;
}
//////////////////////////////////////
* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    height: 100px;
    overflow: auto;  /*清除浮动*/
    background-color: #99CC99;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现05 */
.left {
    float: left;
    margin-right: 0;
    width: 30%;
}
.right {
    margin-left: 0;
    overflow: auto;
    width: 70%;   /*可省略*/
}

CSS04-position+margin实现

* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    height: 100px;
    background-color: #99CC99;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现04 */
.left {
    position: absolute;
    width: 30%;
}
.right {
    margin-left: 30%;
    width: 70%;
}

CSS05-flex实现

* {
    margin: 0;
    padding: 0;
}
html,body {
        height: 100%;/*高度百分百显示*/
}
/* 背景色为了区分 */
.container {
    height: 100px;
    display: flex;
    align-items: flex-start;
    background-color: #99CC99;
}
.left {
    background-color: #999966;
}
.right {
    background-color: #CC0033;
}
/* 布局实现06 */
.left {
    width: 30%;
}
.right {
    width: 70%;
}

以上方法各有利弊，根据实际情况选择！

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <link rel="stylesheet" href="006_style.css">
</head>
<body>
    <div class="container">
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
    </div>
</body>
</html>

CSS01-inline-block实现

* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 100px;
    background-color: #CC0033;
}
/* 布局实现01 */
.container {
    box-sizing: content-box;
    font-size: 0; /*消除空格的影响*/
}
.left,
.right {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    box-sizing: border-box;
}
.right {
    width: calc(100% - 250px);
}

CSS02-双float实现

* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 100px;
    background-color: #CC0033;
}
/* 布局实现01 */
.container {
    overflow: auto;
    box-sizing: content-box;
}
.left,
.right {
    float: left;
    box-sizing: border-box;
}
.right {
    width: calc(100% - 250px);
}

CSS03-float+margin实现

* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 100px;
    background-color: #CC0033;
}
/* 布局实现01 */
.container {
    overflow: hidden;  /*触发BFC清除浮动*/
}
.left {
    float: left;

}
.right {
    margin-left: 250px;
}
//////////////////////////////////////////////////////////////
* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 0;
    background-color: #CC0033;
}
/* 布局实现01 */
.container {
    overflow: auto;
}
.left {
    float: left;
    margin-right: 100px;
}
.right {
    overflow: auto;
}

CSS04-position+margin实现

* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 100px;
    background-color: #CC0033;
}
/* 布局实现01 */
.left {
    position: absolute;
}
.right {
    margin-left: 250px;
}

CSS05-flex实现

* {
    margin: 0;
    padding: 0;
}
/* 背景色为了区分 */
.container {
    background-color: #99CC99;
}
.left {
    width: 150px;
    background-color: #999966;
}
.right {
    margin-left: 100px;
    background-color: #CC0033;
}
/* 布局实现01 */
.container {
    display: flex;
    align-items: flex-start;
}
.left {
    flex: 0 0 auto;
}
.right {
    flex: 1 1 auto;
}

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

道理同上，在上述代码基础上进行修改即可实现

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

01-position实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }   
        .left,.right {
            position: absolute;
            top: 0;
            width: 150px;
        }
        .left {
            left: 0;
            background-color: #a0b3d6;
        }
        .right {
            right: 0;
            background-color: #a0b3d6;
        }
        .middle {
            margin: 0 160px;
            background-color: #ffe6b8;
        }
    </style>
</head>
<body>
        <div class="middle">这是中间</div>
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
</body>
</html>

02-float+margin实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }   
        .mian {
            float: left;
            width: 100%;
        }
        .middle {
            margin: 0 160px;
            background-color: #ffe6b8;
        }
        .left,.right {
            float: left;
            width: 150px;
            background-color: #a0b3d6;
        }
        .left {
            margin-left: -100%;
        }
        .right {
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="middle">这是中间</div>
    </div>
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
</body>
</html>

03-float实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle {
            margin: 0 160px;
            background-color: #ffe6b8;
        }   
        .left,.right {
            width: 150px;
            background-color: #a0b3d6;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
        <div class="middle">这是中间</div>
</body>
</html>

04-flex实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            align-items: flex-start;
            width: 100%;
            margin: 0 auto;
        }
        .left,.right {
            flex: 0 1 150px;
            height: 150px;
            background-color: #a0b3d6;
        }
        .middle {
            flex-grow: 1;
            height: 150px;
            background-color: #ffe6b8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">这是左边</div>
        <div class="middle">这是中间</div>
        <div class="right">这是右边</div>
    </div>
</body>
</html>

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

01-position实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }   
        .left,.middle {
            position: absolute;
            top: 0;
            width: 150px;
        }
        .left {
            left: 0;
            background-color: #a0b3d6;
        }
        .middle {
            left: 150px;
            background-color: #ffe6b8;
        }
        .right {
            margin-left: 300px;
            background-color: #a0b3d6;
        }
    </style>
</head>
<body>
        <div class="left">这是左边</div>
        <div class="middle">这是中间</div>
        <div class="right">这是右边</div>
</body>
</html>

02-flex实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            align-items: flex-start;
            width: 100%;
            margin: 0 auto;
        }
        .left,.middle {
            flex: 0 1 150px;
            height: 150px;
            background-color: #a0b3d6;
        }
        .middle {
            background-color:#ffe6b8; 
        }
        .right {
            flex-grow: 1;
            height: 150px;
            background-color: #a0b3d6;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">这是左边</div>
        <div class="middle">这是中间</div>
        <div class="right">这是右边</div>
    </div>
</body>
</html>

总结01

  • 上述实现中需要注意HTML代码的顺序
  • Flex布局相对代码量最少的

6.网站练习

设计稿效果预览

https://infrontofme.github.io/IFE_IN2018/006DAY-07%20and%20DAY-08/ife%E4%BB%BB%E5%8A%A1%E5%9B%BE.png

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="header-mid">
            <div class="logo">
                Logo
            </div>
            <div class="nav-head">
                <a href="#">Github</a>
                <a href="#">Register</a>
                <a href="#">Login</a>
            </div>
        </div>
    </div>
    <!-- banner图区 -->
    <div class="banner">
        <div class="page01">1</div>
        <div class="page02">2</div>
        <div class="page03">3</div>
        <div class="page04">4</div>
    </div>
    <!-- 主导航区 -->
    <div class="main">
        <div class="nav-main">
            <div class="nav-home">HOME</div>
            <div class="nav-profile">PROFILE</div>
            <div class="nav-about">ABOUT</div>
        </div>
    </div>
    <!-- 主要内容区 -->
    <div class="main-container">
        <div class="row">
            <div class="grid-cell">This is Content1</div>
            <div class="grid-cell">Maybe Content2</div>
            <div class="grid-cell">Content3</div>
        </div>
        <div class="row">
            <div class="grid-cell">Content4</div>
            <div class="grid-cell">Content5</div>
            <div class="grid-cell">Content6</div>
            <div class="grid-cell">Content7</div>
        </div>
        <div class="row">
            <div class="grid-cell">Content8</div>
            <div class="grid-cell">Content9</div>
            <div class="grid-cell">Content10</div>
        </div>
    </div>
    <!-- 页脚区域 -->
    <div class="footer">
        &copy; 2018 ife.baidu.com
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
}
/* header区 */
.header {
    width: 100%;
    height: 80px;
    color: #fff;
    background-color: #222222;
}
.header-mid {
    margin: 0 auto;
    width: 960px;
    height: 80px;
}
.logo {
    float: left;
    margin-left: 20px;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
}
.nav-head {
    float: right;
    margin-right: 20px;
    height: 80px;
    line-height: 80px;
}
.nav-head a {
    display: inline-block;
    margin: 0 5px;
    color: #fff;
}
/* banner区 */
.banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #00CC00;
    opacity: 0.9;
}
.page01, 
.page02,
.page03,
.page04 {
    position: absolute;
    bottom: 10px;
    width: 20px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #999999;
    background-color: #EEEEEE;
    opacity: 0.8;
    cursor: pointer;
}
.page04 {
    right: 200px;
}
.page03 {
    right: 230px;
}
.page02 {
    right: 260px;
}
.page01 {
    right: 290px;
}
/* 主导航区 */
.main {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #CCC;
}
.nav-main {
    margin: 0 auto;
    width: 960px;
    height: 60px;
}
.nav-home,
.nav-profile,
.nav-about {
    float: left;
    box-sizing: border-box;
    margin-top: 16px;
    width: 100px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border: 1px solid #CCC;
    border-bottom: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #fff;
    cursor: pointer;
}
.nav-profile,
.nav-about {
    background-color: #DDD;
}
/* 主内容区 */
.main-container {
    margin: 10px auto;
    width: 960px;
}
.row {
    display: flex;
}
.grid-cell {
    flex: 1 1 auto;
    box-sizing: border-box;
    margin: 5px;
    min-width: 200px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    border: 1px solid #DDD;
    box-shadow: 0 0 5px #DDD;
}
.row:nth-child(1) .grid-cell:nth-child(1),
.row:nth-child(1) .grid-cell:nth-child(2){
    flex: 0 0 34%;
}
/* 页脚区 */
.footer {
    box-sizing: border-box;
    padding-top: 20px;
    width: 100%;
    height: 120px;
    color: #fff;
    text-align: center;
    background-color: #888888;
}

实现效果demo

https://infrontofme.github.io/IFE_IN2018/006DAY-07%20and%20DAY-08/index.html

总结02

  • 通过上面的练习，对CSS属性使用的更加熟练
  • 对布局方式有了更好的理解
  • 对布局模块化的拆分设计有了进一步的认识

以上。

猜你喜欢

转载自blog.csdn.net/weixin_39611130/article/details/80189470
今日推荐
周排行
深度学习------Lingvo框架下的加速通道GPipe
webjars管理静态资源
C专家编程_2.2
mysql 源码安装
json文件操作
123231432
注解的实现
Spring MVC 控制器
《人月神话》读后感二
C#使用HttpWebRequest和HttpWebResponse上传文件示例
每日归档
更多
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)
2024-09-05(0)
2024-09-04(0)
2024-09-03(0)
2024-09-02(0)
2024-09-01(0)
2024-08-31(0)
2024-08-30(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022