P3-无序列表-有序列表-表现编写位置-选择器-声明块-伪类选择器-a标签的伪类选择器-属性选择器-伪元素

列表

list:主要用来表示多个并列关系的内容

无序列表

使用ul标签来创建一个无序列表

<ul>
	<li></li>           
	<li></li>   
<ul>
有序列表

(项目符号用的是1234):使用ol标签来创建一个有序列表

<ol>
   <li></li>           
   <li></li>   
<ol>

注意:

  • 两种列表的表项都使用的是li标签
  • 列表之间可以互相嵌套,可以在一个有序列表中放一个无序列表,也可以在无序列表中放一个有序列表。
  • ul主要用来做导航条
  • 真正这种一级二级的效果比较像下拉菜单效果
定义列表

主要用于对一些内容下定义

<dl>
    <dt></dt>
    <dd></dd>
</dl>

解释:

  • dl:用来标识列表是定义列表
  • dt:用来标识定义项
  • dd:用来描述定义项
    案例:
    在这里插入图片描述
传统的导航条

案例:

<!-- #表示返回顶部/占位符(具体填写点击后跳转的链接)-->
<ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">我的</a></li>
    <li><a href="#">联系</a></li>
</ul>

CSS(Cascading Style Sheets)层叠样式表

概述
  • CSS用于设置页面中元素的样式,属于 ”结构表现行为”中的表现。
  • 所谓的表就是可以给网页中的多个模块设计样式
  • 用来处理页面的表现
  • 网页中所有的外在显示效果都由CSS来控制
表现的编写位置:
  • 第一种 内联样式:可将css代码编写到标签的style属性中,style属性写在html标签中。
    将样式直接编写到style属性中这样会导致结构和表现耦合,不方便代码复用,并且不方便后期的维护,所以在开发中永远不要使用内联样式。
<p style='color: red;font-size: 30px;'>落霞与孤鹜齐飞,秋水共长天一色</p>
  • 第二种 内部样式表 :可将css代码编写到一个style标签
    将样式编写在style标签中,然后通过CSS选择器选中指定的元素为其设置样式,将HTML和CSS代码分离开,使CSS样式可以复用,并且方便后期的维护。缺点(只在当前页面内有效,别的页面无效)
    style标签里面采用的是css语言,而外面采用的使html
    style标签写在head标签中。
<style>
    p{
        color: red;
        font-size: 60px;
        background-color: aquamarine;
    }
/*    选中p元素,大括号中的样式对选中元素进行设置*/
    </style>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
  • 第三种 外部样式表 :可以将css代码编写到一个外部文件中,然后通过link标签引入
    标签link需要写入head中。
    将CSS写在外部的样式表中,使结构和表现完全分离,可以在不同的页面中对样式表进行复用,方便后期的维护。将样式表写在外部文件中,可以充分的利用到浏览器的缓存机制,进而加快页面的加载速度,提高用户体验。
    在这里插入图片描述
    rel属性:必须有的,规定当前文档与被链接文档/资源之间的关系。属性值stylesheet意思是:要导入的样式表的URL。

CSS基本语法

选择器 和 声明块
  • 选择器:通过选择器可以选中页面中的指定元素
  • 声明块:声明块整体由一对大括号包裹,里面由一个一个的声明组成
    声明是一个一个的名值对结构,属性名和属性值用:(冒号)连接,用;(分号)结尾
    声明用来为选择器所指定的元素来设置样式。
    声明块
选择器
选择器名格式说明举例
元素选择器标签名{}根据标签名来选中指定的元素p{} span{} div{}
id选择器#id{}根据元素的id属性值选中一个元素#box #p1
类选择器.类名{}根据元素的class属性选中元素.box .p1
并集选择器选择器1,选择器2,…选择器n根据元素的id属性值选中一个元素p1,p2…pn
统配选择器*{}选中页面中的所有元素* {}
交集选择器选择器1选择器2…选择器n选中同时符合多个选择器的元素div.box{} 元素选择器+类选择器
.div{}相当于*.div{}
div#box{}不建议这么创建规则 元素选择器+id选择器
后代元素选择器祖先 后代选中指定元素的后代元素p span{} div p {}
子元素选择器父元素 > 子元素选中父元素的指定子元素div > p{} p > span{}
下一个兄弟元素兄 + 弟选中指定的元素的兄弟元素选择弟元素,且弟在兄紧挨着之后,否则什么也不选中
后面所有兄弟元素兄 ~ 弟选中指定的元素的兄弟元素选择弟元素,不管弟元素是否紧挨着兄,都选中

注意:

  • css中,逗号(,)一般都表示或者的意思
  • 元素除了可以添加id属性外,还可以添加class属性

class属性

  • 作用:为元素进行分类(持有相同class属性的元素属于同一类元素)
  • 设置方式:与id属性基本一致,不同的是class属性可以重复使用
  • class可以和id用同样的名字,但是id本身不能有重复
  • id只能有一个,但是可以同时为一个元素设置多个class
元素之间的关系

元素之间的关系是为了选中元素。

元素名称含义
父元素直接包含子元素的元素
子元素直接被父元素包含的元素
祖先元素直接或间接包含后代元素的元素、父元素也属于祖先元素
后代元素直接或间接被祖先元素包含的元素、子元素也属于后代元素
兄弟元素拥有相同父元素的元素

元素之前关系

伪类选择器
  • 都是以:(冒号)开头
  • 伪类表示元素的一些特殊状态或位置

伪类选择器表

伪类选择器名说明案例
:first-child第一个子元素
在所有的子元素中查找
div p:first-child{}
找的是标签div下的所有元素,第一个元素是p标签的 选中
:first-of-type同类型的第一个子元素div p:first-of-type{}
要选中div下的所有p元素的第一个
:last-child最后一个子元素
在所有子元素中查找
div p:last-child{}
要找的是标签div下所有的元素,最后一个元素是p标签的 选中
:last-of-type同类型的最后一个子元素div p:last-of-type{}
要选中div下的所有p元素的最后一个
:nth-child(n)第n个子元素
(在所有子元素中查找)
参数:odd(奇数)even(偶数)
p:nth-child(even)
选中同一级别的 所有元素中 偶数位置的p元素
:nth-of-type(n)同类型的第n个子元素p:nth-of-child(2)
选中同一级别的 p标签的第二个
:only-child唯一的子元素
匹配属于父元素中唯一子元素的元素
p:only-child{}
选中父元素的子元素只有一个元素且为p的
:only-of-type同类型中唯一的子元素
匹配属于同类型中唯一同级元素
p:only-of-type{}
选中父元素的子元素中p元素的个数是一个的
:empty空元素
什么都都没有才是空元素,含有空格则不为空元素
div:empty{}
选中是空的div元素
:not除了
表示否定伪类
p:not(.p1){}
选中所有p元素,除了设置class属性为p1元素

first-child:
first-child
first-of-type
first-of-type
nth-child(n)
nth-child(n)
nth-of-type(n)
nth-of-type
only-child
only-child
only-of-type
only-of-type
empty
empty
not
not

a标签—超链接的伪类
伪类名说明
:link正常的链接(带有href的a标签)
主要用来设置没有访问的链接的形式
:visited访问过的链接
由于隐私原因,visited这个伪类只能修改字体的颜色,其余样式都不能修改
:hover鼠标移入的状态
不仅仅适用于超链接、其他元素也可以.鼠标移上去改变样式
:active鼠标点击的状态
不仅仅适用于超链接、其他元素也可以使用
:link
link
:visited
visited
:hover
hover
:active
active
属性选择器

属性选择器 根据元素的属性来选中元素

属性选择器名说明
[属性名]获取含有指定属性的元素
如果前面没有指定元素,则认为从全局中的所有元素查找
[属性名 = X]表示选中属性名=X的项
区分大小写
[属性名 = X i]表示选中属性名 = X的项 且忽略大小写。i表示not (意思是忽略大小写)
[属性名 ^=X]表示选中属性名 且 属性值以X开头
[属性名 ^=X i]表示选中属性名 且 属性值以X开头 且忽略大小写
[属性名$ = X]表示选中属性名 且属性值以X结尾
[属性名$ = X i]表示选中属性名 且属性值以X结尾 忽略大小写
[属性名 *= X]表示选中属性名 且属性值包含X
[属性名 *= X i]表示选中属性名 且属性值包含X 忽略大小写
[属性名]
属性名
[属性名 = 属性值]
[属性名 = 属性值]
[属性名 = 属性值 i]
[属性名 = 属性值 i]
[属性值 ^ = 属性值]
[属性名^=属性值]
[属性名 ^=属性值 i]
[属性名 ^= 属性值 i]
属性名 $ =属性值,属性名 $=属性值 i
[属性名 $=属性值]
[属性名 *= 属性值]
[属性名 *= 属性值]
伪元素

伪元素主要表示一些特殊的元素

伪元素说明
::before
(元素开头的位置)
表示开始标签和文本之间的位置
使用content属性添加内容
::after
(元素结尾的位置)
表示文本和结束标签之间的位置
使用content属性添加内容
::first-letter选中元素的第一个字母或汉字
::first-line选中元素的第一行
::selection表示选中的内容
::before
::before
::after
::after
::first-letter
::first-letter
::first-line
first-line
::selection
::selection
注意:
  • 采用两个冒号和一个冒号都可以,但是在brackets软件中,两个冒号可以出现属性提示
  • before和after是通过css中加的,不是html,所以在网页中不能通过鼠标将其选中
  • 如果想要在元素开头或者元素结尾处添加内容,需要使用content属性在这些位置添加内容
  • before和after的具体位置是:
    before-after

游戏 关于选择器的

游戏链接
游戏结果
game1
game2
game3

<think>好的,我现在要处理用户提供的这个实验相关的查询。首先,我需要仔细阅读用户给出的内容,理解每个部分的要求和结构。用户主要想了解实验的目的、仪器、内容,并且需要按照特定的格式要求来呈现答案。 首先,实验目的有三个部分:熟悉Proteus和Keil软件的使用,以及数码管显示原理。用户特别指出要分点列出,所以我需要确保每个目标都清晰明确。接下来是实验仪器,这里列出了Proteus 7-8、Keil uVision5和电脑,需要注意可能的排版问题,比如“S”可能是误输入,需要确认是否需要处理。 然后是实验内容,共有四个步骤,其中第三和第四个步骤可能需要更详细的解释,特别是关于修改程显示学号后两位和控制端口的部分。用户还强调了使用中文回答,结构清晰,帮助用户逐步解决问题,所以需要分步骤说明,可能还需要补充一些原理或操作指导。 同时,用户设置了系统级指令,要求数学表达式用$...$,独立公式用$$...$$,并且正确使用LaTeX。不过在这个实验中可能涉及到的数学内容不多,但如果有涉及数码管编码或定时器计算等,可能需要用到LaTeX,比如七段数码管的段码可以用十六进制表示,如$0x5B$,不过要确认是否需要使用数学格式。 接下来要检查是否有任何格式错误,比如用户内容中的“#”和“*”可能表示项目符号,需要转换为有序无序列表。在实验内容部分,用户用了“*”和“#”,这可能只是输入时的符号,需要正确转换为列表结构。例如,实验内容1到4应该用数字列表,而子项可能需要子列表。 另外,用户提到数码管显示的原理需要参考教材,所以在回答中可能需要简要说明原理,比如共阳或共阴数码管的控制,段选和位选的概念,以及如何通过微控制器端口控制显示不同的数字。这部分需要确保准确,避免错误,比如正确的端口控制方法和编程步骤。 在编写部分,用户要求显示数字2和7,然后修改为学号后两位,再改为由P2和P3口控制。这里可能需要解释如何修改代码,比如改变端口定义或调整段码数据。需要分步骤说明,可能包括代码示例(虽然用户没有明确要求代码,但根据实验内容可能需要指导如何修改)。 还需要注意实验仪器的正确列出,确认Proteus版本是否为7或8,Keil是uvision5,以及电脑作为必要工具。如果有拼写错误,比如“protues”应更正为“Proteus”,需要确认用户的拼写是否有误,但按照用户提供的原文呈现,可能不需要修改,除非确定是错误。 最后,确保整个回答结构清晰,使用标题和子标题,分点列出,符合用户要求的格式。同时,使用中文,避免专业术语错误,比如“数码管”而不是“数字管”,确保术语正确。 现在需要组织这些信息,按照实验目的、仪器、内容的顺,每个部分详细说明,确保用户能逐步理解并完成实验。可能还需要补充一些注意事项,比如在Proteus中绘制电路图的要点,Keil中编译调试的步骤,以及数码管动态扫描的原理,如果涉及多位数码管的话。 总结来说,回答需要涵盖: 1. 实验目的分三点,明确软件使用和原理掌握。 2. 实验仪器正确列出。 3. 实验内容分步骤详细说明,特别是程修改部分,可能需要解释如何更改端口控制和显示内容。 4. 确保格式正确,使用列表,正确应用LaTeX(如有必要),语言简洁明了。 需要避免遗漏任何用户提供的信息,同时检查是否有冗余或错误。例如,用户提到的“由P2、P3口控制”可能需要解释如何分配段选和位选信号到不同的端口,或者如何修改代码中的端口定义。 可能还需要提醒用户注意电路连接的正确性,比如数码管是共阳还是共阴,对应的上拉电阻或驱动电路,以及程中的段码是否正确。这些细节虽然用户没有明确询问,但作为实验内容的一部分,适当的指导能帮助用户更好地完成任务。 最后,确保回答中没有使用Markdown格式,而是纯文本,结构清晰,使用数字和项目符号区分各部分内容。</think>### 实验目的 1. **熟悉 Proteus 仿真软件的使用** - 掌握绘制仿真电路图的基本操作,包括元件选择、连线、参数设置等。 2. **熟悉 Keil 编程软件的使用** - 学习基于 C 语言的单片机程编写、编译与调试方法。 3. **熟悉数码管显示原理** - 理解数码管的结构、段码控制原理及动态扫描机制(参考教材内容)。 --- ### 实验仪器 1. **软件工具** - Proteus 7/8(用于电路设计与仿真) - Keil uVision5(用于程开发与调试) 2. **硬件设备** - 电脑(运行 Proteus 和 Keil 环境) --- ### 实验内容与步骤 #### 1. **绘制 Proteus 电路图** - **要求**:根据给定电路图完成绘制。 - **关键元件**: - 单片机(如 51 系列) - 共阳/共阴数码管 - 限流电阻、电源等。 - **注意事项**: - 确认数码管类型(共阳/共阴),正确连接段选和位选信号。 #### 2. **编写显示固定数值(2 和 7)** - **步骤**: 1. 在 Keil 中新建工程,选择对应单片机型号。 2. 编写 C 程- 定义数码管段码表(如 `unsigned char code seg[] = {0xA4, 0x12};`,对应数字 2 和 7 的段码)。 - 控制单片机端口输出段码至数码管。 3. 编译程并生成 `.hex` 文件,导入 Proteus 单片机中仿真运行。 #### 3. **修改程显示学号后两位** - **实现方法**: 1. 根据学号后两位数字(如 89),更新段码表: ```c unsigned char code seg[] = {0x90, 0x80}; // 示例:共阳数码管显示 8 和 9 ``` 2. 调整程逻辑,确保数码管依次显示这两个数字(静态或动态扫描)。 #### 4. **通过 P2、P3 口控制数码管显示** - **端口分配**: - **P2 口**:控制数码管段选信号(如连接 a~dp 段)。 - **P3 口**:控制数码管位选信号(如选择第 1 位或第 2 位)。 - **程修改示例**: ```c P2 = seg[0]; // 输出段码 P3 = 0x01; // 选中第一位数码管 ``` --- ### 关键原理说明 1. **数码管显示原理** - **段码与位码**: - 段码控制显示形状(如数字 0~9),位码控制哪一个数码管亮起。 - 共阳数码管需位选信号为低电平,共阴则需高电平。 - **动态扫描**: - 通过快速切换位选信号,实现多位数码管“同时”显示。 2. **C 程调试要点** - 使用 Keil 的断点功能观察变量值。 - 检查生成的 `.hex` 文件是否成功加载到 Proteus 单片机中。 --- ### 注意事项 1. Proteus 中需确保单片机时钟频率与程设定一致。 2. 数码管限流电阻需根据实际电流计算(通常 220Ω~1kΩ)。 3. 若显示模糊或闪烁,需调整动态扫描的延时时间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值