win12网页版

2023-06-27

css/js备忘录

CSS 备忘笔记链接伪类选择器用于不同状态下链接元素的 CSS 选择器，以下是一些常用的备忘录笔记： :link：选择未被访问过的链接。 :visited：选择已被访问过的链接。 :hover：选择鼠标悬停在链接上的状态 :active：选择链接被点击的状态 :focus：选择链接获得焦点时的状态 这些伪类选择器可以用于修改链接元素的样式，以提供视觉上的反馈或交互效果。 使用顺序：:link -> :visited -> :hover -> :active 这个顺序的原因在于，当链接被点击时，用户通常先悬停在链接上（:hover），然后触发链接点击（:active）。而 :visited 伪类选择器需要在 :link 之后定义，以确保样式覆盖正确。 示例; 123456789101112131415a:link { color: blue; /* 未访问的链接的颜色为蓝色 */}a:visited { color: red; /* 已访问链接的颜色为红色 */}a:hover { color: yell...

2022-06-26

web前端之CSS背景属性

CSS背景属性：美化网页的关键特性 CSS 背景属性（Background Properties）是用于控制网页元素背景样式的一组属性。通过使用这些属性，可以实现背景图片、背景颜色、背景平铺等效果。本文将介绍一些常用的 CSS 背景属性及其用法。 背景颜色（background-color）：该属性用于设置元素的背景颜色。可以使用颜色名称、十六进制码或 RGB 值来指定颜色。例如： 123.element { background-color: #f1f1f1;} 背景图片（background-image）：通过该属性可以设置元素的背景图片。可以使用相对或绝对路径指定图片的位置。例如： 123.element { background-image: url("background.jpg");} 背景平铺（background-repeat）：该属性控制背景图片在元素内如何平铺。常用的值包括：repeat（默认，水平和垂直方向都平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）和 ...

2022-06-23

web前端之HTML5新增标签

HTML5引入了一些新的语义化标签，这些标签旨在提供更清晰的结构和更好的可读性。下面是一些HTML5新增的标签： <header>：定义文档的页眉，通常包含站点的标题、导航和其他引导性内容。 <nav>：用于定义页面的导航链接部分，包含导航菜单、链接列表等。 <section>：表示文档中的一个独立区域或主题。可以用于组织内容，如文章、章节、页面模块等。 <article>：表示文档中一个独立的、完整的、可独立分配或可复用的内容单元。常用于包含独立的新闻文章、博客帖子、评论等。 <aside>：用于表示页面内容的侧边栏或附属信息。通常包含与主要内容相关但可以独立存在的内容，如侧边栏、广告、引用等。 <footer>：定义文档的页脚，通常包含版权信息、联系方式、相关链接等。 <figure>：用于包裹一组与文档相关的媒体内容，如图像、插图、照片、代码示例等。 <figcaption>：用于为 <figure> 元素提供标题或图像描述。 <main>...

2022-06-30

web前端之css关系选择器

深入了解CSS关系选择器：精确定位元素的艺术 摘要：CSS关系选择器是Web开发中不可或缺的工具之一。它们通过定义元素之间的关系来精确选择和样式化HTML元素。本文将深入探讨CSS关系选择器的不同类型和用法，帮助您掌握这一强大的选择器，提升网页设计的灵活性和个性化。 引言：CSS关系选择器是Web开发人员的得力助手，它们使我们能够根据元素之间的关系更精确地选择特定的HTML元素。不同类型的关系选择器使得我们可以定位并样式化具有特定关系的元素，从而实现更精细的布局和视觉效果。在本文中，我们将深入探讨CSS关系选择器的多种类型，介绍它们的语法和示例，帮助您更好地理解和应用这些强大的选择器。 后代选择器：后代选择器（Descendant Selector）通过元素之间的嵌套关系选择元素。它使用空格来表示嵌套关系，可以选择指定元素下的所有后代元素。例如，要选择所有<ul>元素内的<li>元素，可以使用以下选择器： 123ul li { /* 样式定义 */} 这样，所有嵌套在<ul>元素内的<li>元素都将被选择...

2022-06-26

web前端之css动画

当涉及到CSS动画，有许多不同的技术和方法可以使用。CSS动画使得在网页上创建各种交互和动态效果变得简单和灵活。在本文中，我们将深入探讨CSS动画的详细知识和用法。 CSS动画简介CSS动画是一种通过CSS样式表中的属性和关键帧来创建动态效果的方法。使用CSS动画，您可以定义对象的运动、渐变、旋转、缩放等变化。 要创建CSS动画，您需要定义关键帧，即动画的不同阶段，并指定每个阶段的样式。然后，将这些关键帧与动画属性一起应用于要进行动画的元素。 动画属性在CSS中，有几个属性用于控制和定义动画效果。 animation-nameanimation-name属性定义了要使用的关键帧的名称。关键帧通过@keyframes规则进行定义。 123.element { animation-name: myAnimation;} animation-durationanimation-duration属性指定动画的持续时间，以秒或毫秒为单位。 123.element { animation-duration: 2s;} animation-tim...

2022-06-27

web前端之css媒体查询

当涉及到构建响应式网页时，CSS媒体查询是一个不可或缺的工具。它允许开发人员根据用户设备的属性和特征来自动调整网页的样式和布局。本文将详细介绍CSS媒体查询的语法、常用的媒体特征以及示例代码，帮助您了解如何使用媒体查询来创建适应不同设备的网页。 什么是CSS媒体查询？CSS媒体查询是一种用于确定用户设备属性并应用相应CSS样式的技术。通过使用媒体查询，可以根据设备的屏幕尺寸、方向、分辨率和媒体类型等条件应用不同的CSS样式。这种灵活性使得我们能够为不同的设备提供最佳的用户体验，无论是在桌面电脑、平板电脑还是移动设备上。 媒体查询的语法媒体查询通过@media规则来定义。下面是媒体查询的基本语法： 123@media 媒体类型 and (媒体特征) { /* CSS样式规则 */} 其中，媒体类型表示要匹配的设备类型，常见的媒体类型有screen（屏幕）、print（打印）、speech（语音）等。媒体特征是条件的一部分，用于指定设备的属性和特征。 媒体特征由媒体特性和值组成，例如width（宽度）、height（高度）、orientation（方向）等。可...