1、摘 要
（OF作品展示）
OF之前介绍了用python实现数据可视化、数据分析及有些小项目，但基本都是后端的知识。想要做一个好看的小系统，咱们还要学有些前端的知识，今天OF将讲解怎样用pycharm（全栈研发不错的工具）做一张好看的网页，以后咱们就能够自己研发网页/网站放到互联网上。
重点内容：网页前端布局
适用人群：Python初学者，前端初学者
准备软件：pycharm
2、pycharm操作说明
1. 创建项目
1) 下载完成pycharm, 点击file-New Project...
2) 按下图过程创建一个项目，日前咱们选取Pure python就可，以后咱们能够学习用Django/flask等框架来做完整的系统
2. 创建HTML文件
1）在创建的项目空白处鼠标右键-New-HTML File
2）输入英文的网页名字，尽可能不要输入中文/特殊字符
3. HTML格式说明
当双击打开咱们创建后的HTML文件，大众会看到下面的界面
3、网页设计
1. 草图绘制
在起始研发网页前，咱们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，能够手绘，亦能够在PPT上画。
2. css名字定义
咱们先学习一个比较简单的布局如下图，大众能够看到下图已然画出了咱们需要添加的内容，要重视的地区是例如Taylor的照片和文字必定要用<div class=bord>框住，否则Taylor照片与文字将会是上下的关系，而不是上下
4、网页研发
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.2remsolid#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;
}运行结果：
5、总 结
今天咱们学会了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必定会一一解答的。
| 
发表于 2024-7-27 22:32:58
