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

最新推荐文章于 2025-02-12 08:29:30 发布

B258202

最新推荐文章于 2025-02-12 08:29:30 发布

阅读量595

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html5

本文链接：https://blog.csdn.net/B258202/article/details/118682238

本文记录了使用HTML和CSS进行网页基本排版的过程。通过在HTML中添加class和id，然后在CSS中定义样式属性，实现了按钮、标题和段落的美化。关联CSS文件的方法是通过HTML头部的<link>标签，引用静态文件路径。调整样式属性以达到理想的版面效果，并强调了每次修改后需清除缓存以查看更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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