响应式网站可以在任何设备上正常工作，无论是台式机、平板电脑还是手机。要设置响应式，我们使用媒体查询。创建标题容器 为标题创建一个 divL 网站 ↶ 使用 text-align 属性将标题文本居中对齐 − .header { padding: 80px; text-align: center; background: #7b1abc; color: white; } 创建导航菜单 使用 来创建导航菜单 − ... 阅读更多

媒体查询用于网页上设置响应式。它允许用户根据不同的屏幕尺寸设置不同的样式。这些屏幕尺寸主要是台式机、平板电脑和移动设备。让我们首先设置不同的屏幕尺寸，即设置常见的设备断点。不同的屏幕尺寸 常见的设备断点是不同设备及其屏幕尺寸，例如 手机 − 屏幕宽度小于 768px 平板电脑 − 屏幕宽度等于或大于 768px 小型笔记本电脑 − 屏幕宽度等于或大于 992px 笔记本电脑和台式机 ... 阅读更多

在任何关于想法和名言的网站上，您都必须见过包含名言、说出该名言的名人以及滑块的名言幻灯片。此滑块允许通过点击单独的按钮（如箭头键）向左或向右移动幻灯片。让我们看看如何使用 CSS 和 JavaScript 创建一个名言幻灯片。设置父 div 该 div 包含幻灯片的容器、名言以及上一个和下一个按钮。使用 元素设置名言。说出该名言的名人姓名设置为 ... 阅读更多

在网站的右下角，您必须见过弹出聊天窗口。在网站托管网站上很常见。这允许用户在购买产品之前直接询问销售问题。可以使用 CSS 在网页上轻松创建此类弹出聊天窗口。让我们看看如何操作。创建聊天按钮 首先，使用 元素创建一个按钮 − 聊天 定位聊天按钮 要定位聊天按钮，请使用 position 属性并将其值设置为 fixed。right 和 bottom 属性用于定位并将按钮放置在右下角 − .openChatBtn { background-color: ... 阅读更多

要使用 CSS 创建聊天消息，代码如下 −示例 实时演示    body {       margin: 0 auto;       max-width: 800px;       padding: 0 20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .message {       font-size: 18px;       font-weight:500;       border: 2px solid #dedede;       background-color: #55e4a8;       color:rgb(0, 0, 0);       border-radius: 12px;       padding: 10px;       margin: 10px 0;    }    .darker ... 阅读更多

我们将创建一个带有计时器的“即将推出”页面。计时器使用 setInterval() 函数设置。时间使用 getTime() 函数获取。设置 div 我们已将图像设置为 div 类。其余的“即将推出”文本和计时器放置在其中 − 即将推出 放置图像 现在使用 background-image 属性放置图像。使用 background-position 属性设置位置” .bgimg { background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); height: ... 阅读更多

网页上的分隔线用于分隔不同的部分。这些部分在网页上水平显示。可以轻松创建点状、虚线、双线等分隔线。它的作用类似于边框，并且可以轻松更改此类分隔线的颜色。要创建分隔线，请使用 元素并在网页上使用边框属性对其进行样式设置。让我们看看如何使用 CSS 创建分隔线。创建虚线分隔线 为分隔线创建一个 元素 − 对其进行样式设置以创建虚线分隔线 − .dashed { ... 阅读更多

使用 CSS 创建垂直线是一个简单的过程，可以通过多种方法完成。在本文中，我们将学习并了解使用 CSS 创建垂直线的三种不同方法 我们在本文中使用边框和一些块级元素，我们的任务是使用 CSS 创建垂直线。创建垂直线的方法 以下是使用 CSS 创建垂直线的方法列表，我们将在本文中逐步解释并提供完整的示例代码。使用 ... 阅读更多

要更改列表的项目符号颜色，请使用 ::before 选择器。此外，要允许添加颜色，您需要将 list-style 设置为 none。设置一个无序列表 对于我们的示例，我们已设置一个 元素 − 板球 足球 网球 射箭 篮球 曲棍球 设置列表样式 list-style 属性设置为 none − ul { list-style: none; } 更改项目符号颜色 使用 ::before 选择器并设置项目符号颜色。要显示项目符号，请使用 content: \2022 unicode。使用 color 属性更改颜色 − ul li::before { ... 阅读更多

CSS3 提供了一种布局模式弹性盒子，通常称为 Flexbox。Flexbox（弹性盒子）是 CSS3 的一种布局模式。使用此模式，您可以轻松创建复杂应用程序和网页的布局。它包括容器、弹性项目等。容器具有以下属性 − flex-direction flex-wrap flex-flow justify-content align-items align-content 设置父 div 首先，设置一个父 div 并使用 display flex 对容器进行样式设置。使用 display flex，弹性容器变得灵活。使用 flex-wrap: wrap 将弹性项目包装起来 − .container { display: flex; ... 阅读更多