标签 css 下的文章

2024-08-25

以下是一个使用CSS创建点赞爱心动效按钮的示例代码：

HTML:




<div class="like-button">
  <span class="like-icon"></span>
  <span class="like-text">点赞</span>
</div>

CSS:




.like-button {
  display: inline-block;
  background-color: #e0e0e0;
  border-radius: 30px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  user-select: none;
}
 
.like-button:hover {
  background-color: #d9534f;
}
 
.like-button .like-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin-right: 5px;
  animation: like-heart-bounce 0.5s infinite alternate;
}
 
.like-button .like-icon::before,
.like-button .like-icon::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}
 
.like-button .like-icon::before {
  transform: translateX(-20px);
}
 
.like-button .like-icon::after {
  transform: translateX(20px);
}
 
@keyframes like-heart-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
 
.like-button .like-text {
  vertical-align: top;
}

这段代码创建了一个带有点赞动画的爱心形状按钮，当用户将鼠标悬停在按钮上时，按钮背景色会变化，并且爱心图标会跳动。这是一个简单的示例，可以根据需要进行样式和动画的自定义。

System

2024-08-25

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面信息验证</title>
    <style>
        .error {
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <form id="registrationForm">
        用户名: <input type="text" id="username" name="username"><br><br>
        密码: <input type="password" id="password" name="password"><br><br>
        确认密码: <input type="password" id="confirm_password" name="confirm_password"><br><br>
        邮箱: <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="注册">
    </form>
 
    <script>
        document.getElementById('registrationForm').onsubmit = function(e) {
            e.preventDefault();
 
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirm_password = document.getElementById('confirm_password').value;
            var email = document.getElementById('email').value;
 
            // 验证用户名
            if (username.length < 6) {
                showError('用户名长度必须大于6个字符。');
                return;
            }
 
            // 验证密码
            if (password !== confirm_password) {
                showError('密码和确认密码不匹配。');
                return;
            }
 
            // 验证邮箱
            if (!email.includes('@')) {
                showError('请输入有效的邮箱地址。');
                return;
            }
 
            // 验证通过，提交表单
            this.submit();
        };
 
        function showError(errorMessage) {
            alert(errorMessage);
        }
    </script>
</body>
</html>

这段代码实现了一个简单的注册页面，并在用户尝试提交表单时进行验证。如果任何验证规则失败，它将显示一个错误消息，并取消表单的提交。如果所有验证都通过，它将提交表单。这个例子教会了如何使用JavaScript进行简单的表单验证，并展示了如何通过alert函数显示错误消息。

- 阅读更多 -

Vue3 使用 v-bind 动态绑定 CSS 样式

System

2024-08-25

所有,css




<template>
  <div>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">动态绑定样式</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
</script>

这个例子中，我们使用了v-bind:style来动态绑定元素的style属性。activeColor和fontSize是在组件的data函数中定义的响应式属性，它们的值可以动态改变，从而实时更新元素的样式。

System

2024-08-25

所有,css

在CSS中，我们可以使用通配选择器（*）来清除所有元素的默认样式，但这种做法并不推荐，因为它会影响性能。在实际开发中，我们通常只会重置必要的样式，以确保跨浏览器的一致性。

以下是一个示例，展示了如何重置边距和填充：




/* 重置边距和填充 */
* {
  margin: 0;
  padding: 0;
}
 
/* 其他样式规则 */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
}
 
/* 更多样式 */

在这个例子中，我们使用通配选择器将所有元素的margin设置为0，将所有元素的padding设置为0。然后，我们为body设置了一个基本的字体和背景颜色，并且可以添加更多的样式规则来完善整个网页的样式。

- 阅读更多 -

【前端系列】CSS 常见的选择器

System

2024-08-25

所有,css

CSS 常用的选择器包括：

标签选择器（Element selector）：直接使用元素名作为选择器，比如 div、p。
类选择器（Class selector）：使用.前缀，比如.classname。
ID选择器（ID selector）：使用#前缀，比如#idname。
群组选择器（Grouping selector）：使用逗号,分隔多个选择器，比如h1, h2, p。
后代选择器（Descendant selector）：使用空格分隔，表示嵌套关系，比如div a。
子选择器（Child selector）：使用>表示直接子元素，比如div > p。
相邻兄弟选择器（Adjacent sibling selector）：使用+表示紧跟在另一个元素后的元素，比如h1 + p。
通用兄弟选择器（General sibling selector）：使用~表示同一父元素下的所有某一元素之后的兄弟元素，比如h1 ~ p。
伪类选择器（Pseudo-class selector）：使用:前缀，表示元素的特殊状态，比如:hover、:active。
伪元素选择器（Pseudo-element selector）：使用::前缀，表示元素的特定部分，比如::before、::after。

示例代码：




/* 标签选择器 */
div {
  background-color: blue;
}
 
/* 类选择器 */
.highlight {
  color: yellow;
}
 
/* ID选择器 */
#logo {
  width: 100px;
}
 
/* 群组选择器 */
h1, h2, p {
  margin: 0;
}
 
/* 后代选择器 */
div a {
  text-decoration: underline;
}
 
/* 子选择器 */
div > p {
  font-weight: bold;
}
 
/* 相邻兄弟选择器 */
h1 + p {
  color: green;
}
 
/* 通用兄弟选择器 */
h1 ~ p {
  font-style: italic;
}
 
/* 伪类选择器 */
a:hover {
  text-decoration: none;
}
 
/* 伪元素选择器 */
p::first-letter {
  font-size: 200%;
}

- 阅读更多 -

前端三剑客之CSS

System

2024-08-25

所有,css

CSS，即层叠样式表(Cascading Style Sheets)，是一种用来 describe 如何显示 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件的样式表语言。CSS 的主要目的是为了让我们的网页更加美观，有利于用户体验。

CSS 的主要特点有：

简单性和可扩展性：CSS 的语言非常简单，可以通过几种简单的规则就可以对网页进行样式定义。
样式可重定义：通过 CSS 可以实现样式信息的重用，即可以在多个页面中使用同一个样式定义。
多样化输出：通过 CSS 可以实现表格的横向打印和纵向打印，可以实现不同的媒体类型输出，如屏幕、打印机等。
与 HTML 的兼容性：CSS 可以和多种版本的 HTML 兼容，包括 HTML1.0 到 HTML4.0。

CSS 的基本语法结构：




selector {
    property: value;
    property: value;
    ...
}

其中，selector 是选择器，property 是属性，value 是值。

CSS 的选择器主要有：

标签选择器：直接使用 HTML 标签作为选择器。
类选择器：使用 "." 开头，后跟一个自定义的名称。
ID 选择器：使用 "#" 开头，后跟一个唯一的名称。
群组选择器：使用逗号隔开多个选择器。

CSS 的属性有很多，常用的有：

color：设置文字颜色。
background-color：设置背景颜色。
font-size：设置文字大小。
border：设置边框。
margin：设置外边距。
padding：设置内边距。

CSS 的继承性：某些属性会被继承到子元素中，如 color 和 font-family。

CSS 的优先级：当同一个元素被多个选择器选中并且设置了相同的属性时，将根据选择器的优先级来决定应用哪个样式。

CSS 的注释：/* 注释内容 */

CSS 的使用方法：

内联样式：直接在 HTML 标签的 style 属性中书写 CSS。
内部样式表：在 HTML 的 <head> 标签中使用 <style> 标签书写 CSS。
外部样式表：创建一个单独的 CSS 文件，然后在 HTML 中使用 <link> 标签引入。

CSS 的使用可以极大地提高我们的工作效率，使得我们可以更加专注于网页的内容和结构，而不用过多地关注样式的实现。

System

2024-08-25

所有,css

在Vue中，可以使用v-show指令结合CSS的:hover伪类实现鼠标悬停时显示悬浮框的效果。以下是一个简单的示例：




<template>
  <div>
    <div class="hover-box" @mouseenter="showBox = true" @mouseleave="showBox = false">
      鼠标悬停显示悬浮框
      <div v-show="showBox" class="floating-box">
        这是悬浮框的内容
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showBox: false,
    };
  },
};
</script>
 
<style>
.hover-box {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #000;
}
 
.floating-box {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  display: none;
}
 
.hover-box:hover .floating-box {
  display: block;
}
</style>

在这个例子中，.hover-box是触发区域，.floating-box是悬浮框本身。CSS中.hover-box:hover .floating-box规则确保了当鼠标悬停在.hover-box上时，.floating-box会显示出来。

如果不想使用CSS，也可以完全用Vue来控制显示和隐藏，但这种方式可能会使用更多的JavaScript逻辑，并可能会引入额外的状态管理问题。

- 阅读更多 -

vite配置postcss

System

2024-08-25

所有,css

在Vite项目中配置PostCSS，你需要按照以下步骤操作：

安装PostCSS和相关插件（如postcss-preset-env）:




npm install -D postcss postcss-preset-env

在项目根目录下创建一个PostCSS配置文件（如postcss.config.js）:




// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      // 选项
    },
  },
};

在Vite配置文件（默认为vite.config.js）中启用PostCSS:




// vite.config.js
import { defineConfig } from 'vite';
import postcss from 'vite-plugin-postcss';
 
export default defineConfig({
  plugins: [
    postcss({
      // 插件等配置
    }),
  ],
});

确保你的Vite版本是最新的，并且vite-plugin-postcss插件与你的Vite版本兼容。如果vite-plugin-postcss不是必需的，Vite 官方插件可能会直接支持PostCSS。

以上步骤提供了一个基本的配置框架，你可以根据自己的需求对其进行调整。

- 阅读更多 -

CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）

System

2024-08-25

所有,css

CSS定位属性主要有以下几种：

position: 指定定位类型。
top: 定义顶部边缘。
right: 定义右侧边缘。
bottom: 定义底部边缘。
left: 定义左侧边缘。
z-index: 定义堆叠顺序。
overflow: 定义溢出内容的处理方式。
clip: 定义剪切的区域。
vertical-align: 定义元素的垂直对齐方式。

解决方案

以下是一些CSS定位的常用示例：

1. 相对定位(relative positioning)




.relative {
  position: relative;
  top: 20px;
  left: 40px;
}

2. 绝对定位(absolute positioning)




.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
  bottom: 40px;
  left: 50px;
}

3. 固定定位(fixed positioning)




.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
}

4. 粘性定位(sticky positioning)




.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

5. 使用z-index分层




.first {
  position: relative;
  z-index: 1;
}
 
.second {
  position: relative;
  z-index: 2;
}

6. 使用clip属性剪切




.clip {
  position: absolute;
  clip: rect(10px, 100px, 100px, 50px);
}

7. 使用overflow属性处理溢出




.overflow {
  position: relative;
  overflow: auto;
  width: 200px;
  height: 200px;
}

8. 使用vertical-align属性对齐




.vertical-align {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 200px;
}

以上都是CSS定位的常用方法，可以根据实际需求选择合适的定位方式。

- 阅读更多 -

HTML＋CSS＋JS 登录页面的代码结构入门_登录页面js代码

System

2024-08-25

所有,javascript




// 页面加载完成后执行的函数
window.onload = function() {
    // 获取登录按钮
    var loginButton = document.getElementById('login-button');
    // 为登录按钮添加点击事件监听器
    loginButton.addEventListener('click', function() {
        // 获取用户名和密码输入框的值
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
 
        // 简单的验证，如果用户名和密码都不为空，则提示登录成功
        if (username !== '' && password !== '') {
            alert('登录成功！');
            // 在这里可以添加登录成功后的代码，例如跳转到另一个页面
        } else {
            // 否则提示用户输入不能为空
            alert('用户名和密码不能为空！');
        }
    });
};

这段代码在用户点击登录按钮时，会检查用户名和密码是否为空。如果不为空，则提示登录成功；如果为空，则提示用户输入不能为空。这是一个非常基础的登录验证例子，实际应用中需要根据需求进行扩展和完善，比如加入表单验证、异步请求后端接口等。

- 阅读更多 -