学会用HTML-flex布局制作美丽的网页-外链论坛

qzmjef 发表于 2024-7-27 22:32:58

学会用HTML-flex布局制作美丽的网页

<h1 style="color: black; text-align: left; margin-bottom: 10px;">1、摘要</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f84abf13fb9f4a7cb74645f18a31ea9b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=VeWHK0lmpv9KOYJbCLdiuFC2pyM%3D" style="width: 50%; margin-bottom: 20px;"></div>
（OF作品展示）
OF之前介绍了用python实现数据可视化、数据分析及有些小项目，但基本都是后端的知识。想要做一个好看的小系统，咱们还要学有些前端的知识，今天OF将讲解怎样用pycharm（全栈研发不错的工具）做一张好看的网页，以后咱们就能够自己研发网页/网站放到互联网上。
重点内容：网页前端布局
适用人群：Python初学者，前端初学者
准备软件：pycharm
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2、pycharm操作说明</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1. 创建项目</h1>
1) 下载完成pycharm, 点击file-New Project...
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/9b06194a76aa428aac9a58f5c3175b43~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=gvSFqgQPbBA%2F7wykSuDlk%2B3Tlls%3D" style="width: 50%; margin-bottom: 20px;"></div>
2) 按下图过程创建一个项目，日前咱们选取Pure python就可，以后咱们能够学习用Django/flask等框架来做完整的系统
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/53c5a4762359479fa4bb78f219388e3e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=6kPwl1rc9WQixdgASQqB0rSRi%2B8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2. 创建HTML文件</h1>
1）在创建的项目空白处鼠标右键-New-HTML File
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f3797246682547f9a68100b92a61990d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=ofbAc35qwS86Jw5rKcNso4eBWU8%3D" style="width: 50%; margin-bottom: 20px;"></div>
2）输入英文的网页名字，尽可能不要输入中文/特殊字符
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/82f9a5065b8c46c4b11cf333ed26382e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=AjF741gmkmEnwUBS8o1BW8ZHIms%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3. HTML格式说明</h1>
当双击打开咱们创建后的HTML文件，大众会看到下面的界面
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8f31891395a74ea68940608dba8d5499~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=3ZFOGstfoHPD3ao0IDqtabhNrts%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、网页设计</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1. 草图绘制</h1>
在起始研发网页前，咱们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，能够手绘，亦能够在PPT上画。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3f57a1bf571a426c9f86b698be9ca07c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=hcauVFqu6ySVBO5mQBQX2eZKYGA%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ad8b81699cd04813ac291f1e325df320~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=UU8C%2FD6NFaY04X454htNnWRb%2F5I%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2. css名字定义</h1>
咱们先学习一个比较简单的布局如下图，大众能够看到下图已然画出了咱们需要添加的内容，要重视的地区是例如Taylor的照片和文字必定要用<div class=bord>框住，否则Taylor照片与文字将会是上下的关系，而不是上下
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/92cde81aa47d46c99858633f1eee8e98~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=Cw2sV4ImVwvvEy1PPllT1oYKVdo%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">4、网页研发</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1. body部分</h1>
按照以上的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>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2. 网页测试</h1>
1）鼠标移到代码处，在右上角咱们会看到一排浏览器，咱们点击其中一个运行
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/645eee55fe1f4d5cb814596143f3d507~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=jmMR65MDLydty%2BkLFEkRGa5m6dk%3D" style="width: 50%; margin-bottom: 20px;"></div>
2）日前看到的网页内容从上到下表示
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/16bdef5b183e4d298a8b36029ac23918~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=fyQCoGXbtmQEURj%2BQNG0b8VL5BU%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3. head部分</h1>
首要咱们简要认识下flex布局，大众能够看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/289f46cd92424a38a0a032b7bb81af78~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=T0LrRMawYXP2GEJ7%2BVcR3AbMp1E%3D" style="width: 50%; margin-bottom: 20px;"></div>
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>
运行结果：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/130f769c84634388b1e843e0cb34fab0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=TyiUmniQ1woEWgVk0SiEwLmeX5Q%3D" style="width: 50%; margin-bottom: 20px;"></div>
2）照片部分是3个<div class=bord>横向展示，因此要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}运行结果：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e5befb0da1194b3592d6c2a89d92d752~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=PQLaVWTh%2BIJ8ewXx88a%2BVLv5P%2BI%3D" style="width: 50%; margin-bottom: 20px;"></div>
3）照片之间靠太近，照片体积不一致，文字没居中，咱们在<style>里加入以下代码：.bord{
padding: 1rem 2rem;
}

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

.word {
text-align: center;
}运行结果：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/eaa9b0d491a8475792cbc0af8daf0217~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664155&x-signature=GIMEkWrGqsHPXr5hUvS%2Bpl4%2FLyo%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">5、总结</h1>
今天咱们学会了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-8-26 09:18:40

感谢你的精彩评论，带给我新的思考角度。

1fy07h 发表于 2024-10-1 07:14:32

你的话语如春风拂面，温暖了我的心房，真的很感谢。

nqkk58 发表于 2024-11-14 11:18:44

期待与你深入交流，共探知识的无穷魅力。

页: [1]

外链论坛's Archiver

学会用HTML-flex布局制作美丽的网页