• 【Python Web】Flask框架（三）CSS案例应用及样式模板的使用

    文章目录

    css

    快速了解css

    CSS (Cascading Style Sheets，层叠样式表），css是专门用来美化“标签”。，是一种用来为结构化文档（如 HTML 文档）添加样式（字体、间距和颜色等）的计算机语言。

    应用css的几种方式

    其中主要使用的为2，3种应用较多

    1. 可以直接写在html标签上
    2. 也可以在html中的head标签上写style（样式）标签
    3. 写到文件中去，comom.css即为我们的样式文件
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="common.css">
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在flask中应用

    • 在flask框架中开发不方便
      • 每次都需要重启
      • 规定有些文件需要放在特定文件夹
      • 新创建一个页面的时候就需要在python文件中添加函数和html文件
    • 解决方案：在pycharm中，为我们提供了一种非常便捷开发前端页面的工具，当我们写好之后再放入相应的位置，进行集成。

    在这里插入图片描述

    • 在html文件的右上角点击相应的浏览器即可查看效果。

    页面布局

    • 对于初学者，页面布局是一个很大的问题，往往不知道怎么布局。此时就需要借鉴，查看，分析别人的样式。
    1. 在浏览中使用查看页面源代码
    2. 点击如图所示位置，此时可以用光标在页面选择自己需要看的部分
      在这里插入图片描述
    3. 光标点击后，源代码即展现在右侧框内
    4. 分析别人的布局，样式，进行划分

    模板+CSS+构建页面

    • HTML标签

    固定格式，记住不同标签的效果，熟练使用
    h /div /span /a /img /ul /li /table /input /form

    • CSS样式

    引用CSS，进行页面划分，再去填充样式
    高度 /宽度 /块级 /行内 /浮动 /字体 /文字对齐方式 /内边距 /外边距

    小技巧
    • a标签是行内标签，行内标签的高度，内外边距，默认无效，要进行转换。
    <a style="margin-top:22px;display:inline-block">

    • 1
    • 垂直方向居中
      • 本文+line-height
      • 图片+边距
    • a标签链接后默认有下划线
    .a {
text-decoration:none;
}

    • 1
    • 2
    • 3
    • 鼠标放上去之后hover
    .c1:hover{

}

a:hovwe{

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 设置透明度,数字可自由设置
    opacity:0.5;  

    • 1
    • hover
    • after
    • position
    1. fixed

    固定在窗口的某个位置。

    • relative和absolute 一般是一起使用，相对的放在旁边

    • boder可以修改边框

    • background-color背景色

    注意：以上不是所有css样式
    • 我们大致了解了页面的样式和标签，具体的所有布局全局 CSS 样式 之后根据不同模板进行修改即可
    BootStrap
    • 是别人帮我们已经写好的CSS样式，如果我们想要使用这个BootStrap

    1. 下载BootStrap

    2. 使用

      • 在页面上引入BootStrap
      • 编写HTML时候，按照BootStrap的规定编写+自定义
      • 先创建一个目录结构，如下所示，并将插件的包解压缩后放入plugins中，解压缩后将目录改名称为bootstrap5，放在你的网站目录，例如static目录下，之所以改名是为了书写的时候简单。
        在这里插入图片描述
    • 代码如下
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <link rel="stylesheet" href="/static/plugins/bootstrap5/css/bootstrap.css">
head>
<body>
    <input type="button" value="提交" />

    <input type="button" value="提交" class="btn btn-primary" />
    <input type="button" value="提交" class="btn btn-success" />
    <input type="button" value="提交" class="btn btn-danger" />

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 运行效果如下，此时我们就已经应用了BootStrap中的样式
      在这里插入图片描述
  • 相关阅读:
    y46.第三章 Kubernetes从入门到精通 -- ceph 在k8s中的使用案例(十九)
    FreeRTOS学习笔记--概述
    Prometheus+Grafana实现监控报警
    C++获取系统毫秒级时间(自1970年1月1日至今的毫秒数)
    鸿蒙笔记--Socket
    Qt OpenMP使用
    RPA学起来快吗，相比Python学哪个更快？
    原子类在多线程编程中的重要性
    【CPP】栈简介及简化模拟实现
    网络安全（黑客）自学笔记
  • 原文地址：https://blog.csdn.net/qq_51670115/article/details/126885186