学习笔记（第三周）

最新推荐文章于 2024-09-12 08:54:42 发布
最新推荐文章于 2024-09-12 08:54:42 发布
阅读量643 收藏
点赞数
文章标签： 学习 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74267243/article/details/127630450
版权

学习笔记

46.标签群组通配等选择器

在这里插入图片描述
在这里插入图片描述

47.层次选择器

在这里插入图片描述

 <style>
         #list>li{ border:1px green solid}
    </style>
</head>
<body>
<ul id="list">
    <li>123
        <ul>
            <li>456</li>
            <li>789</li>
        </ul>
    </li>
    <li>3333</li>
</ul>
<ol>
    <li>da</li>
    <li>ds</li>

在这里插入图片描述

 <style>
        div+h2{ background: green;}
    </style>
</head>
<body>
    <h2>二级标题</h2>
    <div>块</div>
    <p>段落</p>
    <h2>标题</h2>
</body>
</html>

在这里插入图片描述

48.属性选择器

在这里插入图片描述

<style>
        div[class]{ background: green;}
    </style>
</head>
<body>
    <div>1</div>
    <div class="box">2</div>
    <div class="searrch">3</div>

在这里插入图片描述

<style>
        div[class$=search]{ background:red;}
    </style>
</head>
<body>
    <div>1</div>
    <div class="box">2</div>
    <div class="search">3</div>
    <div class="search-button">4</div>
    <div class="button-search">5</div>

在这里插入图片描述

49.hover等伪类选择器

在这里插入图片描述
在这里插入图片描述

<style>
        a{color:black}
        a:hover{color:red}
    </style>
</head>
<body>
    <a href="#">南邮通达</a>

50.after等伪类选择器

:after :before通过伪类的方式给元素添加一段文本内容，使用content属性
:checked :disabled :focus都是针对表单元素的

<style>
       div:after{content:"world";color:blueviolet}
    </style>
</head>
<body>
    <div>hello</div>

在这里插入图片描述

52.结构伪类选择器

在这里插入图片描述

 <style>
    li：nth-of-type(2){ background:red}
    </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

52.CSS样式的继承

在这里插入图片描述
在这里插入图片描述

53.单一样式的优先级在这里插入图片描述

内部样式与外部样式（显示为黄色）

 	<style>
        div{ color:blueviolet}
    </style>
    <link rel="stylesheet" href="./base.css">
</head>
<body>
    <div>什么颜色</div>

style的优先级大于id (显示为红色）权重（等级）1000

	<style>
        #elem{color:blue}
    </style>  
</head>
<body>
    <div id="elem" style="color:red;">什么颜色</div>

id的优先级大于class (显示为蓝色）权重100

	<style>
       #elem{color:blue}
       .box{color:red}
   </style>
</head>
<body>
   <div id="elem" class="box">什么颜色</div>
</body>
</html>

class的优先级大于tag标签 (显示为红色）权重10

	<style>
        .box{color:red}
        div{color:green;}
    </style>    
</head>
<body>
    <div id="elem" class="box">什么颜色</div>
</body>
</html>

标签的优先级大于通配 (显示为绿色）权重1

	<style>
        div{ color:green;}
        *{ color:black;}
    </style>
</head>
<body>
    <div id="elem" class="box">什么颜色</div>
</body>
</html>

通配的优先级大于继承 （显示为黑色）

	<style>
        /* div{ color:green;} */
        *{ color:black;}
        body{ color:blue;}
    </style>
</head>
<body>
    <div id="elem" class="box">什么颜色</div>

54.important群组等优先级

在这里插入图片描述
！important不能对继承的属性进行优先级的提升

 <style>
        div{ color:green;} 
        *{ color:black !important;}
        body{ color:blue;}
    </style>
</head>
<body>
    <div id="elem" class="box">什么颜色</div>

标签+类的优先级大于单类 （显示为蓝色）

 	<style>
       div.box{color:blue} 
       .box{color:red}
    </style>
</head>
<body>
    <div class="box">什么颜色</div>

在这里插入图片描述
在这里插入图片描述

55.层次的优先级

在这里插入图片描述

56.CSS盒子模型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

57.box-sizing改变盒模型

在这里插入图片描述

58.盒模型之margin叠加问题

<style>
        #box1{ width:200px; height:200px; background:red; margin-bottom:30px;}
        #box2{ width:200px; height:200px; background:blue; margin-top: 40px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>

59.margin传递问题

在这里插入图片描述

盒子
# 60.css盒子模型之拓展 ![在这里插入图片描述](https://img-blog.csdnimg.cn/75d707c648154abfb338f4563e0e33f5.png#pic_center) 
<style>
        #box1{ width:200px; height:200px; background:red; }
        #box2{ height:100px; background:blue; color:white; padding-left:30px; border-left:10px black solid;}
    </style>
</head>
<body>
    <div id="box1">盒子</div>
    <div id="box2">内容</div>
</body>
</html>

61.盒子模型的嵌套练习

 <style>
    #box1{ width:350px; height;350px; border:1px black dashed; padding:20px;}}
    #box2{ border:5px #d7effe solid; paddig:27px;}
    #box3{ background:#ffa0df; padding:41px}
    #box4{ border:1px white dashed; padding:3px}
    #box5{ border:1px white dashed; padding:49px;}
    #box6{ width:100px; height;100px; background:#96ff38; border:#fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</body>
</html>

62.按类型划分标签

在这里插入图片描述

<style>
    body{ font-size:0;}
    #content,#content{ width:100px; height:100px; background:red; font-size:16px;}
    input{ width:100ox; height;100px;}
    </style>
</head>
<body>
    <span id="content1">内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
</body>
</html>

63.按内容划分标签

在这里插入图片描述

64.按显示划分标签

在这里插入图片描述

<style>
        img{ width：100px; height:100px;}
    </style>
</head>
<body>
    <img src="./img/1.jpg" alt="">
</body>
</html>

65.dispiay显示框类型

在这里插入图片描述
在这里插入图片描述

66.标签嵌套规范

在这里插入图片描述

67.overflow溢出隐藏

在这里插入图片描述

 <style>
        div{ width:300px; height:200px; border:1px black solid; overflow-y: auto; overflow-x;}
    </style>
</head>
<body>
    <div>
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   溢出隐藏
   </div>
</body>

68.透明度与手势

在这里插入图片描述

<style>
        #div{ width:100px; height:100px; background:red; opacity： 0.5;}
        #div{ idth:100px; height:100px; background: rgba(255,0,0,1);}
    </style>
</head>
<body>
    <div id="div1">块</div>
    <p>段落</p>
    <div id="div2">块</div>

69.最大最小宽高

在这里插入图片描述

  <style>
        #div{ width:100px; min-height:100px; border:1px red solid;}
    </style>
</head>
<body>
    <div>
        这是一个段落
        这是一个段落
        这是一个段落
    </div>

<style>
        body{ height:500px;}
        #box1{ width:200px; background:red}
        #box2 {width:100%; height:80%; background:blue;}
    </style>
</head>
<body>
    <div>
        这是一个段落
        这是一个段落
        这是一个段落
    </div>

70.css默认样式

在这里插入图片描述

71.css重置样式

在这里插入图片描述

<style>
       div{ border:1px black solid;}
       img{ vertical-align:bottom;}
    </style>
</head>
<body>
    <div>
        <img src="" alt="">
    </div>
</body>
</html>

78.float浮动概念及原理

在这里插入图片描述

 <style>
         body{ border:1px black solid;}
        #box1{ width:200px; height:100px; background:red; float:left；}
        #box2 {width:200px; height:200px; background:blue; float:left；}
    </style>
</head>
<body>
    <div id="box1">块</div>
    <div id="box2">块</div>
</body>
</html>

79.float注意点整理

在这里插入图片描述

80.清除float浮动（上）

<style>
        #box1{ width:200px; height:100px; background:red; float:left；}
        #box2 {width:200px; height:200px; background:blue; clear:left；}
    </style>
</head>
<body>
    <div id="box1">块</div>
    <div id="box2">块</div>
</body>
</html>

<style>
        #box1{ width:200px; height:100px; background:red; float:left；}
        #box2 {width:200px; height:200px; background:blue; clear:both；}
    </style>

在这里插入图片描述

81.清除float浮动（下）

<style>
        #box1{ width:200px; height:1px; black solid ；}
        #box2 {width:200px; height:200px; background:blue; float:left ；}
        .clear{ clear:both;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2">块</div>
    <div class="clear">块</div>
    </div>
    aaaa
</body>
</html>

在这里插入图片描述

82.float制作页面小结构（上）

在这里插入图片描述

83.float制作页面小结构（下）

在这里插入图片描述
在这里插入图片描述

m0_74267243
关注
第三周学习笔记
qq_56777258的博客
11-05 64
对象比较的是内存地址,返回false 对象和bool值比较时，转为bool值为true，或者作为bool值进行运算时,比如while，if的循环条件，转为bool值且为true，但是不是全等于的 CharAt（） 返回字符串指定位置字符，不会对源字符串产生影响，根据索引获取指定字符 charCodeAt() 获取指定位置的字符的Unicode编码返回索引获取的字符的字符编码 fromCharCode() 根据字符编码获取字符 oncat（）...
2021 AAAI Fellow名单重磅出炉，华人学者遗憾连续两年无缘入选 | AI日报
BAAIBeijing的博客
12-31 767
2021 AAAI Fellow名单重磅出炉，华人学者遗憾连续两年无缘入选据AAAI 官方推特消息，AAAI将新增10位Fellow，表彰他们在强化学习、自然语言处理、视觉等方面的所作出...
15位大模型应用优秀代表出炉丨记2022大模型创新论坛 · 应用展示与交流
BAAIBeijing的博客
12-23 773
2022年，随着DALL-E2、ChatGPT等新模型的陆续发布，我们更深刻地认识到，超大规模预训练模型和基础模型等具有非凡的AI能力，他们懂语言、会写代码、能绘图画、演奏音乐，甚至开始具有身体。2022年末，智源研究院和关注这一领域的科研机构、高校院所、企业，共同组织了2022大模型创新论坛，召开了一系列关于大模型技术、应用与安全的交流研讨活动。近期刚刚结束的大模型创新论坛，聚焦基础模型、关键技...
2022吴恩达机器学习课程学习笔记（第一课第三周）
Yang0114_的博客
10-24 1105
2022吴恩达机器学习课程学习笔记（第一课第三周）
机器学习西瓜书第二周学习笔记
01-23
机器学习西瓜书第二周学习笔记 机器学习西瓜书第二周学习笔记中涵盖了机器学习的基础知识和重要概念。在本周的学习中，我们将了解机器学习的定义、类型、应用场景和常见算法。 首先，让我们从机器学习的定义开始。...
第一周第三天的学习笔记
03-22
第一周第三天的学习笔记
吴恩达深度学习课程学习笔记 第三周 浅层神经网络（中）
m0_57302305的博客
09-24 1084
【3.5 向量化实现的解释】 对不同训练样向量化的神经网络，四个矩阵的行表示神经元个数，列表示样本数目m 到目前为止，我们使用的激活函数只有函数 有很多种激活函数，sigma函数知识其中的一种选择 ...
Java学习第三周笔记总结
09-14
这周有一个简单的项目实战，只是简单的去实现要求和功能，熟悉之前所学习的知识以及应用，还包括类和对象，方法和方法重载等相关内容。
第八周学习笔记1
08-03
【第八周学习笔记1】 本笔记主要探讨了在人工智能领域，特别是大数据与少标注、大数据与弱计算、普世化模型与个性化需求以及特定应用需求之间的矛盾，这些矛盾是迁移学习的重要驱动力。迁移学习是一种解决这些问题...
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 770
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
Redis 入门 - 五大基础类型及其指令学习
IT规划师
09-11 634
学习Redis基础类型：字符串、集合、有序集合、列表、哈希，每种类型有各自的特点和常用指令。掌握这些基础是熟练使用Redis的关键。更多指令需自行尝试。
计算几何学习
最新发布
网安小白
09-12 324
学习计算几何过程中对经典算法的记录
sheng的学习笔记-AI-规则学习（rule learning）
coldstarry的专栏
09-09 1086
机器学习中的“规则”(rule)通常是指语义明确、能描述数据分布所隐含的客观规律或领域概念、可写成“若……，则……”形式的逻辑规则。​“规则学习”(rule learning)是从训练数据中学习出一组能用于对未见示例进行判别的规则。一条规则形如：在数理逻辑中“文字”专指原子公式(atom)及其否定。与神经网络、支持向量机这样的“黑箱模型”相比，规则学习具有更好的可解释性，能使用户更直观地对判别过程有所了解。另一方面，数理逻辑具有极强的表达能力，绝大多数人类知识都能通过数理逻辑进行简洁的刻画和表达。
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
nanxiaotao的博客
09-11 724
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
Android Fragment 学习备忘
sdaujz的博客
09-08 407
1.fragment的动态添加与管理：
【学习笔记】SSL证书之前向保密
Taki_UP的博客
09-10 667
本篇介绍了密码学中前向保密（Forward Secrecy）的相关内容
IIC基本学习
????????????????????????????????????????????????
09-11 188
对IIC通信协议补充了基本的了解，在进行相关的工程实践后再进行补充。
9.6学习记录+三场笔试
m0_62956971的博客
09-07 1177
短作业优先。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值