分类 css 下的文章

2024-08-09

在Vue 3 + TypeScript 项目中，你可以通过以下步骤定义和使用全局SCSS变量：

安装sass-loader和sass:




npm install --save-dev sass-loader sass

在项目根目录下创建styles文件夹，并在该文件夹中创建_variables.scss文件来定义你的全局SCSS变量：




// styles/_variables.scss
$primary-color: #3498db;
$secondary-color: #e74c3c;

在vue.config.js文件中配置sass-loader以使用dart-sass（node-sass已弃用）：




// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        additionalData: `@import "@/styles/_variables.scss";`
      },
    },
  },
};

在组件中使用这些变量：




<template>
  <div :style="{ color: primaryColor }">
    This text will be colored with the primary color.
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { primaryColor, secondaryColor } from '@/styles/_variables.scss';
 
export default defineComponent({
  setup() {
    return {
      primaryColor,
      secondaryColor
    };
  }
});
</script>
 
<style lang="scss">
.button {
  background-color: $secondary-color;
}
</style>

确保你的vue.config.js文件中已正确配置了sass-loader，并且在_variables.scss中定义的变量是可导出的（通常SCSS文件默认导出所有变量）。在组件的<style>标签中使用lang="scss"属性来指定你正在使用SCSS。在<script>中，你可以直接引入这些变量并在模板中使用。

- 阅读更多 -

有趣的css - 勾选动效多选框

System

2024-08-09

所有,css

以下是一个简单的示例，演示了如何使用CSS创建一个有趣的勾选动效多选框：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Toggle Effect</title>
<style>
  /* 基本样式 */
  .checkbox-container {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ddd;
    border-radius: 50px;
    cursor: pointer;
  }
 
  /* 勾选状态的样式 */
  .checkbox-container input[type="checkbox"]:checked + .checkbox-button {
    left: calc(100% - 20px);
  }
 
  /* 勾选按钮的样式 */
  .checkbox-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: left 0.3s; /* 添加过渡效果 */
  }
</style>
</head>
<body>
 
<label class="checkbox-container">
  <input type="checkbox" />
  <span class="checkbox-button"></span>
</label>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个自定义的多选框勾选动效。当用户勾选时，小圆点会滑动到右侧的位置，提供了一个视觉上的反馈。这个示例简单明了，并且易于理解和实施。

System

2024-08-09

所有,css

CSS背景属性包括背景颜色、背景图片、背景重复、背景定位、背景尺寸和背景渐变等。

背景颜色：




.element {
  background-color: #ff0000; /* 红色背景 */
}

背景图片：




.element {
  background-image: url('image.jpg'); /* 设置背景图片 */
}

背景重复：




.element {
  background-repeat: no-repeat; /* 背景图片不重复 */
}

背景定位：




.element {
  background-position: center center; /* 背景图片居中 */
}

背景尺寸：




.element {
  background-size: cover; /* 背景图片覆盖整个容器 */
}

背景渐变：

线性渐变：




.element {
  background-image: linear-gradient(to right, red , blue); /* 从左到右的红到蓝渐变 */
}

径向渐变：




.element {
  background-image: radial-gradient(circle, red, blue); /* 圆形的红到蓝径向渐变 */
}

以上是背景属性的一些基本用法，实际使用时可以根据需要组合这些属性。

System

2024-08-09

所有,css




// 引入样式处理库
import styled from 'styled-components';
 
// 创建一个带样式的按钮组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
 
  &:hover {
    background-color: #45a049; /* 悬停时的绿色背景 */
  }
`;
 
// 使用组件
function App() {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
}
 
export default App;

这段代码使用了styled-components库来创建一个带有内联样式的按钮组件。通过模板字符串定义了按钮的样式，并且在悬停状态下改变背景色。这是一个简单的例子，展示了如何使用CSS-in-JS库来提高React组件的样式管理能力。

System

2024-08-09

所有,css




import { GetStaticProps } from 'next';
import { ParsedUrlQuery } from 'node:querystring';
import { NextSeo } from 'next-seo';
import { useRouter } from 'next/router';
import React from 'react';
import Script from 'next/script';
import siteConfig from '/content/siteConfig.json';
 
// 定义页面的查询参数类型
export interface IPostQuery extends ParsedUrlQuery {
  slug: string;
}
 
// 获取静态props，这里可以添加获取外部数据的逻辑
export const getStaticProps: GetStaticProps = async (context) => {
  // 这里可以获取数据，并返回给页面
  return {
    props: {
      // 需要传递给组件的props
    },
    // 如果页面是动态的，可以设置不同的静态生成路径
    revalidate: 10, // 单位是秒，设置缓存重新验证的时间
  };
};
 
// 定义页面组件
const Post: React.FC = () => {
  const router = useRouter();
  const { slug } = router.query as IPostQuery;
 
  return (
    <>
      <NextSeo
        title={`${siteConfig.title} - ${slug}`}
        description={`Post description for ${slug}`}
      />
      <Script src="https://platform.twitter.com/widgets.js" />
      {/* 页面内容 */}
      <div className="prose lg:prose-lg mx-auto">
        {/* 文章内容 */}
      </div>
    </>
  );
};
 
export default Post;

这个代码实例展示了如何使用Next.js、TypeScript和Tailwind CSS创建一个博客文章页面，同时使用了Next SEO库来优化页面的SEO，以及如何使用Next Script库来添加社交媒体组件。代码中包含了获取静态props的方法，这是Next.js的一个强大功能，可以在构建时获取数据，从而使页面更容易维护。

- 阅读更多 -

CSS：边框虚线、文本下划波浪线

System

2024-08-09

所有,css

CSS中创建虚线边框和文本下划波浪线的代码示例如下：

虚线边框:




.dashed-border {
  border: 1px dashed #000; /* 1px点线，黑色 */
}

HTML中使用：




<div class="dashed-border">这是一个虚线边框容器</div>

文本下划波浪线:




.text-underline {
  text-decoration: underline; /* 下划线 */
  text-decoration-style: wave; /* 波浪形下划线 */
  text-decoration-color: #00f; /* 下划线颜色 */
}

HTML中使用：




<p class="text-underline">这是带有波浪线下划线的文本</p>

注意：text-decoration-style 的 wave 值可能不被所有浏览器支持，因此可能不会显示波浪形下划线效果。

- 阅读更多 -

css常见动画

System

2024-08-09

所有,css

CSS常见的动画主要通过@keyframes规则和animation属性组合使用来实现。

以下是一个简单的例子，展示了如何使用CSS动画来创建一个简单的淡入效果：




/* 定义关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画到元素 */
.element {
  animation: fadeIn 1s ease-in-out forwards;
}

HTML部分：




<div class="element">我是一个淡入动画的例子</div>

在这个例子中，.element将在1秒内从完全透明（opacity: 0）渐变至完全不透明（opacity: 1），并且动画在结束后会保持最后的状态 (forwards)。ease-in-out是动画的缓动函数，它会使动画在开始和结束时慢，中间时快，给用户更流畅的体验。

- 阅读更多 -

基于CSS两种菜单创建方式

System

2024-08-09

所有,css

在CSS中，创建菜单可以通过多种方式，以下是两种常见的方法：

方法一：使用列表（<ul>或<ol>）和列表项（<li>）来创建菜单。




/* 添加基础样式 */
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
/* 为列表项添加样式 */
ul.menu li {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
ul.menu li a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
ul.menu li a:hover {
  background-color: #f0f0f0;
}




<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

方法二：使用HTML的<div>元素和内联样式或内嵌样式。




<div class="menu">
  <div><a href="#">首页</a></div>
  <div><a href="#">产品</a></div>
  <div><a href="#">关于</a></div>
  <div><a href="#">联系</a></div>
</div>




/* 添加基础样式 */
.menu div {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
.menu div a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
.menu div a:hover {
  background-color: #f0f0f0;
}

两种方法都可以创建一个基本的菜单，但第一种方法使用了无序列表(<ul>)，更适合用于菜单项目不需要顺序的情况，而第二种方法使用了<div>元素，提供了更多的自定义和灵活性。

- 阅读更多 -

java——HTML、css、JavaScript、jQuery 详细介绍

System

2024-08-09

所有,css

HTML、CSS、JavaScript和jQuery都是构建网页所需的关键技术。

HTML (Hypertext Markup Language):
HTML是用来创建网页结构的标准标记语言。它定义了网页的内容和结构。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

CSS (Cascading Style Sheets):
CSS是用来控制网页样式的语言，比如颜色、字体、布局等。




body {
  background-color: lightblue;
}
 
h1 {
  color: navy;
  margin-left: 20px;
}

JavaScript:
JavaScript是一种编程语言，用于增加网页的交互性。它可以让网页对用户的操作做出反应。




function myFunction() {
  alert('Hello, World!');
}

jQuery:
jQuery是一个JavaScript库，它简化了JavaScript编程。它使得HTML文档 traversing, event handling, animation 和Ajax等操作更加简单。




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

以上代码展示了每种语言的基本用法和简单的实例，分别是创建一个简单的HTML页面，为页面添加一些基本的样式，添加一个简单的JavaScript函数，和添加一个简单的jQuery效果。

- 阅读更多 -

编程笔记 html5&css&js 092 JavaScript 表单控件

System

2024-08-09

所有,css




<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 表单控件</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        input[type="text"] {
            padding: 8px;
            margin: 8px 0;
            border: 1px solid #ccc;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>表单控件示例</h1>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementById('myForm').onsubmit = function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            alert('用户名: ' + username + ', 密码: ' + password);
        };
    </script>
</body>
</html>

这个代码示例展示了如何使用HTML、CSS和JavaScript创建一个简单的登录表单，并在用户提交表单时使用JavaScript阻止默认的表单提交行为，并显示输入的用户名和密码。这是学习Web开发的一个基本示例，展示了如何处理和验证用户输入。

- 阅读更多 -