先前的工作已经实现了基本的功能:读取数据库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”清除缓存刷新改网页,变化才能反应出来。