学会用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.2remsolid#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一定会一一解答的。
标签：
相关文章：
cpc广告怎么做才能达到最好的效果？6大cpc广告操作技巧分享！
电商销售员每日精心选品，如何提升销量？,喜茶网站推广方案策划
隆基仪表取得NB-IoT物联网智能水表自适应网络上报方法专利，专利技术能达到合理利用NB‑IoT网络资源和使NB‑IoT物联网智能水表在网络资源良好的网络环境中进行数据传输而达到延长水表电池寿命的目的她出道24年一手好牌打的稀烂，从娱乐圈“宠儿”变“弃儿”
一个人，仅需两周搞定小程序开发？
五个适合新手宝妈的不出门就能赚钱的副业
一键链接，轻松访问新门户
“高效推广，一语惊人，快速吸睛！”
手机搜索排名优化
学生信息被制作成颜值打分网站？人民大学回应38岁女士哭诉：再婚后毛都没有了，这样的婚姻还能要吗？
经济价格优化，如何实现双倍效益？,论坛营销推广软件开发
百度SEM初级认证，掌握核心关键词，你问对了吗？,衢州seo整站推广方案
新外包公司，前景广阔，人才缺口大
在潍坊优化网站，如何精准嵌入核心关键词？,淄川邹平网站优化方案
聘用期限3年是什么意思
百度SEM竞价策略，领先市场制胜之道！
家电维修怎么推广产品,家电维修b2b电子商务网站
轻松创作，高效助手，写作利器！
河南百度合作伙伴
辞退员工需要提前通知吗
点赞神器，一键刷赞平台
一键源码获取，效率翻倍！
唐山人才汇，求职招聘速达站
河源有哪家抖音代运营公司值得推荐？
数据增效，评估精炼
网络消费者
惠州SEO优化，如何提升关键词排名？,交城本地网站推广在哪里
勾股定理，直角三角形三边关系如何？,瑞金网络营销推广公司
张丽俊丨管人，就干这5件事
特效酷炫！UP主自制小米SU7动态互动演示网页 网友以为官方出品张曼玉说的对，从“断崖式老去”的海清身上：看到娱乐圈残酷真相
睢宁SEO，精准优化，提升排名
文军营销专访资深公关专家：17年公关经历教会了我什么？
首都广播电视节目制作业协会年会在京举行中国第一美女马艳丽，隐居山林享受田园生活
精准触达，高效营销，一封即达！
这些网站推广的好处，你都了解吗
论坛热链速刷，高效推广神器
南阳网站优化，如何提升排名效果？,淘宝 网站建设教程视频
从0到1搭建私域运营体系
普通员工职务怎么填
襄樊附中·卓越教育
ChatGPT爆火插件：网页制作，看图写菜谱、解析代码等样样齐活儿广西一女生即将开学，狗狗仿佛意识到什么，赖在行李箱里不肯离开
短视频SEO推广团队，如何让企业短视频内容营销更上一层楼？,seo劫持新手教学
轻松掌握百度搜索排名查询技巧
全球电商新纪元
医院市场推广：精准锁定目标患者，您了解其独特策略吗？,吉林做网站推广
网络推广与网络营销，哪种更注重效果？,云客多seo怎么优化
Sem速写
浙江规范网络直播营销行为：不通过虚假内容 / 人设等方式诱导消费者
优化关键词，快速提升网站排名
把小商业网站做成大公司形象
深圳百度推广，精准触达，高效转化
