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

django学习入门系列之第三点《CSS基础样式介绍2》

news 2025/7/3 19:24:20

文章目录

  • 文字对齐方式
  • 外边距
  • 内边距
  • 往期回顾

文字对齐方式

  • 水平对齐方式
text-align: center;
  • 垂直对齐方式
/* 注意，这个只能是一行来居中 */
line-height:/*长度*/ ;
  • 样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c1{height: 100px;width: 100px;border : 1px solid red;text-align: center;line-height: 100px;}</style>
</head>
<body><div class="c1">中国</div>
</body>
</html>

外边距

  • 简单设置外部的距离
    • 我与别人有距离
    • 设置语法margin-内容 像素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{width: 60px;height: 60px;border: 1px solid red;padding: 20px 10px 30px 40px;margin-top: 50px;}</style>
</head>
<body>
<div class="c2"></div>
<div class="c2"></div>
</body>
</html>

在这里插入图片描述

内边距

  • 简单来说就是自己的内部可以设置一点距离（空出多少边距）
    • 我自己内部有距离
    • 设置语法padding-内容 像素

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c2{width: 60px;height: 60px;border: 1px solid red;padding-top: 50px;padding-left: 50px;padding-right: 50px;}</style>
</head>
<body>
<div class="c2"><div style="background-color: hotpink">text</div>
</div>
</body>
</html>

在这里插入图片描述

  • 如果上下左右都要内边距的话
padding 像素

.c2{width: 60px;height: 60px;border: 1px solid red;padding: 50px;}

或者

/* 按照上右下左的顺序给你安排 */
.c2{width: 60px;height: 60px;border: 1px solid red;padding: 20px 10px 30px 40px;}

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】

相关文章：

django学习入门系列之第三点《CSS基础样式介绍2》

文章目录 文字对齐方式外边距内边距往期回顾 文字对齐方式 水平对齐方式 text-align: center;垂直对齐方式 /* 注意&#xff0c;这个只能是一行来居中 */ line-height:/*长度*/ ;样例 <!DOCTYPE html> <html lang"en"> <head><meta charset…...

编程日记 2024/6/22 8:32:52

分布式光纤测温DTS在工程现场中稳定性与可靠性如何？

20年前&#xff0c;分布式光纤测温(Distributed Temperature Sensing&#xff0c;DTS)技术的发展尚不成熟&#xff0c;设备成本高昂&#xff0c;其稳定性与可靠性也存在一定问题。然而&#xff0c;经过二十多年的不断发展与创新&#xff0c;DTS技术在工程现场应用中取得了显著进…...

编程日记 2024/6/22 8:31:50

PHP多线程模块parallel的编译安装和多线程编程演示

从PHP7开始&#xff0c;多线程编原有的pthreads已经不在维护&#xff0c;而是使用parallel替代。 由于是新的模块&#xff0c;样例代码很少&#xff0c;这里总结一个简单的代码和详细的备注供大家参考。 编译和安装 parallel需要启用ZTS&#xff08;Zend Thread Safety&…...

编程日记 2024/6/22 8:29:48

记录grid布局属性

grid布局 分为容器和项目元素 容器属性 #container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* …...

编程日记 2024/6/22 8:28:47

12.爬虫---PyMysql安装与使用

12.PyMysql安装与使用 1.安装 PyMySQL2.使用PyMySQL2.1创建数据表2.2连接数据库2.3增加数据2.4修改数据2.5查询数据2.6删除数据2.7关闭连接 3.总结 MySQL 安装可以看这篇文章MySql 安装与使用&#xff08;非常详细&#xff09; 1.安装 PyMySQL PyMySQL是Python中用于连接MySQL…...

编程日记 2024/6/22 8:26:45

VS2022遇到的两个问题

问题一&#xff1a;找不到定义的头文件 别的博主说是&#xff1a;在属性页里面进行改写&#xff0c;改成是&#xff0c;我试过之后并不行&#xff1b; 解决思路&#xff1a;但其实在右边视图里面找到你自己定义的头文件加到你运行文件中就行&#xff1b;因为程序就只有一个入口…...

编程日记 2024/6/22 8:24:43

【Android14 ShellTransitions】（六）SyncGroup完成

这一节的内容在WMCore中&#xff0c;回想我们的场景&#xff0c;是在Launcher启动某一个App&#xff0c;那么参与动画的就是该App对应Task&#xff08;OPEN&#xff09;&#xff0c;以及Launcher App对应的Task&#xff08;TO_BACK&#xff09;。在确定了动画的参与者后&#x…...

编程日记 2024/6/22 8:20:39

技术管理转型之战：决策之道-管理中的智慧与策略

文章目录 引言一、决策的重要性二、常见的决策方式1. 理性决策&#xff08;Rational Decision Making&#xff09;2. 有限理性&#xff08;Bounded Rationality&#xff09;3. 直觉决策&#xff08;Intuitive Decision Making&#xff09;4. 循证管理&#xff08;Evidence-Base…...

编程日记 2024/6/22 8:19:38

Shell脚本：条件语句（if、case）

目录 硬编码 硬编码的缺点 条件判断 $? 命令行语句 判断指定目录是否存在 判断指定文件是否存在 判断指定对象是否存在 表达式形式语句 判断对象是否存在 判断对象是否有权限 与、或、非 运算 与运算 或运算 非运算 比较大小 判断磁盘利用率实验步骤 字符串…...

编程日记 2024/6/22 8:18:35

在Linux上为Windows目标配置Qt交叉编译

问题描述 我想使用Linux x86_64主机为Windows x86_64目标交叉编译Qt库&#xff08;最终也包括我的应用程序&#xff09;。我觉得自己已经接近成功了&#xff0c;但可能对整个过程有一些基本的误解。 我从在我的Fedora机器上安装所有mingw包开始&#xff0c;并修改了win32-g的…...

编程日记 2024/6/22 8:17:34

Introduction to linear optimization 第 2 章课后题答案 11-15

线性规划导论 Introduction to linear optimization (Dimitris Bertsimas and John N. Tsitsiklis, Athena Scientific, 1997)&#xff0c; 这本书的课后题答案我整理成了一个 Jupyter book&#xff0c;发布在网址&#xff1a; https://robinchen121.github.io/manual-introdu…...

编程日记 2024/6/22 8:16:33

Java——包

一、包 1、简要介绍 在Java编程语言中&#xff0c;包&#xff08;Package&#xff09; 是一种用来组织和管理类&#xff08;Class&#xff09;和接口&#xff08;Interface&#xff09;的机制。包为开发者提供了一种逻辑分组的方式&#xff0c;使代码更加模块化、结构化和易于…...

编程日记 2024/6/22 8:12:29

Pipeline知识小记

在scikit-learn&#xff08;通常缩写为sklearn&#xff09;中&#xff0c;Pipeline是一个非常重要的工具&#xff0c;它允许你将多个数据转换步骤&#xff08;如特征选择、缩放等&#xff09;和估计器&#xff08;如分类器、回归器等&#xff09;组合成一个单一的估计器对象。这…...

编程日记 2024/6/22 8:11:28

postman国内外竞争者及使用详解分析

一、postman简介 Postman 是一款广泛使用的 API 开发和测试工具&#xff0c;适用于开发人员和测试人员。它提供了一个直观的界面&#xff0c;用于发送 HTTP 请求、查看响应、创建和管理 API 测试用例&#xff0c;以及自动化 API 测试工作流程。以下是 Postman 的主要功能和特点…...

编程日记 2024/6/22 8:09:26

人工智能对决：ChatGLM与ChatGPT，探索发展历程

图: a robot is writing code on a horse, By 禅与计算机程序设计艺术 目录 ChatGLM:...

编程日记 2024/6/22 8:05:22

探索Python元类的奥秘及其应用场景

探索Python元类的奥秘及其应用场景 一、引言 在Python中&#xff0c;元类&#xff08;Metaclasses&#xff09;是一个相对高级且容易被忽视的主题。然而&#xff0c;对于深入理解Python的面向对象编程模型以及进行高级框架和库的设计来说&#xff0c;元类是一个不可或缺的工具…...

编程日记 2024/6/22 8:04:20

C语言基础关键字的含义和使用方法

​关键字在C语言中扮演着非常重要的角色&#xff0c;它们定义了语言的基本构造和语法规则&#xff0c;通过使用关键字&#xff0c;开发者可以创建变量、定义数据类型、控制程序流程&#xff08;如循环和条件判断&#xff09;、声明函数等。由于这些字是保留的&#xff0c;所以编…...

编程日记 2024/6/22 8:03:18

【Golang - 90天从新手到大师】Day09 - string

系列文章合集 Golang - 90天从新手到大师 String 一个字符串是一个不可改变的字节序列。字符串可以包含任意的数据&#xff0c;但是通常是用来包含人类可读的文本。 len()返回字符串字节数目&#xff08;不是rune数&#xff09;。 通过索引可以访问某个字节值&#xff0c;0…...

编程日记 2024/6/22 8:01:16

网络安全与区块链技术：信任与安全的融合

# 网络安全与区块链技术&#xff1a;信任与安全的融合 在网络空间&#xff0c;信任是一种宝贵而稀缺的资源。区块链技术以其独特的分布式账本、加密算法和共识机制&#xff0c;为构建网络安全提供了新的解决方案。本文将探讨网络安全与区块链技术如何融合&#xff0c;以增强信…...

编程日记 2024/6/22 8:00:15

MySQL之复制(九)

复制 复制管理和维护 确定主备是否一致 在理想情况下&#xff0c;备库和主库的数据应该是完全一样的。但事实上备库可能发生错误并导致数据不一致。即使没有明显的错误&#xff0c;备库同样可能因为MySQL自身的特性导致数据不一致&#xff0c;例如MySQL的Bug、网络中断、服务…...

编程日记 2024/6/22 7:58:13

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/7/1 5:08:01

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

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

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

编程新知 2025/6/27 20:17:29

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/6/25 4:11:11

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/2 15:27:51

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/6/26 11:37:49

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/6/16 16:17:22

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/6/17 23:45:45

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/6/16 12:37:53