2024-04-07(复盘前端)

---HTML

1.HTMl骨架

html:整个网页

head:网页头部,用来存放给浏览器看的信息,如css

body:网页主体,用来存放给用户看的信息,例如图片和文字

2.标题标签中h1标签只能使用一次,其他可以无限次试用

3.列表

无序列表:ul嵌套li

有序列表:ol嵌套li

定义列表:dl嵌套dt和dd,dt是定义列表的标题,dd是定义列表的描述/详情

4.表格

和excel类似,用于展示数据

table嵌套tr,tr嵌套td/th

5.表单

作用:收集用户信息

使用场景:登陆页面,注册页面,搜索区域

6.无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

<div>div 标签,独占一行</div>

<span>span标签,不换行</span>

----CSS

7.CSS选择器

标签选择器:使用标签名作为选择器,选中同名标签就设置为相同的样式,所以无法差异化的设置同名标签的显示效果

类选择器:通过类名来查找标签,可以差异化的设置标签的显示效果(.类名的方式)

                一个类选择器可以给多个标签使用,一个标签可以使用多个类型

id选择器:一般配合JS使用,很少用来设置CSS样式,同一个id在一个页面只能使用一次

通配符选择器:(*),用于把页面的所有标签设置为相同的样式,一般用于清除标签的默认样式,如标签默认的外边距,内边距。

8.网页制作思路

从上到下,先整体再局部

先标签,再CSS美化

9.复合选择器

后代选择器:选中某元素的后代元素

子代选择器:选择某元素的子代元素(最近的子代)

并集选择器:选择多组标签设置相同的样式

交集选择器:选中同时满足多个条件的元素

伪类选择器:伪类表示元素的状态,选中元素的某个状态设置样式

10.显示模式

块级元素

特点:独占一行,宽度默认是父级的100%,添加宽高属性生效

行内元素

特点:一行可以显示多个,设置宽高属性不生效,宽高尺寸由内容撑开

行内块元素

特点:一行可以显示多个,设置宽高属性生效,宽高尺寸也可以由内容撑开

转换显示模式的方法:

display属性:block-->块级;inline-block-->行内块;inline-->行内

11.结构伪类选择器

作用:根据元素的结构关系查找元素

公式::nth-child(查找公式)

12.盒子模型

组成:

内容区域 -- width & height

内边距 -- padding(盒子内)

边框线 -- border

外边距 -- margin(盒子外)

div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}

13.版心居中

margin属性的左右值设置为auto,并且盒子要有宽度

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

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

相关文章

2024.4.7

1. 2列火车 #include<myhead.h>pthread_mutex_t m1; pthread_mutex_t m2;void* run(void* arg) {while(1){pthread_mutex_lock(&m1);printf("火车B进入\n");printf("A请等待\n");pthread_mutex_unlock(&m2);sleep(2);} }int main(in…

开发项目接单报价快速计算,报价量化程序

定制化开发&#xff0c;如何计算项目预算&#xff0c;是程序开发者头疼的一个问题。 项目费用谈得过低&#xff0c;就天天加班累死赚不到钱&#xff1b;谈得过高&#xff0c;会导致顾客流失&#xff0c;信誉受损。 项目费用量化可见是多么重要。 下面是一段量化的程序&#…

跟TED演讲学英文:AI isn‘t the problem — it‘s the solution by Andrew Ng

TED英文文稿 文章目录 TED英文文稿AI isnt the problem — its the solutionIntroductionVocabularyTranscriptSummary 2024年4月6日学习吴恩达的这篇演讲 AI isn’t the problem — it’s the solution Link: AI isn’t the problem — it’s the solution Speaker: Andrew …

C语言进阶课程学习记录-第21课 - 宏定义与使用分析

C语言进阶课程学习记录-第21课 - 宏定义与使用分析 宏定义的本质实验-字面量比较宏定义表达式实验-表达式有效性宏的作用域实验-作用域分析内置宏内置宏演示小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学…

加密攻击

目录 简介 类型 密码分析攻击 侧信道攻击 中间人攻击 应对 密码分析攻击 侧信道攻击 中间人攻击 总结 简介 加密攻击是指攻击者利用密码学算法或协议的弱点来破解加密信息的过程。这种攻击可以导致敏感信息的泄露&#xff0c;对个人和组织的安全构成严重威胁。 类型…

人工智能 - 服务于谁?

人工智能服务于谁&#xff1f; 人工智能服务于生存&#xff0c;其最终就是服务于战争&#xff08;热战、技术战、经济战&#xff09; 反正就是为了活着而战的决策。 既然人工智能所有结果&#xff0c;来自大数据的分挖掘&#xff08;分析&#xff09;也就是数据的应用&#x…

自动驾驶中的交通标志识别原理及应用

自动驾驶中的交通标志识别原理及应用 附赠自动驾驶学习资料和量产经验&#xff1a;链接 概述 道路交通标志和标线时引导道路使用者有秩序使用道路&#xff0c;以促进道路行车安全&#xff0c;而在驾驶辅助系统中对交通标志的识别则可以不间断的为整车控制提供相应的帮助。比如…

Igh related:Small Bug fixing

BUG1 Undefined symbol Identifier “CLOCK_MONOTONIC” Undefined symbol Identifier “TIMER_ABSTIME” Solution In your main cpp file, add this in the first line: #define _GNU_SOURCE

Transformer位置编码详解

在处理自然语言时候&#xff0c;因Transformer是基于注意力机制&#xff0c;不像RNN有词位置顺序信息&#xff0c;故需要加入词的位置信息来显示的表明词的上下文关系。具体是将词经过位置编码(positional encoding)&#xff0c;然后与emb词向量求和&#xff0c;作为编码块(Enc…

CAS Server使用Maven构建以及自定义扩展使用

介绍 ​CAS&#xff08;Central Authentication Service&#xff09;中心授权/认证服务&#xff0c;是由耶鲁大学发起的一个开源项目&#xff0c;距今已有20年之久&#xff0c;功能相当丰富&#xff0c;目的在于为Web应用系统提供一种可靠且稳定的单点登录解决方案。 CAS分为…

Open CASCADE学习|在给定的TopoDS_Shape中查找与特定顶点 V 对应的TopoDS_Edge编号

enum TopAbs_ShapeEnum{TopAbs_COMPOUND,TopAbs_COMPSOLID,TopAbs_SOLID,TopAbs_SHELL,TopAbs_FACE,TopAbs_WIRE,TopAbs_EDGE,TopAbs_VERTEX,TopAbs_SHAPE}; 这段代码定义了一个名为 TopAbs_ShapeEnum 的枚举类型&#xff0c;它包含了表示不同几何形状类型的常量。这些常量通常…

目标检测——色素性皮肤病数据集

一、重要性及意义 首先&#xff0c;色素性皮肤病变是一类常见的皮肤疾病&#xff0c;其发病率有逐年增高的趋势。这些病变可能由遗传或环境因素导致黑素细胞生成异常&#xff0c;如黑色素瘤等。黑色素瘤具有极高的恶性率和致死率&#xff0c;而且恶化可能性大&#xff0c;容易…

openplc Linux 地址映射io,读写驱动数据等使用记录

1. 上一篇记录 openplc使用C语言文件读写驱动实现基本流程。 openPLC_Editor C语言编程 在mp157 arm板上调用io等使用记录_openplc c 编程-CSDN博客 2. 下面通过映射地址的方式控制io和读写驱动数据。 在runtime 环境的 hardware 硬件配置中 选择 python on Linux(PSM)&#…

柱状图中最大的矩形-java

题目描述(力扣题库 84): 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 解题思想: 单调栈: 利用先进后出的思想, 先算出长度更高的柱子所能勾勒…

MXNet的下载安装及问题处理

1、MXNet介绍&#xff1a; MXNet是一个开源的深度学习框架&#xff0c;以其灵活性和效率著称&#xff0c;支持多种编程接口&#xff0c;包括Python、C、R、Julia、Scala等。MXNet支持大规模分布式训练&#xff0c;同时兼顾CPU和GPU的计算资源&#xff0c;尤其擅长于模型并行和数…

1.0-spring入门

文章目录 前言一、版本要求二、第一个spring程序1.引入pom2.代码部分2.1 spring bean2.2 springContext.xml2.3 测试2.4 执行结果 总结 前言 最近想要系统的学习下spring相关的框架,于是乎,来到了B站(真是个好地方),spring会专门开一个专栏出来,记录学习心得,与大家共勉。 Spri…

实景三维技术在推进城市全域数字化转型的作用

4月2日&#xff0c;国家数据局发布《深化智慧城市发展推进城市全域数字化转型的指导意见&#xff08;征求意见稿&#xff09;》&#xff08;下称&#xff1a;《指导意见》&#xff09;&#xff0c;向社会公开征求意见。 《指导意见》作为推进城市数字化转型的重要文件&#xf…

Java学习笔记24(面向对象编程(高级))

1.面向对象编程(高级) 1.1 类变量和类方法 1.类变量 ​ *类变量也叫静态变量/静态属性&#xff0c;是该类的所有对象共享的变量&#xff0c;任何一个该类的对象去访问它时&#xff0c;取到的都是相同的值&#xff0c;同样任何一个该类的对象去修改它时&#xff0c;修改的也是…

C语言数据结构(11)——归并排序

欢迎来到博主的专栏C语言数据结构 博主ID&#xff1a;代码小豪 文章目录 归并排序两个有序数组的合并归并归并排序 归并排序的代码 归并排序 两个有序数组的合并 当前有两个有序数组arr1和arr2&#xff0c;我们创建一个可以容纳arr1和arr2同等元素个数的新数组arr。 让一个…

探索数据结构:特殊的双向队列

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 双向队列的定义 **双向队列(double‑ended queue)**是一种特殊的队列…