分类 css 下的文章

2024-08-09




/* 定位元素 */
.box {
  position: relative; /* 相对定位 */
  top: 10px; /* 向下偏移10px */
  left: 20px; /* 向右偏移20px */
}
 
/* CSS精灵 - 使用伪元素清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
/* 圆角 */
.rounded-corners {
  border-radius: 10px; /* 所有角都被圆角处理 */
}
 
/* 文本超出隐藏 */
.text-overflow {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略符号 */
}
 
/* 阴影效果 */
.shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* x偏移, y偏移, 模糊半径, 颜色 */
}
 
/* 使用线性渐变背景 */
.gradient-background {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 从左到右的渐变 */
}
 
/* 使用图片作为背景 */
.background-image {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 覆盖整个元素 */
  background-position: center; /* 居中显示 */
}
 
/* 响应式设计 - 移动优先 */
@media (max-width: 768px) {
  .container {
    padding: 10px; /* 移动设备上的容器内边距 */
  }
}

这个代码实例展示了如何使用CSS定位元素、清除浮动、创建圆角、处理文本溢出、添加阴影、应用渐变背景和设置背景图片。同时，它还包括了一个简单的媒体查询示例，用于移动设备的响应式布局。这些技巧是任何前端开发人员都应该掌握的基础知识。

- 阅读更多 -

HTML&CSS-05：盒子模型

System

2024-08-09

所有,css

在CSS中，盒子模型是一个非常重要的概念，它定义了元素的宽度和高度是如何计算的。CSS盒模型包括两部分：外边距（Margin）、边框（Border）、内边距（Padding）和实际内容（Content）。

以下是一个简单的HTML和CSS代码示例，演示了盒子模型的应用：




<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 300px;
        height: 200px;
        margin: 20px;
        border: 5px solid blue;
        padding: 20px;
        background-color: lightblue;
    }
</style>
</head>
<body>
 
<div class="box">
  这是一个盒子模型示例。
</div>
 
</body>
</html>

在这个例子中，.box 类定义了一个300像素宽、200像素高的盒子。盒子外围有20像素的外边距，边框为5像素并且是蓝色的，内部有20像素的内边距，而背景颜色是浅蓝色。当这些值相加时，你会发现.box的总宽度是350像素（300px + 2x20px + 10px），总高度是240像素（200px + 2x20px + 10px）。

- 阅读更多 -

用CSS绘制最常见的40种形状和图形

System

2024-08-09

所有,css

以下是使用CSS绘制的40种最常见形状和图形的一部分示例代码。这些示例涵盖了矩形、圆形、三角形、平行四边形和不规则四边形等基本形状，以及一些复杂的图形如心形和椭圆。




/* 矩形 */
.rectangle {
  width: 100px;
  height: 50px;
  background-color: blue;
}
 
/* 圆形 */
.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}
 
/* 三角形 */
.triangle {
  width: 0;
  height: 0;
  background-color: transparent;
  border-style: solid;
  border-width: 50px 100px 50px 0;
  border-color: transparent transparent transparent green;
}
 
/* 平行四边形 */
.parallelogram {
  width: 100px;
  height: 50px;
  background-color: purple;
  transform: skew(-20deg);
  transform-origin: left;
}
 
/* 心形 */
.heart {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: relative;
}
.heart::before,
.heart::after {
  content: "";
  width: 50px;
  height: 80px;
  background: pink;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  left: 50px;
}
.heart::before {
  transform: rotate(-45deg);
}
.heart::after {
  transform: rotate(45deg);
}
 
/* 椭圆 */
.ellipse {
  width: 100px;
  height: 50px;
  background-color: yellow;
  border-radius: 50%;
}
 
/* 不规则四边形 */
.irregular-quadrilateral {
  width: 100px;
  height: 50px;
  background-color: orange;
  transform: rotate(45deg);
}

这些CSS样式可以直接应用于HTML元素，以生成各种形状。例如，你可以创建一个简单的HTML文件，并将类应用于div元素：




<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
<div class="parallelogram"></div>
<div class="heart"></div>
<div class="ellipse"></div>
<div class="irregular-quadrilateral"></div>

这些代码示例展示了如何使用CSS创建基本的形状和复杂图形，并且可以根据需要进行扩展和修改。

System

2024-08-09

所有,css

在Vue3中，我们可以通过几种方式来注册组件，并实现组件间的通信，包括透传属性和事件，以及使用插槽。

全局注册和使用组件




// 创建一个组件
const MyComponent = {
  template: '<div>Hello, I am a component!</div>'
}
 
// 全局注册组件
app.component('my-component', MyComponent)
 
// 在模板中使用
<template>
  <my-component></my-component>
</template>

组件间通信 - Props




// 父组件
const ParentComponent = {
  template: `
    <child-component :parentMessage="message"></child-component>
  `,
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
 
// 子组件
const ChildComponent = {
  props: ['parentMessage'],
  template: `<div>{{ parentMessage }}</div>`
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

组件间通信 - Events




// 子组件
const ChildComponent = {
  template: `
    <button @click="$emit('childEvent', 'Hello from child')">Click me</button>
  `
}
 
// 父组件
const ParentComponent = {
  template: `
    <child-component @childEvent="handleEvent"></child-component>
  `,
  methods: {
    handleEvent(payload) {
      console.log(payload) // 输出: 'Hello from child'
    }
  }
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

使用插槽




// 父组件
const ParentComponent = {
  template: `
    <child-component>
      <template #default="{ user }">
        {{ user.name }}
      </template>
    </child-component>
  `
}
 
// 子组件
const ChildComponent = {
  template: `
    <div>
      <slot :user="user"></slot>
    </div>
  `,
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  }
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

以上代码展示了如何在Vue3中注册组件、通过props和events进行父子组件间的通信，以及如何使用插槽来传递和渲染子组件的内容。这些是构建Vue应用的基本技能，对于学习Vue3非常有帮助。

- 阅读更多 -

JavaWeb入门——Web前端概述及HTML，CSS语言基本使用

System

2024-08-09

所有,css

在JavaWeb开发中，前端技术主要包括HTML、CSS和JavaScript。以下是一个简单的HTML页面示例，包含了基本的HTML和CSS使用。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .nav {
            float: left;
            width: 20%;
            background: #f2f2f2;
            padding: 15px;
        }
        .nav ul {
            list-style-type: none;
            padding: 0;
        }
        .nav ul a {
            text-decoration: none;
        }
        .content {
            float: right;
            width: 80%;
            padding: 15px;
        }
        .footer {
            clear: both;
            text-align: center;
            padding: 10px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>我的网站</h1>
    <p>一个简单的响应式网页</p>
</div>
 
<div class="nav">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
 
<div class="content">
    <h2>内容标题</h2>
    <p>这里是内容...</p>
</div>
 
<div class="footer">
    <p>版权 &copy; 2023 我的网站</p>
</div>
 
</body>
</html>

这个HTML页面包含了一个简单的导航栏、头部和尾部。CSS被包含在<head>标签内的<style>标签中，用于控制页面的布局和样式。这个示例展示了如何使用CSS来实现基本的页面布局和颜色美化，是学习Web前端开发的基础。

- 阅读更多 -

css如何实现时间线

System

2024-08-09

所有,css

CSS可以通过定位和伪元素来实现时间线的效果。以下是一个简单的时间线示例：

HTML:




<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>事件标题1</h3>
      <p>事件描述文本...</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>事件标题2</h3>
      <p>事件描述文本...</p>
    </div>
  </div>
  <!-- 更多事件项 -->
</div>

CSS:




.timeline {
  position: relative;
  padding: 20px 0 20px 50px;
  margin-left: 50px;
}
 
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background: #fff;
  border-radius: 8px;
}
 
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
 
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: #1d81b6;
  border-radius: 50%;
  z-index: 1;
}
 
.timeline-content {
  margin-left: 60px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.timeline-content h3 {
  margin-top: 0;
  color: #333;
}
 
.timeline-content p {
  margin-bottom: 0;
  color: #666;
}

这段代码创建了一个基本的时间线布局，.timeline 是外部容器，它使用了相对定位，并在左侧添加了一个伪元素来创建时间线的圆形标记。.timeline-item 是每个时间点的容器，它也使用了相对定位，并通过 .timeline-item::before 创建了时间点的圆点标记。.timeline-content 是时间点内容的容器，它使用了绝对定位，放置在时间点标记的右侧。

- 阅读更多 -

【web前端HTML+CSS+JS】--- CSS学习笔记02

System

2024-08-09

所有,css

在CSS中，我们可以使用不同的属性来改变元素的样式。以下是一些常用的CSS属性：

字体属性：
- font-family：定义字体类型。
- font-size：定义字体大小。
- font-weight：定义字体粗细。
- font-style：定义字体风格（如斜体）。
文本属性：
- color：定义文本颜色。
- text-align：定义文本对齐方式。
- text-decoration：定义文本装饰（如下划线）。
- text-transform：定义文本大小写。
背景属性：
- background-color：定义背景颜色。
- background-image：定义背景图片。
- background-repeat：定义背景图片是否重复。
- background-position：定义背景图片的位置。
边框属性：
- border：设置边框的宽度、样式和颜色。
盒模型属性：
- margin：设置外边距。
- padding：设置内边距。
- width和height：控制元素的宽度和高度。
布局属性：
- display：设置元素的显示类型（如块级或内联）。
- position：设置元素的定位方式（静态、相对、绝对或固定）。
- top、right、bottom和left：用于绝对定位的元素，设置其距离四边的距离。
其他属性：
- opacity：设置元素的不透明度。
- filter：应用滤镜效果（如模糊或阴影）。

示例代码：




/* 设置字体类型、大小和颜色 */
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333333;
}
 
/* 设置文本对齐和装饰 */
a {
  text-align: center;
  text-decoration: none;
}
 
/* 设置背景颜色和图片 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置边框 */
div {
  border: 1px solid #000000;
}
 
/* 设置外边距、内边距和宽度 */
.box {
  margin: 10px;
  padding: 20px;
  width: 300px;
  height: 200px;
}
 
/* 设置元素的显示类型和定位 */
.fixed-box {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* 设置不透明度 */
.transparent-box {
  opacity: 0.5;
}

这些CSS属性可以应用于HTML文档中的任何元素，以改变其样式。通过组合使用这些属性，开发者可以创建出丰富多样的网页布局和设计。

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，可以帮助开发者快速构建响应式网页。但在实际开发中，我们还需要注意以下几点：

避免使用CSS框架的预制类。尽可能使用其提供的Sass变量或自定义样式。
不要忘记访问性，特别是对于使用CSS框架构建的复杂表单和表格。
测试在不同设备和浏览器上的兼容性。
保持代码的模块化和可维护性。
使用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函数中更新了每片雪花的位置和大小，实现了动态的下雪效果。

- 阅读更多 -