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

flask_知识点3_css

news 2025/12/25 3:39:54

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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/12/15 21:46:10

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/12/15 7:07:56

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/12/23 10:38:48

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/21 9:09:26

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/12/16 20:52:05

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43