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

文章目录

  • 高度和宽度
  • 块级标签|行内标签的转换
  • 字体和颜色
  • 往期回顾


高度和宽度

  • 如果在块级标签内,单独定义高度的话,宽度会默认拉满

  • 使用百分比的时候

    • 如果是块级标签,宽度可以用百分比,高度用不了(使用起来没效果)
    • 块级标签默认条件下都是占一行了,用百分比剩下的都不会给你用
    • 如果是行内标签,则都用不了百分比(因为默认不支持设置长度和高度)
.c1{height: 300px;weigh: 500px;
}

块级标签|行内标签的转换

  • 块级
  • 行内
  • css样式:标签 -> display: inline-block

示例 行内标签与块级标签的特性(既具有行内标签的特新与块级标签的特性)

  • display: inline-block
    • inline(行内元素)
    • block(块级元素
    • inline-block(融合行内于块级)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c4{display: inline-block;color: blue;height: 50px;width: 200px;border: 1px solid black;}</style>
</head>
<body><span class="c4">中国移动</span><span class="c4">流量慢死</span>
</body>
</html>

在这里插入图片描述

  • 块级标签和行内标签的转换(特殊情况下)
    • div中加个inline变成了行内标签
    • span中加个block变成了块级标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title>
</head>
<body><div style="display: inline">中国</div>123<span style="display: block">移动</span>456
</body>
</html>

字体和颜色

  • 字体颜色

    • 可以在网上使用rgb颜色进行更改color: 颜色;
  • 标签颜色

    • 如果想让光标移动到对应标签上,标签改变颜色的话用``
  • 字体大小

    • 可以通过调整像素(一般情况)来进行调整font-size: 100px;
  • 字体粗细

    • 可以直接填写数值更改font-weight: 400;
    • 可以直接系统默认更改font-weight: bold;font-weight: bolder;
  • 字体透明度

    • opacity:
    • 从0到1,亮度逐级递增
    • 如:opacity: 0.7;
  • 字体选择

    • 可以直接自己选(有些可能收费)font-family: 宋体;

上述案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国移动</title><style>.c1{color: sienna;font-size: 100px;font-weight: bolder;font-family: 宋体;}</style>
</head>
<body><div class="c1">中国</div>
</body>
</html>

往期回顾

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/31132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac OS 安装frida

安装frida和frida-tools Python是基础&#xff0c;提前装好Python 终端执行 python3 -m pip install frida 如果出现error 按照提示处理 信息提示&#xff1a;brew install pipx 于是终端执行&#xff1a; brew install pipx 安装frida&#xff1a; pipx install frida…

jetson设置

首先准备一张16g以上的sd卡 点此下载sd套件 https://www.sdcard.org/downloads/formatter/eula_windows/SDCardFormatterv5_WinEN.zip 这里下载sd卡格式化 然后https://etcher.download/download-etcher/ 下载etcher 看这篇https://blog.csdn.net/automoblie0/article/deta…

Apache Flink在IoT指标开发流处理全过程案例

目录 1. 环境搭建与基本概念 2. 数据摄入 3. 数据解析与转换 4. 定义时间窗口与计算 5. 复杂事件处理 6. 数据输出与存储 7. 整合流程与执行 8. 性能调优与监控 在物联网(IoT)领域,Apache Flink作为强大的流处理框架,能够高效地处理从传感器、设备等来源产生的海量实…

uniapp实现tabBar功能常见的方法

在 UniApp 中实现 Tab 功能通常涉及到使用 <navigator> 组件结合 tabBar 配置&#xff0c;或者通过自定义的视图切换逻辑来实现。以下是两种常见的实现方式&#xff1a; 1. 使用 tabBar 配置 UniApp 支持在 pages.json 文件中配置 tabBar&#xff0c;以在应用的底部或顶…

VMware ESXi 8.0U2c macOS Unlocker OEM BIOS Huawei (华为) FusionServer 定制版

VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS Huawei (华为) FusionServer 定制版 ESXi 8.0U2 标准版&#xff0c;Dell (戴尔)、HPE (慧与)、Lenovo (联想)、Inspur (浪潮)、Cisco (思科)、Hitachi (日立)、Fujitsu (富士通)、NEC (日电)、Huawei (华为)、xFusion (超聚…

前端vue实战项目结构、常用编辑器vs code 配置

5.Complete JSDoc Tags 6.Custom CSS and JS Loader 7.Debugger for Chrome 8.EditorConfig for VS Code 9.ESLint ☆☆☆ 10.gitignore 11.GitLens — Git supercharged 12.npm 13.PostCSS syntax !important 14.Vetur ☆ 15.vscode-icons 16.vue-i18n 17.Markdow…

2024年最值得推荐的10款免费数据可视化工具!

数据可视化之所以受欢迎&#xff0c;不仅因为它简化了我们查看繁杂数据的方式&#xff0c;还在于数据可视化可以加快我们获取数据信息的速度。但是对于初学者来说&#xff0c;使用数据可视化工具并不能够快速上手。因此本篇文章特意为大家列出了10款免费的数据可视化工具&#…

html做一个画柱形图的软件

你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见&#xff0c;我们可以使用一个流行的 JavaScript 图表库&#xff0c;比如 Chart.js&#xff0c;它能够简化创建和操作图表的过程。 以下是一个完整的示例&#xff0c;展示如何使用 HTML 和 Cha…

码蹄集 BD202401 补给

错误解法&#xff1a;简单将取半前后的综合排序后取最小值&#xff0c;这样没有考虑这样一种情况&#xff1a;取半的时机不对&#xff0c;也许取半某个大一点的P之后反而能进一步取一个补给点了呢&#xff1f;&#xff1f;对不对。这样简单排序只不过是“最省钱”的一种&#x…

人机交互的AB面

每个人都有AB面&#xff0c;每个技术也是如此&#xff0c; 人机交互作为一个多学科的领域&#xff0c;其AB面可以理解为它的优势和劣势&#xff0c;或者积极和消极的影响。以下是人机交互的AB面&#xff1a; A面&#xff08;优势/积极面&#xff09;&#xff1a; 提高效率和生产…

Cocos引擎加密方案解析

据2023年数据显示&#xff0c;Cocos引擎全球游戏市场的占有率约为20%&#xff0c;国内手游占有率约为40%&#xff0c;在国内手游市场中&#xff0c;不少热门游戏均为Cocos引擎研发&#xff0c;如《捕鱼达人》、《梦幻西游》、《剑与远征》等。 而在近年来国内火热的小游戏赛道…

【JDBC】Oracle数据库连接问题记录

Failed to load driver class oracle.jdbc.driver.OracleDriver in either of HikariConfig class oracle驱动包未正确加载&#xff0c;可以先尝试使用下面方式加载检查类是否存在&#xff0c;如果不存在需要手动下载odbc包 try {Class.forName("oracle.jdbc.driver.Ora…

java实现分类下拉树,点击时对应搜索---后端逻辑

一直想做分类下拉&#xff0c;然后选择后搜索的页面&#xff0c;正好做项目有了明确的需求&#xff0c;查找后发现el-tree的构件可满足需求&#xff0c;数据要求为&#xff1a;{ id:1, label:name, childer:[……] }形式的&#xff0c;于是乎&#xff0c;开搞&#xff01; 一…

算法训练营day15--110.平衡二叉树+ 257. 二叉树的所有路径+ 404.左叶子之和+222.完全二叉树的节点个数

一、110.平衡二叉树 题目链接&#xff1a;https://leetcode.cn/problems/balanced-binary-tree/ 文章讲解&#xff1a;https://programmercarl.com/0110.%E5%B9%B3%E8%A1%A1%E4%BA%8C%E5%8F%89%E6%A0%91.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1Ug411S7m…

体育时间:“中国第一”的出海代表们,一致瞄准了这一赛道?

2024年无疑又是一个体育赛事超级大年。 从1月的亚洲杯&#xff0c;2月的世乒团体锦标赛、第14届冬运会、到6月欧洲杯与美洲杯隔空对决&#xff0c;巴黎奥运会也将在7月盛大开赛&#xff0c;随后则还有8月的巴黎残奥会&#xff0c;对于期待万分的体育粉丝们&#xff0c;这将是极…

【Qt快速入门(七)】- QListWidget列表框的使用

目录 Qt快速入门(七)- QListWidget列表框的使用QListWidget列表框的使用QListWidget的基本用法项管理1. 插入和删除项2. 查找和排序项信号与槽1. 处理项选择事件2. 处理项双击事件样式设置1. 设置项的字体和颜色2. 设置项的背景颜色3. 自定义项样式扩展功能1. 多选2. 拖放3. …

计算机编码以及URL转码

目录 一、计算机编码 1.ASCII编码 2. GB2312编码 3.GBK编码 4.UTF-8编码 二、URL转码 1.encodeURI和decodeURI 2.encodeURIComponent 和 decodeURIComponent 三、Base64 一、计算机编码 在计算机中&#xff0c;所有的数据在存储和运算时都要使用二进制数表示&#xf…

oracle性能视图

1. DBA_HIST_SQLSTAT 包含了数据库运行过程中收集的所有SQL语句的执行统计信息。每个SQL语句在AWR快照期间的执行次数、CPU时间、执行时间、缓冲区获取数量、磁盘读写量等关键性能指标都会被记录在这里。通过分析DBA_HIST_SQLSTAT&#xff0c;数据库管理员可以识别出执行效率低…

Spring Boot程序打包docker镜像

1.将springboot程序使用maven package打包出jar。 2.创建dockerfile。 FROM openjdk:8 VOLUME /tmp EXPOSE 8601 #ADD 后面的参数是项目名字 / 后面的参数是自定义的别名 ADD webflux-hello-0.0.1-SNAPSHOT.jar /webflux-hello.jar #这里的最后一个变量需要和前面起的别名相同…

Python 爬取淘宝指定搜索商品评论 标题 销量 计算sign

只需要替换原来的Cookie和token即可使用&#xff0c;自动计算对应链接地址的sign直接使用即可。需要注意是一个账号爬取过多会有验证码 import json import hashlib import random import timeimport pandas as pd import requestsresults []def fetch_review_list(datas, md…