2017百度前端技术学院习题-03

最新推荐文章于 2022-11-11 15:11:49 发布

HungryPlayer

最新推荐文章于 2022-11-11 15:11:49 发布

阅读量542

点赞数

分类专栏：前端任务文章标签：前端学院习题任务定位与浮动

本文链接：https://blog.csdn.net/jiejiao509/article/details/79943417

版权

前端任务专栏收录该内容

6 篇文章 0 订阅

订阅专栏

习题任务03

收获:

1.定位与浮动的异同

2.注意编码的格式,及编码的名称

3.新知识: align-items布局,弹性布局

4.习题任务代码如下:

03-main.css

html {
  font-size: 72.5%;
}

body {
  font-size: 1rem;
}

#intro {
  display: flex;
  align-items: flex-start;
  background-color: #eee;
  padding: 20px;
  margin: 20px;
}

aside, article {
  background-color: #fff;
  border: 1px solid #999;
  margin: 10px;
  padding: 20px;
}

/*团队介绍版块*/
#team {
  padding: 10px;
  width: 200px;
}

#team figure {
  display: flex;
  flex-flow: row;
}
#team img {
  width: 80px;
  height: 80px;
}

/*内容版块*/
#content {
/*   flex-flow: column; */
}

#content p{
  font-size: 1rem;
}

/*个人展示版块*/
#member {
  width: 120px;
/*   flex-direction: column; */
}

#member img {
  width: 80px;
  height: 80px;
}

03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-三栏式布局</title>
    <link rel="stylesheet" href="03-main.css">
</head>
<body>
    <div id="page">
        <div id="intro">
            <!--团队介绍版块-->
            <aside id="team">
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                    <figcaption>Tamer</figcaption>
                </figure>
            </aside>
            <!--主体内容版块-->
            <article id="content">
                <h2>Tamer</h2>
                <p>
                    Tamer 英文原意训兽者，Code Tamer 即有 Code Master 的意味。最早由 PlanK 项目开始就在用了，
                    但我们只是一个小团队，甚至到了现在也少有联系，只是偶尔我还会用它罢了。
                </p>
                <h2>Tamer</h2>
                <p>
                    Tamer 英文原意训兽者，Code Tamer 即有 Code Master 的意味。最早由 PlanK 项目开始就在用了，
                    但我们只是一个小团队，甚至到了现在也少有联系，只是偶尔我还会用它罢了。
                </p>
                <h2>Tamer</h2>
                <p>
                    Tamer 英文原意训兽者，Code Tamer 即有 Code Master 的意味。最早由 PlanK 项目开始就在用了，
                    但我们只是一个小团队，甚至到了现在也少有联系，只是偶尔我还会用它罢了。
                </p>
            </article>
            <!--个人展示版块-->
            <aside id="member">
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                </figure>
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                </figure>
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                </figure>
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                </figure>
                <figure>
                    <img src="001.jpg" width="80px" height="80px" alt="Tamer">
                </figure>
            </aside>
        </div>
    </div>     
</body>
</html>

HungryPlayer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017百度前端技术学院习题-03

习题任务03收获:1.定位与浮动的异同2.注意编码的格式,及编码的名称3.新知识: align-items布局,弹性布局4.习题任务代码如下:03-main.css html { font-size: 72.5%;}body {...
复制链接

扫一扫