1. 首页
  2. 分类
  3. css
SpringBoot+VUE+ MyBatis实现人事管理系统（已开源，学习css前端开发
System
2024-08-09
所有,css

这是一个使用SpringBoot、Vue.js和MyBatis实现的人事管理系统的简化版本。以下是核心代码和配置：

SpringBoot配置文件application.properties




spring.datasource.url=jdbc:mysql://localhost:3306/hrm?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.example.demo.entity

MyBatis Mapper接口




@Mapper
public interface UserMapper {
    User selectByUsername(String username);
    int insertUser(User user);
}

Vue组件的简单示例




<template>
  <div>
    <input v-model="username" placeholder="Username">
    <input v-model="password" placeholder="Password" type="password">
    <button @click="register">Register</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async register() {
      try {
        const response = await this.$http.post('/api/register', {
          username: this.username,
          password: this.password
        });
        // 处理响应
      } catch (error) {
        // 处理错误
      }
    }
  }
}
</script>

以上代码仅展示了部分核心功能，实际的系统会更加复杂，包含更多的接口和组件。这个项目已经开源，你可以从GitHub获取完整的代码和文档。

- 阅读更多 -
CSS framework日常开发的经验总结
System
2024-08-09
所有,css

CSS框架，如Bootstrap或Foundation，可以帮助开发者快速构建响应式网页。但在实际开发中，我们还需要注意以下几点：

  1. 避免使用CSS框架的预制类。尽可能使用其提供的Sass变量或自定义样式。
  2. 不要忘记访问性，特别是对于使用CSS框架构建的复杂表单和表格。
  3. 测试在不同设备和浏览器上的兼容性。
  4. 保持代码的模块化和可维护性。
  5. 使用CSS框架的JavaScript插件时，注意版权和许可证问题。

以下是一个简单的例子，展示如何在一个项目中使用Bootstrap的网格系统：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        第一列
      </div>
      <div class="col-md-4">
        第二列
      </div>
      <div class="col-md-4">
        第三列
      </div>
    </div>
  </div>
  
  <!-- 引入Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，我们使用了Bootstrap的网格系统创建了一个三列的布局。container类用于创建一个响应式的容器，row类创建了一行，而col-md-4创建了每行中等屏幕尺寸下的三列。这种方式可以快速构建布局，但同时要确保遵循了前面提到的最佳实践。

- 阅读更多 -
跟小海一起看下雪——用HTML、CSS和JS实现简单的下雪特效
System
2024-08-09
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下雪特效</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #snow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="snow"></canvas>
 
    <script>
        const canvas = document.getElementById('snow');
        const ctx = canvas.getContext('2d');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const flakes = [];
        const flakeCount = 200;
 
        canvas.style.display = 'block';
 
        function init() {
            for (let i = 0; i < flakeCount; i++) {
                flakes.push(new Flake());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < flakeCount; i++) {
                flakes[i].update();
                flakes[i].render(ctx);
            }
            requestAnimationFrame(animate);
        }
 
        function Flake() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.size = Math.random() * 2;
            this.speed = Math.random() * 0.2 + 0.05;
            this.speedY = Math.random() * 0.5 + 0.5;
        }
 
        Flake.prototype.update = function() {
            this.x += Math.cos(this.speed);
            this.y += this.speedY;
            this.size = Math.random() * 2;
 
            if (this.x > width || this.x < 0) this.x = Math.random() * width;
            if (this.y > height) this.y = 0;
        };
 
        Flake.prototype.render = function(ctx) {
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        };
 
        init();
    </script>
</body>
</html>

这段代码实现了简单的下雪效果。它首先设置了HTML和CSS，创建了一个<canvas>元素，并通过JavaScript初始化了下雪的逻辑。代码中定义了Flake对象来表示每一片雪花，并且在animate函数中更新了每片雪花的位置和大小，实现了动态的下雪效果。

- 阅读更多 -
在Vue 3中，如何理解使用CSS变量（也被称为自定义属性）来动态地设置和更新组件的样式
System
2024-08-09
所有,css

在Vue 3中，可以使用CSS变量（也称为自定义属性）来动态设置和更新组件的样式。这通常通过JavaScript与CSS结合使用来实现。

以下是一个简单的例子，展示如何在Vue 3组件中使用CSS变量来动态更新样式：




<template>
  <div :style="{ '--color': dynamicColor }">
    <!-- 组件内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicColor: 'blue'
    };
  },
  mounted() {
    // 假设我们在某个时刻想要改变颜色
    setTimeout(() => {
      this.dynamicColor = 'red';
    }, 3000);
  }
};
</script>
 
<style>
/* 全局样式 */
div {
  color: var(--color);
  /* 其他样式 */
}
</style>

在这个例子中，:style="{ '--color': dynamicColor }"是一个动态绑定的样式对象，它会将CSS变量--color的值设置为Vue实例数据对象中的dynamicColor属性。在<style>标签中，使用var(--color)来引用这个变量。当dynamicColor的值改变时，绑定的样式也会更新，从而实现了样式的动态更新。

- 阅读更多 -
web自动化测试系列-selenium css_selector定位方法详解
System
2024-08-09
所有,css

在Web自动化测试中，CSS选择器是一种强大的工具，它允许我们以一种更为简洁和灵活的方式定位和操作Web页面上的元素。Selenium WebDriver支持使用CSS选择器来查找元素。

在Selenium中，我们可以使用find_element_by_css_selector()方法来定位页面上的元素。下面是一些常见的CSS选择器定位方法和示例代码：

  1. 通过元素ID定位：



element = driver.find_element_by_css_selector("#elementId")
  1. 通过元素类名定位：



element = driver.find_element_by_css_selector(".elementClass")
  1. 通过元素名定位：



element = driver.find_element_by_css_selector("elementTagName")
  1. 通过属性定位：



element = driver.find_element_by_css_selector("elementTag[attributeName='value']")
  1. 通过子元素定位：



element = driver.find_element_by_css_selector("parentElement > childElement")
  1. 通过后代元素定位：



element = driver.find_element_by_css_selector("ancestorElement descendantElement")
  1. 通过序列选择器定位（例如，选择第n个元素）：



element = driver.find_element_by_css_selector("elementTag:nth-child(n)")
  1. 通过伪类选择器定位（例如，:link、:visited、:hover、:active和:focus）：



element = driver.find_element_by_css_selector("elementTag:hover")
  1. 通过链接文本定位：



element = driver.find_element_by_css_selector("a[textContent='linkText']")
  1. 通过部分链接文本定位：



element = driver.find_element_by_css_selector("a[textContent*='partialLinkText']")

请注意，CSS选择器是非常强大的，可以用来定位页面上的几乎任何元素。上述示例仅展示了一些常见的定位方法，实际应用中可以根据页面的具体结构创建更复杂的选择器。

- 阅读更多 -
3. 使用PostCSS进行Tailwind CSS的安装和配置
System
2024-08-09
所有,css



// 安装Tailwind CSS依赖
npm install -D tailwindcss postcss autoprefixer
 
// 使用npx创建Tailwind CSS配置文件
npx tailwindcss init -p
 
// 接下来，在项目的src/styles/tailwind.config.js中配置Tailwind CSS
// 示例配置
/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // 或 'media' 或 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
 
// 在src/styles/index.css中引入Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
 
// 接下来，在项目的src/index.js中引入样式文件
import './styles/index.css';
 
// 配置PostCSS
// 在package.json中添加PostCSS配置
"postcss": {
  "plugins": {
    "tailwindcss": "./src/styles/tailwind.config.js",
    "autoprefixer": {}
  }
}

以上代码展示了如何安装Tailwind CSS以及如何通过PostCSS来配置和使用它。首先，我们安装了必要的依赖，并使用npx创建了一个Tailwind CSS的配置文件。然后，在一个示例配置中，我们定义了purge路径、darkMode设置、主题扩展和变体扩展。最后，我们在CSS文件中引入Tailwind CSS并在项目入口文件中引入样式文件。同时，在package.json中配置了PostCSS插件。

- 阅读更多 -
CSS介绍及三种应用方式[内联,内嵌,外链]元素及实例讲解
System
2024-08-09
所有,css

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合脚本语言动态地对网页中的元素进行格式化。

  1. 内联样式：直接在HTML元素的style属性中设置CSS样式。



<p style="color:blue;">这是一个蓝色的段落。</p>
  1. 内嵌样式：在HTML文档的<head>标签中加入<style>标签，在其中设置CSS样式。



<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>
  1. 外链样式：创建一个单独的CSS文件，然后在HTML文档的<head>标签中的<link>标签引用。



<!-- 假设CSS文件名为style.css -->
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

在CSS文件（style.css）中设置样式：




p {
    color: green;
}

在HTML文档中使用这种方式引用上述CSS样式，段落文本将显示为绿色。

- 阅读更多 -
使用CSS 或 SASS 实现主题背景切换效果
System
2024-08-09
所有,css



/* 使用CSS实现按钮点击后背景颜色切换 */
.theme-switcher {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  text-decoration: none;
}
 
.theme-switcher.active {
  background-color: #007bff;
  color: #fff;
}
 
.theme-switcher:hover:not(.active) {
  background-color: #e7e7e7;
}
 
/* 使用JavaScript来处理点击事件 */
<script>
  document.querySelector('.theme-switcher').addEventListener('click', function() {
    this.classList.toggle('active');
  });
</script>

这段代码展示了如何使用CSS创建一个可以切换主题背景颜色的按钮。按钮在默认状态下是白色背景和黑色文字。在点击后，通过添加.active类，按钮背景切换为蓝色，文字颜色变为白色。同时，提供了悬停效果，当按钮没有激活（.active）时，悬停在按钮上会有一个浅灰色的背景。通过JavaScript的事件监听器，可以在用户点击按钮时切换.active类，实现主题切换的效果。

- 阅读更多 -
CSS 中的垂直居中法
System
2024-08-09
所有,css

CSS中实现元素垂直居中的方法有很多种，以下是几种常用的方法及其示例代码：

  1. 使用Flexbox布局:



.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如需 */
}
 
.child {
  /* 子元素内容 */
}
  1. 使用Grid布局:



.parent {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}
 
.child {
  /* 子元素内容 */
}
  1. 使用绝对定位和transform:



.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 或者左右居中transform: translate(-50%, -50%); */
}
  1. 使用行内元素的vertical-align和line-height:



.parent {
  line-height: 100px; /* 容器高度 */
}
 
.child {
  vertical-align: middle;
  display: inline-block;
  /* 子元素内容 */
}

这些方法可以根据不同的布局需求选择使用。

- 阅读更多 -
使用CSS实现为边框添加四个角
System
2024-08-09
所有,css

要使用CSS为元素的四个角添加不同的边框，可以使用CSS的伪元素::before和::after来创建。以下是一个简单的示例，演示如何为一个div元素的四个角添加不同的边框颜色：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Corners Example</title>
<style>
  .box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fff;
  }
 
  .box::before,
  .box::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #000;
    z-index: 1;
  }
 
  .box::before {
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
 
  .box::after {
    bottom: 0;
    right: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box是要添加角的元素。.box::before伪元素代表左上角和右下角，而.box::after伪元素代表右上角和左下角。通过设置border-radius属性，可以调整每个角的圆角大小。这个示例中的角是正方形，但可以通过调整width和height来使不同的角成为椭圆形状。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号