项目实训(七) —— HTML排版

先前的工作已经实现了基本的功能：读取数据库table展示食谱，上传图片及文字描述并插入数据库table内。但HTML排版问题一直没探究过，于是本篇旨在记录CSS和HTML配合的简单排版的过程。

总体来说就是要在HTML的字段写明class或id，再在CSS内定义某个class或id的各种样式属性，当然也包括定义<input.../>、<h3>...</h3>、<p>等官方统一的字段。

先前的HTML很简陋，只用到了极少的标签类型。为了更方便地实现排版，引入了不少<div>...</div>字段，不仅方便了声明class、id，也整理了代码布局：

<div class = "back">
     <input class="back_button" type="submit" value="返回主页" id="Button1"
     onclick="window.location.href='/'"/>
</div>


<div class = "part">
     <button class="side_button" type="button" onclick="show_upload()">上传菜单</button>
</div>

首先是要声明HTML和CSS文件之间的关联，以下语句放在HTML文件头部即可：

<link rel="stylesheet" href="{{ url_for('static',filename='show.css') }}">

这种关联手段适用于后端运行的情况下，利用url路由找到对应文件。

其次，是要明确CSS定义的三种写法，与HTML的声明相对应：

# 1. 官方定义的类型
<h3>输入菜名：</h3>

# 对应CSS：
h3 {
  color: rgb(155,13,20);
  text-align: center;
}


# 2. 自定义的class：
<input class="button" type="submit" value="继续上传" id="Button3"
       onclick="upload_again()"/>

# 对应CSS：
.button{
    width: 80px;
    height: 32px;
    border-radius: 85px;
    background-color: rgb(155,13,20);
    font-size: 15px;
    color: #fff;
    border: none;
}


# 3. 自定义的id：
<div id="ID">{{ user_id }}——{{ user_name }}</div>

# 对应CSS：
#ID{
    float: left;
    color: #fff;
    margin-left: 30px;
    font-family: "Microsoft YaHei UI Light";
}

所有的样式属性，借鉴“CSS 参考手册”： https://www.w3school.com.cn/cssref/index.asp

基本的为HTML排版的操作就这些，但想要排出看起来不错的版式，还需要不断调整参数、运行。

每次调完版式后运行都要利用“Ctrl+F5”清除缓存刷新改网页，变化才能反应出来。