一、摘要

（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一定会一一解答的。

学会用HTML-flex布局制作漂亮的网页相关推荐

使用flex布局制作微信小程序案例
上面是效果图,主要用到了一个flex布局.不得不说,这个flex是真的好用,还有微信小程序的scroll-view标签,这个标签是当微信小程序内容部分超出,就显示一个滚动条. tips(资料和源码我上 ...
【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
可以自己去找动画人物纯色背景,这样抠图比较容易. 字体是我随便找的下面是代码(看不懂没事): <!DOCTYPE html> <html lang="en"&g ...
html+css+flex布局制作个人简历
知识点: HTML,CSS,Flex弹性布局. 重点: Flex弹性布局,sticky定位. 目录: 图片自备源码 index.html <!DOCTYPE html> <html ...
Day04 利用flex布局完成PC端网页设计CSS+html部分
没学JS,而且还是不会创建仓库,所还是干巴巴的代码了 HTML <!DOCTYPE html> <html lang="en"><head>&l ...
flex布局（flex容器，flex属性）
文章目录前言一.flex(Flexible Box)概述二.flex容器,flex属性 1.flexBox弹性模型 2.基本概念详解 3.弹性容器的属性 4.弹性元素的属性 5.圣杯布局 6.垂 ...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left.right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应. 要求:允许增 ...
flex布局详解（配图-简洁易懂）
FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...
Flex布局学习（二）
上一篇<Flex布局学习(一)>主要学了flex的基本用法及作用,现在来把flex具体运用到实例中,看看flex的弹性布局效果. 一.垂直居中布局不知道有多少小伙伴在前端笔试面试时被问 ...
html flex 上中下布局,flex 布局
FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...

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

一、摘要

二、pycharm操作说明

1. 创建项目

2. 创建HTML文件

3. HTML格式说明

三、网页设计

1. 草图绘制

2. css名字定义

四、网页开发

1. body部分

2. 网页测试

3. head部分

五、总结

学会用HTML-flex布局制作漂亮的网页相关推荐

最新文章

热门文章

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

一、摘 要

二、pycharm操作说明

1. 创建项目

2. 创建HTML文件

3. HTML格式说明

三、网页设计

1. 草图绘制

2. css名字定义

四、网页开发

1. body部分

2. 网页测试

3. head部分

五、总 结

学会用HTML-flex布局制作漂亮的网页相关推荐

最新文章

热门文章

一、摘要

五、总结