英语网站建设(河南网站建设)

zhangyang 2022-05-12 阅读:14
  

一、摘 要

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

  (作品展览)

  之前介绍的数据可视化,数据分析和一些用python做的小项目,但基本都是后端知识。要做一个好看的小系统,还得学习一些前端知识。今天OF就来讲解一下如何用pycharm(全栈开发的好工具)制作一个好看的网页。后来,我们可以开发自己的网页/网站,放在互联网上。

  主要内容:网页前端布局

  适用人群:Python初学者,前端初学者

  准备软件:pycharm

二、pycharm操作说明

  

1. 创建项目

   1)下载pycharm,点击文件-新建项目。

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

  2)按照以下步骤创建一个项目。目前可以选择纯python。以后可以学习用Django/flask之类的框架做一个完整的系统。

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

2. 创建HTML文件

   1)在创建的project -New-HTML文件的空白处单击右键

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

  2)用英文输入网页名称,尽量不要输入中文/特殊字符。

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

3. HTML格式说明

  当你双击打开我们创建的HTML文件时,你会看到如下界面。

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

三、网页设计

  

1. 草图绘制

  在我们开始开发网页之前,我们需要设计出我们想要制作网页的东西。为了节约成本,OF是我们自己设计的页面样式,可以手绘,也可以画在PPT上。

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

height="703" alt="学会用HTML-flex布局制作漂亮的网页" >

  

2. css名字定义

  我们先学习一个比较简单的布局如下图,大家可以看到下图已经画出了我们需要添加的内容,要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住,否则Taylor图片与文字将会是左右的关系,而不是上下

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

  

四、网页开发

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)鼠标移到代码处,在右上角我们会看到一排浏览器,我们点击其中一个运行

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

  2)目前看到的网页内容从上到下显示

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

  

3. head部分

  首先我们简要了解下flex布局,大家可以看到下图中#main的style样式中display:flex,在body部分将3个颜色内容框在<div id="main">中,运行结果是3个颜色的内容横向展示了,而不是上下

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

  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>

  运行结果:

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

  2)图片部分是3个<div class=bord>横向展示,所以要在框住它们的<div id=pic1>样式中设置flex布局,在<style>里加入以下代码:

#pic1 {    display: -webkit-flex; /* Safari */    display: flex;    justify-content: center;}

  运行结果:

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

  3)图片之间靠太近,图片大小不一致,文字没居中,我们在<style>里加入以下代码:

.bord{    padding: 1rem 2rem;}.img {    border: 0.2rem solid #e3e3e3;    max-width: 15rem;    height: 22rem;}.word {    text-align: center;}

  运行结果:

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

  

五、总 结

  今天我们学会了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一定会一一解答的。

评论(0)

二维码