当前位置： 首页 > news >正文

flask_知识点3_css

news 2026/5/16 11:48:37

flask_知识点3_css

  • 样式
    • 1高度和宽度
    • 2行内和块级
    • 3字体和颜色
    • 4文字对齐方式
    • 5浮动
    • 6 内边距
    • 6 外边距
  • ！css重点
    • 1、css样式
    • 2、分析页面布局
    • 3、参考别人的成果

css引用方式
1 在标签上（不建议使用） 

// An highlighted block
var foo = 'bar';

2 在head标签中写style标签（针对一个页面建议使用）

// An highlighted block
var foo = 'bar';

3 写在文件中（针对多个页面建议使用）

// An highlighted block
var foo = 'bar';

选择器：类选择器 (用的多)、标签选择器、后代选择器、
1 ID选择器

#c1{color:red;
}<div id='c1'></div>

2 类选择器 (用的多)

.c1{color:gold;
}<div class='c1'></div>

3 标签选择器

div{color:gold;
}<div>xx</div>

4 属性选择器

5 后代选择器

.yy li{color:gold;
}
.yy >a{color:gold;
}
<div calss="yy"><a>百度</a><li>a</li><li>b</li>
</div>

多个样式和覆盖

样式

1高度和宽度

    <style>.c1{height:300px;width:300px;}</style>

#宽度支持百分比
#行内标签 不行，块级标签可以

2行内和块级

    <style>.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}</style>

3字体和颜色

    <style>.c1{cokor:red;font-size:58px;font-weight:200;font-family: Georgia, serif;}</style>

4文字对齐方式

    <style>.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;text-align:center;/*水平方向居中*/line-height:59px;/*垂直方向居中*/}</style>

5浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item{float:left;height: 170px;width: 280px;border: 1px solid red;}</style>
</head>
<body><div><div class="item">左边</div><div class="item">左边</div><div class="item">左边</div><div class="item">左边</div><div class="item">左边</div><div style="clear:both">右边</div> //删除了后面的东西会出去</div>
<div> 你好呀</div>
</body>
</html>

6 内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{float:left;height: 400px;width: 280px;border: 1px solid red;padding:20px 10px 30px 40px;padding-top:20px;padding-left:20px;padding-right:20px;}</style>
</head>
<body><div class="outer"><div style="background-color: gold">听妈妈的话</div><div>胜多负少</div></div>
</body>
</html>

6 外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="outer"><div style="height:200px;background-color: gold">听妈妈的话</div><div style="height:100px;background-color: red;margin-top:20px">听妈妈的话</div></div>
</body>
</html>

！css重点

1、css样式

高度、宽度、块级/行内/块级行内、浮动、字体、文字对齐方式、内边距、外边距关于边距：-body-区域居中

消去body标签的默认边距

        body{margin: 0;}

文本居中

    <div style="width:200px; background-color:pink; text-align:center">文本局中</div>

区域居中：
自己要有宽度+margin-left:auto;margin-right:auto;

        .c1{width:980px;background-color:pink;height:100px;margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->}<div class="c1">左边</div>

父亲没有高度、宽度，被孩子支撑起来
如果浮动存在，一定记得加入（浮动兄弟结点的最后）

        <div style="clear:both"></div> //删除了后面的东西会出去

2、分析页面布局

根据你看到的页面把他们划分为很多小的区域，再自己去填充样式。

3、参考别人的成果

相关文章：

flask_知识点3_css

flask_知识点3_css样式1高度和宽度2行内和块级3字体和颜色4文字对齐方式5浮动6 内边距6 外边距&#xff01;css重点1、css样式2、分析页面布局3、参考别人的成果css引用方式1 在标签上&#xff08;不建议使用&#xff09;// An highlighted block var foo bar;2 在head标签中写…...

编程日记 2023/4/16 0:43:38

Redis_概述_特性_IO模型

本章要点 掌握NoSql数据库的概念和与sql数据库的区别初步了解Redis内存数据库了解Redis内存数据库的优点及其原因掌握Redis的多线程IO模型学习Redis的安装和配置 Redis简介 Redis 全称 Remote Dictionary Server 远程字典服务! 使用C语言编写,支持网络,可基于内存也可以持久化…...

编程日记 2023/4/16 0:38:36

[论文速览] Sparks of Artificial General Intelligence: Early experiments with GPT-4

Sparks of Artificial General Intelligence: Early experiments with GPT-4 2023.3.22 微软官方发布了目前人类史上最强AI模型 GPT-4 的综合能力评估论文&#xff0c;总所周知&#xff0c;2023年是通用人工智能&#xff08;Artificial General Intelligence&#xff0c;AGI&a…...

编程日记 2023/4/16 0:33:35

舔狗日记：学姐生日快到了，使用Python把她的照片做成视频当礼物

舔狗日记1前言一、需要调入的模块二、实现合并多张图片转成 mp4 视频三、优化改进一下总结前言 这不是学姐生日快到了&#xff0c;于是我学了一手使用Python来把学姐的照片生成为视频&#xff0c;到时候给她一个惊喜&#xff01; 好了先不舔了&#xff0c;下面分享一下用pytho…...

编程日记 2023/4/16 0:28:33

从《移动互联网应用程序（App）收集使用个人信息自评估指南》看个人信息保护着力点

为指导应用运营者对自身收集、使用个人信息行为进行自查自纠&#xff0c;2019年3月&#xff0c;应用专项治理工作组发布了《应用违法违规收集使用行为自查自查指南》。个人信息”。随着对App违法收集、使用个人信息行为评价工作的开展和深入&#xff0c;《App违法违规收集、使用…...

编程日记 2023/4/16 0:23:33

电脑0x0000001A蓝屏错误怎么U盘重装系统教学

电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug&#xff0c;只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢&#xff1f;来看看以下的详细操作方法教学吧。 准备工作&…...

编程日记 2023/6/1 5:53:39

Day939.如何小步安全地升级数据库框架 -系统重构实战

如何小步安全地升级数据库框架 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于如何小步安全地升级数据库框架的内容。 当消息组件的数据存储都是采用 SQL 拼写的方式来操作&#xff0c;这样不便于后续的扩展及维护。除此之外&#xff0c;相比前面的其他重构&#x…...

编程日记 2023/5/31 21:22:55

2023 年十大 API 管理趋势

作者郑玩星&#xff0c;API7.ai 技术工程师。 阅读原文 什么是 API&#xff1f;什么是 API 管理&#xff1f; 近期&#xff0c;AIGC&#xff08;AI Generated Content&#xff0c;生成式人工智能&#xff09;在各行业的应用日趋普及。AIGC 服务提供商通过 API 向外部提供其内…...

编程日记 2023/4/16 0:08:30

计算机网络微课堂1-3节

目录 1. TCP/TP协议​编辑 2. 3.调制解调器 4.因特网的组成 5.电路交换 6.分组交换 重要常用 7.报文交换 8.总结电路交换 报文交换和分组交换 9. 1. TCP/TP协议 2. ISP 网络提供商 ISP的三层 国际 国家 和本地 3.调制解调器 什么是调制解调器&#xff0c;它存在的…...

编程日记 2023/4/16 0:03:28

[Eigen中文文档] Array类与元素操作

文档总目录 本文目录什么是Array类&#xff1f;Array类型访问Array中的值加法与减法Array乘法其他按元素操作的运算array和matrix表达式之间的转换英文原文(The Array class and coefficient-wise operations) 本页旨在提供有关如何使用Eigen的Array类的概述和说明。 什么是A…...

编程日记 2023/4/15 23:58:27

python学习，全球有哪些特别好的社区推荐呢？

Surfshark可以访问全球社区学习的surfshark工具使用方法教程&#xff1a;qptool.net/shark.html 以下是一些全球范围内比较受欢迎的 Python 学习社区&#xff1a; 中文社区&#xff1a;csdn.net 优势&#xff1a;本土国语社区&#xff0c;获得相关知识与经验便利。 Python官…...

编程日记 2023/4/15 23:53:26

LC-1042. 不邻接植花（四色问题(染色法)）

1042. 不邻接植花 难度中等198 有 n 个花园&#xff0c;按从 1 到 n 标记。另有数组 paths &#xff0c;其中 paths[i] [xi, yi] 描述了花园 xi 到花园 yi 的双向路径。在每个花园中&#xff0c;你打算种下四种花之一。 另外&#xff0c;所有花园 最多 有 3 条路径可以进入…...

编程日记 2023/4/15 23:48:25

python实战应用讲解-【numpy科学计算】scikits-learn模块（附python示例代码）

目录 Numpy 安装scikits-learn 准备工作 具体步骤 Numpy 加载范例数据集 具体步骤...

编程日记 2023/4/15 23:43:24

大数据开发必备面试题Spark篇01

1、Hadoop 和 Spark 的相同点和不同点&#xff1f; Hadoop 底层使用 MapReduce 计算架构&#xff0c;只有 map 和 reduce 两种操作&#xff0c;表达能力比较欠缺&#xff0c;而且在 MR 过程中会重复的读写 hdfs&#xff0c;造成大量的磁盘 io 读写操作&#xff0c;所以适合高时…...

编程日记 2023/4/15 23:38:23

SpringBoot整合xxl-job详细教程

SrpingBoot整合xxl-job&#xff0c;实现任务调度说明调度中心执行器调试整合SpringBoot说明 Xxl-Job是一个轻量级分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。Xxl-Job有…...

编程日记 2023/4/15 23:33:22

【MySQL--04】数据类型

文章目录1.数据类型1.1数据类型分类1.2数值类型1.2.1tinyint类型1.2.2bit类型1.2.3小数类型1.2.3.1 float1.2.3.2 decimal1.3字符串类型1.3.1 char1.3.2 varchar1.3.3char和varchar的比较1.4日期和时间类型1.5 enum和set1.5.1 enum1.5.2 set1.5.3 示例1.数据类型 1.1数据类型分…...

编程日记 2023/6/1 13:06:39

git 将其它分支的文件检出到工作区

主要是使用如下命令&#xff1a; git checkout [-f|--ours|--theirs|-m|--conflict<style>] [<tree-ish>] [--] <pathspec>…​覆盖与 pathspec 匹配的文件的内容。当没有给出<tree-ish> (通常是一个commit)时&#xff0c;用 index 中的内容覆盖工作树…...

编程日记 2023/4/15 23:23:19

人工智能的最大危险是什么？

作者&#xff1a;GPT(AI智学习) 链接&#xff1a;https://www.zhihu.com/question/592107303/answer/2966857095 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 首先&#xff1a;人工智能为人类带来了很多益处&…...

编程日记 2023/4/15 23:18:18

rk3568点亮E-ink

rk3568 Android11/12 适配 E-ink “EINK”是英语ElectronicInk的缩写。翻译成中文为“电子墨水”。电子墨水由数百万个微胶囊(Microcapsules)所构成&#xff0c;微胶囊的大小约等同于人类头发的直径。每个微胶囊里含有电泳粒子──带负电荷的白色以及带正电荷的黑色粒子&#…...

编程日记 2023/4/15 23:13:18

如何将Springboot项目通过IDEA打包成jar包，并且转换成可执行文件

首先在IDEA打开你的项目&#xff0c;需要确认项目可以正常运行&#xff0c;然后点击页面右侧的Maven,运行Lifecycle下的package, 此时在项目的target目录下就可以看到一个jar包 这个时候你可以在jar包所在目录下执行cmd窗口&#xff0c;运行 java -jar campus-market-0.0.1-S…...

编程日记 2023/4/15 23:08:16

使用Python快速接入Taotoken聚合大模型API的简明教程

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Python快速接入Taotoken聚合大模型API的简明教程 本文面向希望快速集成大模型能力的Python开发者&#xff0c;介绍如何通过官方…...

编程新知 2026/5/16 10:34:22

ARM核心板在POCT设备开发中的选型与应用实战

1. 项目概述&#xff1a;ARM核心板如何重塑POCT设备开发在医疗设备这个对稳定性和可靠性要求近乎苛刻的领域&#xff0c;每一次技术选型都像是一次精密的手术&#xff0c;容不得半点闪失。我接触过不少体外诊断&#xff08;IVD&#xff09;设备厂商&#xff0c;尤其是做即时检验…...

编程新知 2026/5/16 5:42:30

WindowsCleaner完整解析：如何用开源工具彻底解决Windows系统卡顿和C盘爆红问题

WindowsCleaner完整解析&#xff1a;如何用开源工具彻底解决Windows系统卡顿和C盘爆红问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否曾经在关键时刻被…...

编程新知 2026/5/16 4:19:15

TestDisk与PhotoRec：免费开源的数据恢复双雄终极指南

TestDisk与PhotoRec&#xff1a;免费开源的数据恢复双雄终极指南 【免费下载链接】testdisk TestDisk & PhotoRec 项目地址: https://gitcode.com/gh_mirrors/te/testdisk 在数字时代&#xff0c;数据丢失是每个人都会遇到的噩梦。无论是误删除重要文件、分区表损坏…...

编程新知 2026/5/16 3:58:25

Zabbix监控扩展实战：zbx-openclaw开源模板深度解析与应用指南

1. 项目概述与核心价值最近在折腾监控告警系统&#xff0c;发现一个挺有意思的开源项目&#xff0c;叫zbx-openclaw。这名字乍一看有点抽象&#xff0c;但拆开来看就明白了——zbx指的是 Zabbix&#xff0c;那个老牌的监控系统&#xff1b;openclaw直译是“开放的爪子”&#x…...

编程新知 2026/5/16 3:56:20

C++内存可视化利器：silicondawn/memory-viewer库实战指南

1. 项目概述与核心价值最近在调试一个涉及复杂内存操作的C项目时&#xff0c;我又一次陷入了“内存黑盒”的困境。指针指向的数据结构到底对不对&#xff1f;序列化后的字节流里某个字段的值是不是我预期的&#xff1f;手动printf或者断点查看十六进制&#xff0c;效率低不说&a…...

编程新知 2026/5/16 3:47:18

面试时被问“你的缺点是什么”，这样回答反而加分

面试中&#xff0c;当面试官看似随意地问出“你的缺点是什么”时&#xff0c;空气往往会突然安静几秒。对软件测试工程师而言&#xff0c;这个问题尤其微妙——我们每天都在和“找茬”打交道&#xff0c;对缺陷和风险有着本能的敏感。然而&#xff0c;面试官抛出这个问题&#…...

编程新知 2026/5/16 3:34:12

STM32WLE5CCU6 LoRaWAN节点实战：用AT指令连接TTN服务器并收发数据

STM32WLE5CCU6 LoRaWAN节点实战&#xff1a;从硬件配置到TTN云端交互全解析 在物联网设备爆炸式增长的今天&#xff0c;低功耗广域网络(LPWAN)技术正成为连接海量终端的关键基础设施。作为LPWAN的代表性技术之一&#xff0c;LoRaWAN以其超长传输距离和极低功耗特性&#xff0c;…...

编程新知 2026/5/16 3:03:37

ClaudeCodeAnywhere：构建安全AI代码执行器的架构与实战

1. 项目概述&#xff1a;一个让Claude“无处不在”的代码执行器最近在开发者圈子里&#xff0c;一个名为“ClaudeCodeAnywhere”的项目引起了我的注意。简单来说&#xff0c;它解决了一个非常具体且高频的痛点&#xff1a;如何让像Claude这样的AI助手&#xff0c;能够安全、便捷…...

编程新知 2026/5/16 1:19:43

如何用raylib在3天内构建跨平台游戏应用？

如何用raylib在3天内构建跨平台游戏应用&#xff1f; 【免费下载链接】raylib A simple and easy-to-use library to enjoy videogames programming 项目地址: https://gitcode.com/GitHub_Trending/ra/raylib raylib是一个专为游戏开发设计的轻量级跨平台框架&#xff…...

编程新知 2026/5/15 23:14:34