学会用HTML-flex布局制作漂亮的网页

、摘要

（OF作品展示）

OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。

主要内容：网页前端布局

适用人群：Python初学者，前端初学者

准备软件：pycharm

二、pycharm操作说明

1. 创建项目

1) 下载完成pycharm, 点击file-New Project...

2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统

2. 创建HTML文件

1）在创建的项目空白处鼠标右键-New-HTML File

2）输入英文的网页名字，尽量不要输入中文/特殊字符

3. HTML格式说明

当双击打开我们创建后的HTML文件，大家会看到下面的界面

三、网页设计

1. 草图绘制

在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。

2. css名字定义

我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下

四、网页开发

1. body部分

根据上述的css名字定义，先填充<body>内的代码，那么我们就完成一半的工作了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

2. 网页测试

1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行

2）目前看到的网页内容从上到下显示

3. head部分

首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下

1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在<div id=intro>里另加了个<div class=peo>，代码如下：

(注：style中的#main对应body中的id=main, .main对应class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

运行结果：

2）图片部分是3个<div class=bord>横向展示，所以要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

运行结果：

3）图片之间靠太近，图片大小不一致，文字没居中，我们在<style>里加入以下代码：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

运行结果：

五、总结

今天我们学会了flex布局，今后所有的网页排版都可以实现了，祝愿大家都有所收获，完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。

者：sunshine小小倩

转发链接：https://juejin.im/post/599970f4518825243a78b9d5

我们刚开始学习Web前端时，就对HTML页面的布局特别感兴趣，上一讲《CSS初步介绍》中，讲解了CSS的入门知识，现在我们介绍一下HTML布局的知识。

HTML布局的方案有Table布局、最流行的DIV布局、以及HTML5建议的DIV布局的替代方案。

当HTML内容被浏览器显示时，整个HTML页面对使用者来说，就是一个显示信息与进行操作的界面。我们常常见到和下面类似的界面：

在这个界面中，整个HTML网页被分为标题区、导航区、内容去、状态栏区，下面我们分别用Table布局、DIV布局和HTML5建议的布局方案来实现该界面。

1、Table布局方案

使用Table布局方案，将整个浏览器的展示部分就是一个表格，然后我们设置好表格的单元格合并、大小即可。下面是使用Table布局方案的HTML页面：

<!DOCTYPE html>
<html>
<head>
<title>layout001</title>
<meta charset="utf-8" />
<style type="text/css">
html,body, table{
width:100%;
height:100%;
}
#first_row{
height:6%;
}
#second_row{
height:91%;
}
#third_row{
height:3%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header{
border:1px black solid;
color:white;
text-align:center;
background:green;
}
#navigator{
border:1px black solid;
color:white;
text-align:center;
background:blue;
}
#content{
border:1px black solid;
color:white;
text-align:center;
background:gray;
}
#footer{
border:1px black solid;
color:white;
text-align:center;
background:orange;
}
</style>
</head>
<body>
<table>
<tr id="first_row">
<td id="header" colspan="2">标题区</td>
</tr>

<tr id="second_row">
<td id="navigator" width="15%">导航区</td>
<td id="content" width="85%">内容区</td>
</tr>

<tr id="third_row">
<td id="footer" colspan="2">状态栏区</td>
</tr>
</table>
</body>
</html>

使用浏览器打开这个HTML文档，展示效果如下：

这个框架建立后，我们就可以在各个<td>内进行具体的开发了。

2、DIV布局方案

使用DIV布局方案，将整个浏览器的展示部分由各个DIV来分配。下面是使用DIV布局方案的HTML页面：

<!DOCTYPE html>
<html>
<head>
<title>layout002</title>
<meta charset="utf-8" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
body,#header,#second_row,#navigator,#content,#footer{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header{
height:6%;
width:100%;
color:white;
text-align:center;
background:green;
}
#second_row{
height:91%;
width:100%;
}
#navigator{
height:100%;
width:15%;
float:left;
color:white;
text-align:center;
background:blue;
}
#content{
height:100%;
width:85%;
float:right;
color:white;
text-align:center;
background:gray;
}
#footer{
height:3%;
width:100%;
color:white;
text-align:center;
background:orange;
}
</style>
</head>
<body>
<div id="header">
标题区
</div>
<div id="second_row">
<div id="navigator">
导航区
</div>
<div id="content">
内容区
</div>
</div>
<div id="footer">
状态栏区
</div>
</body>
</html>

使用浏览器打开这个HTML文档，展示效果如下：

这个框架建立后，我们就可以在各个<div>内进行具体的开发了。

可以发现，使用DIV元素，我们对页面进行布局时更方便。

3、HTML5推荐的布局方案

使用DIV布局方案，使用起来特别方便，基本上是前端开发者的首选。不过在HTML5标准来看，各个DIV的含义不明确，因此建议使用专门的元素来替代DIV。这是按照HTML5推荐的布局方案的页面：

<!DOCTYPE html>
<html>
<head>
<title>layout003</title>
<meta charset="utf-8" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
body,header,#second_row,nav,main,footer{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
header{
height:6%;
width:100%;
color:white;
text-align:center;
background:green;
}
#second_row{
height:91%;
width:100%;
}
nav{
height:100%;
width:15%;
float:left;
color:white;
text-align:center;
background:blue;
}
main{
height:100%;
width:85%;
float:right;
color:white;
text-align:center;
background:gray;
}
footer{
height:3%;
width:100%;
color:white;
text-align:center;
background:orange;
}
</style>
</head>
<body>
<header>
标题区
</header>
<div id="second_row">
<nav>
导航区
</nav>
<main>
内容区
</main>
</div>
<footer>
状态栏区
</footer>
</body>
</html>

使用浏览器打开这个HTML文档，展示效果和上面的一模一样：

使用这种方案，除了使用了含义明确的<header>、<nav>、<main>、<footer>元素外，和DIV方案没有区别。

这种做法貌似HTML更清晰，但实际上增加了元素的种类，增加了开发人员的记忆负担，容易出错。因此，前端程序员基本上都不喜欢这种方案。

在线咨询

上一篇：HTML 颜色
下一篇：js中静态方法与实例方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

学会用HTML-flex布局制作漂亮的网页

、摘 要

二、pycharm操作说明

1. 创建项目

2. 创建HTML文件

3. HTML格式说明

三、网页设计

1. 草图绘制

2. css名字定义

四、网页开发

1. body部分

2. 网页测试

3. head部分

五、总 结

1、Table布局方案

2、DIV布局方案

3、HTML5推荐的布局方案

您的项目需求

、摘要

五、总结