一、摘 要
（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的图片和文字一定要用框住，否则Taylor图片与文字将会是左右的关系，而不是上下
四、网页开发
1. body部分
根据上述的css名字定义，先填充内的代码，那么我们就完成一半的工作了，代码如下：
<meta charset="UTF-8">
人物介绍
Taylor
东
乔
2. 网页测试
1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行
2）目前看到的网页内容从上到下显示
3. head部分
首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在中，运行结果是3个颜色的内容横向展示了，而不是上下
1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在里另加了个，代码如下：
(注：style中的#main对应body中的id=main, .main对应class=main)
<meta charset="UTF-8">
人物介绍
Taylor
东
乔
运行结果：
2）图片部分是3个横向展示，所以要在框住它们的样式中设置flex布局，在
人物介绍
Taylor
东
乔
今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。
