前端笔记-day03

news/2024/6/16 12:33:37

文章目录

    • 01-初始CSS
    • 02-CSS引入方式
    • 03-标签选择器
    • 04-类选择器
    • 05-id选择器
    • 06-通配符选择器
    • 07-画盒子
    • 08-字体大小
    • 09-文字粗细
    • 10-字体倾斜
    • 11-行高
    • 12-行高垂直居中
    • 13-字体族
    • 14-font复合属性
    • 15-文本缩进
    • 16-文本对齐方式
    • 17-图片对齐方式
    • 18-文本修饰线
    • 19-文字颜色
    • 20-调试工具
    • 21-综合案例
    • 22-CSS简介

01-初始CSS

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head>
<body><p>体验</p>
</body>
</html>

02-CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- link 引入外部样式表  rel :关系 样式表 --><link rel="stylesheet" href="./my.css">
</head>
<body><p>zcjkn</p><!-- 行内 style=“CSS属性” --><div style="color: aqua; font-size: 30px;">x cm md div</div>
</body>
</html>

my.css👇

p{color: red;
}

03-标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title><style>/* 选中同名标签 设置相同的样式 */p{color: red;}</style>
</head>
<body><p>这是一个p标签</p><p>111</p>
</body>
</html>

04-类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类名是见名知意   用-隔开 */.red {color: red;}.size {font-size: 30px;}</style>
</head>
<body><!-- 类选择器可以给多个标签使用 --><p class="red">ncnjncjn</p><p>kmcxkn</p><!-- 一个标签可以使用多个类名  class属性值可以写多个类名  类名之间用空格隔开 --><div class="red size">        divbiaoq    </div>
</body>
</html>

05-id选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#red {color: aqua;}</style>
</head>
<body><!-- 一个id 同一个页面只能使用一次 --><div id="red">div标签</div>
</body>
</html>

06-通配符选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style>
</head>
<body><!-- 在设置标签的初期会用到通配符选择器 主要是用来清楚标签的默认样式 --><div>div</div><p>p</p><h1>1</h1><strong>strong</strong><ul><li>1</li><li>2</li></ul>
</body>
</html>

07-画盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 100px;height: 100px;background-color: red;}.orange {width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

08-字体大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 30px;}div {font-size: 16px;}</style>
</head>
<body><p>测试大小</p><div>测试默认大小</div>
</body>
</html>

09-文字粗细

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>标题</h3><div>div标签</div>
</body>
</html>

10-字体倾斜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>倾斜</em><div>div</div>
</body>
</html>

11-行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 20px;/* line-height: 30px; */line-height: 2;/* 行高是数值时  表示字体大小的倍数 */}</style>
</head>
<body><!-- 行高=上间距+文字高度+下间距   等于两行举例 --><p>4 Time-series GAN (TimeGAN) TimeGAN 由四个网络组件组成:嵌入部分、恢复部分、序列生成器和序列判别器。关键之处在于,自动编码组件(前两个)与对抗组件(后两个)是联合训练的,这样 ...知乎</p>
</body>
</html>

12-行高垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 100px;background-color: red;line-height: 100px;}</style>
</head>
<body><div>wen<br>zi</div>
</body>
</html>

13-字体族

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: 楷体;font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

14-font复合属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 倾斜 加粗 大小 字体 *//* font: italic 700 30px/2 楷体 ; *//* font: 30px 楷体; */font: italic 700 30px/2  ;/* 字号和字体必须写  否则不生效 */}</style>
</head>
<body><div>djsnckj</div>
</body>
</html>

15-文本缩进

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-indent: 2em;font-size: 30px;}</style>
</head>
<body><p>因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号</p>
</body>
</html>

16-文本对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {/* text-align: left; */text-align: center;/* text-align: right; */}</style>
</head>
<body><h1>kcmkdmck</h1><p>因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号</p>
</body>
</html>

17-图片对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {height: 300px;}div {text-align: center;}</style>
</head>
<body><!-- text-align 本质是控制内容的对齐方式 ，属性要设置给内容的父级。如何要设置img标签 需要在img标签外嵌套一个div标签 --><div><img src="./1111.jpg" alt=""></div>
</body>
</html>

18-文本修饰线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a</a><div>div </div><p>kcmkp</p><span> kspan</span>
</body>
</html>

19-文字颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {/* color: rebeccapurple; *//* color: rgb(100, 150, 200); *//* color: rgba(0, 0, 0, 0.8); *//* color: #00f; *//* #表示法可以简写 */background-color: aquamarine;}</style>
</head>
<body><h1>dcndjncjnjn</h1>
</body>
</html>

20-调试工具

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 调试工具的细节1.如果是错误的属性，有黄色的叹号2.CSS属性的前面有多选框，如果勾选，这个属性生效 ；如果没有勾选这个属性不生效*/div{color: rebeccapurple;font-size: 66px;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

21-综合案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {height: 300px;}h1 {font-weight: 400;color: #333333;text-align: center;font-size: 30px;}.come-f {color: #999;font-size: 14px;}.p1 {text-indent: 2em;font-size: 18px;}div {text-align: center;}</style>
</head>
<body><h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1><div class="come-f">来源：央视网|2222年22月22日 12：12：12</div><p class="p1"><strong>央视网消息：</strong>眼下湖北秋收已有一段时间。因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号的私生女山东济南机场那你参加就恼羞成怒成本下降聪明之处</p><p class="p1">你的空间才能长久的宁静CDC东京巨蛋就是你猜怎么，课程因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号迪斯科解放螺丝钉梅兰芳哪里都是发放</p><div><img src="./1111.jpg" alt=""></a></div><p class="p1">nzjkwangyulin shuode xinp因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号inzhong shi hubeishengyanfa d zajiaoshuidao bujinchangliangdao</p><p class="p1">此外湖北人还大力推进高标准农因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号田检车戒指今年6月分 已建成3980万亩水稻，目前湖北全省仍有1800完夺目正在收各种 预计10月中国寻首个完毕</p></body>
</html>

在这里插入图片描述

22-CSS简介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: #333;}p {text-indent: 2em;font-size: 14px;line-height: 30px;color: #444;}li {line-height: 30px;color: #444;font-size: 14px;}a {color: #0062c2;}</style>
</head>
<body><h1>CSS(层叠样式表)</h1><p>层叠样式表是一种        <a href="#">样式表</a>        语言，什么窗口模式覅房产税多么灿烂的时刻名称北京房产就那次考试模式上看快下课了咖啡无法承受的苦难付款时间的内存空间只能靠才能</p><p><strong>cSS是开放网络的核心语言职意</strong>，差不多还不错吧不错的拿出当年代表处代表就差不多的好处点击保存点击保存都不会的变化</p><ul><li>css彼此间的检查你的都能从当年的警察局</li><li>单纯的不长不短和超级精彩度假村的就能吃到九年</li><li>css大把大把的就            <a href="#">详细参科手册</a>            会变成都不会差别很大吧</li></ul>
</body>
</html>

在这里插入图片描述


http://www.mrgr.cn/p/37055623

相关文章

031.下一个排列Java实现

031.下一个排列Java实现

题意 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式地&#…
阅读更多...
【资源分享】野比大雄的生化危机宫格解密工具

【资源分享】野比大雄的生化危机宫格解密工具

一款简单的游戏工具*----------------------------------------------[下载区]----------------------------------------------* 蓝奏云（提取码：ysgg） *----------------------------------------------[下载区]----------------------------------------------**---------…
阅读更多...
pwn知识——劫持IO-file_jumps攻击和environ攻击

pwn知识——劫持IO-file_jumps攻击和environ攻击

导言 哎，异或fd指针真是令人讨厌 IO_file_jumps _IO_lock_t _IO_stdfile，_IO_wide_data（针对宽字节的虚函数表），_IO_FILE_plus（含有stdin,stdout）三者均被定义为IO_file_jumps 原理 IO_file_jumps是一个全局变量符号，存有以下符号这个结构体主要跟缓冲区有关，比如调用…
阅读更多...
堆排序 之实现最小的K个数

堆排序 之实现最小的K个数

目录 1、方式一&#xff1a;通过自定义实现建堆和堆化操作 2、方式二&#xff1a;借助模块heapq实现 2.1、模块heapq的基本使用 2.2、使用heapq实现最小的k个数 3、堆在实际项目的应用 实现语言&#xff1a;Python 3.9 题目来源&#xff1a;牛客 分析&#xff1a; 要找…
阅读更多...
示例七、超声波传感器测距

示例七、超声波传感器测距

通过以下几个示例来具体展开学习,了解超声波传感器原理及特性&#xff0c;学习超声波传感器的应用&#xff1a; 示例七、超声波传感器测距 一、基本原理&#xff1a; 1、超声波测距仪的系统结构 利用超声测距原理测量物体之间的距离&#xff0c;当此距离小于某一设定值时&…
阅读更多...
嵌入式软硬件设计流程

嵌入式软硬件设计流程

转载自：https://blog.csdn.net/jiangjunjie_2005/article/details/44024933从图书馆看到一经典国外嵌入式设计书籍，其中关于“软硬件设计流程”画得精彩，特列出如下：
阅读更多...
ctfshow web入门 php反序列化 web267--web270

ctfshow web入门 php反序列化 web267--web270

web267 查看源代码发现这三个页面 然后发现登录页面直接admin/admin登录成功 然后看到了 ///backdoor/shell unserialize(base64_decode($_GET[code]))EXP <?php namespace yii\rest{class IndexAction{public $checkAccess;public $id;public function __construct(){…
阅读更多...
WPF 基础、WPF 相关知识、学习、参考项目

WPF 基础、WPF 相关知识、学习、参考项目

前言：最初参加工作时，做过WPF项目 ，后面几年后者虽然有写WPF项目，但多数都是边边角角，写一点满足工作需要。现在写下WPF，主要就是玩一玩，尝试下不同的东西。这是我的代码仓库：地址 （如果对您有帮助，给颗小星星奖励下吧），在WPF/Lesson 10 Practice/Practice/下面。基…
阅读更多...
Rust Course学习（编写测试）

Rust Course学习（编写测试）

如果友友你的计算机上没有安装Rust&#xff0c;可以直接安装&#xff1a;Rust 程序设计语言 (rust-lang.org)https://www.rust-lang.org/zh-CN/ Introduce 介绍 Testing in Rust involves writing code specifically designed to verify that other code works as expected. It…
阅读更多...
WPF 整体结构基础

WPF 整体结构基础

前言：最初参加工作时，做过WPF项目 ，后面几年后者虽然有写WPF项目，但多数都是边边角角，写一点满足工作需要。现在写下WPF，主要就是玩一玩，尝试下不同的东西。这是我的代码仓库：地址 （如果对您有帮助，给颗小星星奖励下吧），在WPF/Lesson 10 Practice/Practice/下面。基…
阅读更多...
使用Django中的Session和Cookie来传递数据

使用Django中的Session和Cookie来传递数据

在Django中&#xff0c;Session和Cookie是两种常用的机制&#xff0c;用于在服务器端和客户端之间传递数据。下面我将简要介绍如何在Django中使用Session和Cookie来传递数据。 1、问题背景 在 Django 中&#xff0c;可以使用 request.POST 来获取表单提交的数据。但是&#xf…
阅读更多...
最新ChatGPT中文系统网站源码+系统部署+支持AI对话、AI绘画、AI音乐等大模型

最新ChatGPT中文系统网站源码+系统部署+支持AI对话、AI绘画、AI音乐等大模型

一、系统介绍 本文将介绍最新的ChatGPT中文版AI创作系统——星河易创AI系统&#xff0c;该系统基于ChatGPT的核心技术&#xff0c;融合了自然语言问答、绘画、音乐等创作功能&#xff0c;并兼容官方GPT全模型。该系统提供多样化的应用&#xff0c;包括GPTs的多场景应用、实时G…
阅读更多...
布局全球内容生态，酷开科技Coolita AIOS以硬核品质亮相

布局全球内容生态，酷开科技Coolita AIOS以硬核品质亮相

当前&#xff0c;全球产业链供应链格局持续重构&#xff0c;成为影响中国对外经济发展的重要因素。2024年4月15至5月5日&#xff0c;历史久、规模大、层次高&#xff0c;作为中国外贸风向标的第135届中国进出口商品交易会&#xff08;即广交会&#xff09;在美丽的广州隆重举行…
阅读更多...
CLI举例：通过URL分类控制用户访问的网站

CLI举例：通过URL分类控制用户访问的网站

华为CLI举例&#xff1a;通过URL分类控制用户访问的网站 配置基于URL分类的URL过滤功能&#xff0c;可以实现对用户访问的某一类网站的控制。既可以是FW自带的预定义分类&#xff0c;也可以是管理员配置的自定义分类。 组网需求 如图1所示&#xff0c;FW作为企业网关部署在网络…
阅读更多...
Spring如何解决循环依赖问题？

Spring如何解决循环依赖问题？

当然是用三级缓存来解决循环依赖问题。 那二级缓存能解决吗&#xff1f; 首先我们要知道Spring bean的生命周期 1.实例化&#xff08;new&#xff09; 2.属性赋值&#xff08;populate&#xff09; 3.初始化 一堆钩子函数&#xff08;动态代理的生成也在这一步&#xff09…
阅读更多...
【机器学习】卷积神经（CNN）在图像识别中的革命性应用：自动驾驶的崛起

【机器学习】卷积神经（CNN）在图像识别中的革命性应用：自动驾驶的崛起

卷积神经网络&#xff08;CNN&#xff09;在图像识别中的革命性应用&#xff1a;自动驾驶的崛起 一、卷积神经网络&#xff08;CNN&#xff09;的基本原理二、CNN在图像识别中的显著成果三、CNN在自动驾驶汽车中的物体检测和识别四、CNN在图像识别中的代码实例 随着人工智能和深…
阅读更多...
一、RocketMQ基本概述与部署

一、RocketMQ基本概述与部署

RocketMQ基本概述与安装 一、概述1.MQ概述1.1 用途1.2 常见MQ产品1.3 MQ常用的协议 2.RocketMQ概述2.1 发展历程 二、相关概念1.基本概念1.1 消息&#xff08;Message&#xff09;1.2 主题&#xff08;Topic&#xff09;1.3 标签&#xff08;Tag&#xff09;1.4 队列&#xff0…
阅读更多...
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄

鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄

句柄 | handle int open(const char* pathname,int flags); ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, const void *buf, size_t count); int close(int fd);只要写过应用程序代码操作过文件不会陌生这几个函数,文件操作的几个关键步骤嘛,跟把大…
阅读更多...
智能工作流：Spring AI高效批量化提示访问方案

智能工作流：Spring AI高效批量化提示访问方案

集用SpringAI搭建系统，依靠线程池\负载均衡等技术进行请求优化，用于解决科研&开发过程中对GPT接口进行批量化接口请求中出现的问题。大语言模型接口以OpenAI的GPT 3.5为例，JDK版本为17。基于SpringAI搭建系统，依靠线程池\负载均衡等技术进行请求优化，用于解决科研&…
阅读更多...
【小白可懂】SpringBootWeb入门

【小白可懂】SpringBootWeb入门

web开发需要的技术栈&#xff1a; 前端web开发&#xff1a; html css javascript Vue Element Nginx 后端web开发&#xff1a; Maven SpringBoot Web 基础篇 MySOL SpringBoot Mybatis SpringBoot Web开发篇 SpringBoot web进阶篇 什么是spring&#xff1f; 官网&a…
阅读更多...
推荐文章

Copyright @ 2022~2023