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

flask_知识点3_css

news 2026/4/1 6:14:21

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

Janus-Pro-7B入门指南：零基础Python调用与第一个AI应用创建

Janus-Pro-7B入门指南&#xff1a;零基础Python调用与第一个AI应用创建 你是不是对AI大模型充满好奇&#xff0c;想亲手试试调用一个强大的模型&#xff0c;但又觉得门槛太高&#xff0c;被各种复杂的部署和配置劝退&#xff1f;别担心&#xff0c;今天我们就来彻底解决这个问…...

编程新知 2026/4/1 6:13:23

Java 26 FFM API进阶：零JNI调用TensorRT/OpenVINO，AI端到端延迟砍半

文章目录一、JNI&#xff0c;AI时代的"文言文写作"二、FFM API&#xff1a;Java调用原生代码的"现代白话文"1. Arena&#xff1a;比try-with-resources还狠的内存管理2. Linker&#xff1a;C函数的"Java身份证"3. jextract&#xff1a;头文件自动…...

编程新知 2026/4/1 5:55:10

LiuJuan20260223Zimage开箱体验：基于Z-Image LoRA，这个专精模型到底有多好用？

LiuJuan20260223Zimage开箱体验&#xff1a;基于Z-Image LoRA&#xff0c;这个专精模型到底有多好用&#xff1f; 你有没有遇到过这样的情况&#xff1a;想用AI画一个特定的人物&#xff0c;比如你故事里的主角&#xff0c;或者一个IP形象&#xff0c;但生成的图片要么不像&am…...

编程新知 2026/4/1 5:45:06

PXE装机避坑大全：从TFTP根目录设置到Kickstart无人值守的13个常见错误修复

PXE装机避坑大全&#xff1a;从TFTP根目录设置到Kickstart无人值守的13个常见错误修复 在企业级IT运维中&#xff0c;PXE&#xff08;预启动执行环境&#xff09;网络装机技术因其高效、自动化的特点&#xff0c;已成为服务器批量部署的标配方案。但看似简单的PXE部署流程背后&…...

编程新知 2026/4/1 5:43:02

Go语言中的Panic和Recover：错误处理的艺术

Go语言中的Panic和Recover&#xff1a;错误处理的艺术 1. Panic和Recover的基本概念 Panic和Recover是Go语言中用于处理异常情况的机制。Panic用于在程序遇到无法恢复的错误时终止程序&#xff0c;而Recover用于捕获Panic并恢复程序的正常执行。 Go语言的错误处理哲学是显式处理…...

编程新知 2026/4/1 4:05:44

7个高效步骤：Meshroom开源三维重建工具从入门到精通

7个高效步骤&#xff1a;Meshroom开源三维重建工具从入门到精通 【免费下载链接】Meshroom 3D Reconstruction Software 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 技术原理&#xff1a;三维重建的底层逻辑与技术选型 摄影测量技术的数学基础 三维重建技…...

编程新知 2026/4/1 0:46:15

Vue3+ECharts水球图实战：手把手教你打造个性化数据展示组件

Vue3与ECharts水球图深度整合&#xff1a;打造企业级数据可视化组件 在数据驱动的时代&#xff0c;可视化呈现已成为现代Web应用的核心竞争力。水球图&#xff08;Liquid Fill Chart&#xff09;作为一种直观展示百分比数据的可视化形式&#xff0c;在仪表盘、进度监控和数据看…...

编程新知 2026/3/31 23:51:21

嵌入式老鸟总结：Keil警告L15/L16的隐藏陷阱与RTOS适配技巧

Keil多任务开发中的L15/L16警告&#xff1a;从RTOS视角看函数重入与资源竞争 在嵌入式开发中&#xff0c;Keil编译器的L15&#xff08;MULTIPLE CALL TO SEGMENT&#xff09;和L16&#xff08;UNCALLED SEGMENT&#xff09;警告常常被开发者忽视&#xff0c;但在RTOS环境下&…...

编程新知 2026/3/31 23:43:08

MCP只是过渡，CLI才是AI的原生界面——从飞书、钉钉集体CLI化说起

文章目录一、从"养龙虾"说起&#xff1a;一场返祖式的革命二、MCP&#xff1a;伟大的"USB-C"&#xff0c;但依然是个翻译器三、CLI&#xff1a;AI的母语&#xff0c;不需要翻译四、MCPCLI&#xff1a;过渡方案与终极形态的共生五、对开发者的冷思考&#x…...

编程新知 2026/3/31 22:54:35

PyTorch 2.8镜像环境配置：CUDA 12.4与cuDNN 8+版本兼容性验证指南

PyTorch 2.8镜像环境配置&#xff1a;CUDA 12.4与cuDNN 8版本兼容性验证指南 1. 镜像环境概述 PyTorch 2.8深度学习镜像是一个经过深度优化的通用计算环境&#xff0c;专为现代AI工作负载设计。这个镜像最显著的特点是完美适配了NVIDIA最新的CUDA 12.4和cuDNN 8版本&#xff…...

编程新知 2026/3/31 22:28:12