1. 首页
  2. 分类
  3. css
前端基础篇-深入了解用 HTML 与 CSS 实现标题排版
System
2024-08-17
所有,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 {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .title {
            color: #333333;
            font-size: 24px;
            font-weight: bold;
        }
        .subtitle {
            color: #666666;
            font-size: 18px;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h1 class="title">这是一个关于前端基础的标题</h1>
    <h2 class="subtitle">这是对上述标题的补充说明</h2>
</body>
</html>

这段代码展示了如何使用HTML和CSS定义标题，并通过CSS为它们设置样式。.title类用于大标题，而.subtitle类用于次级说明文字。通过这个例子，学习者可以理解如何使用CSS对网页文本进行样式化，为后续的学习和开发奠定基础。

- 阅读更多 -
css 将div固定在页面顶部不随页面滑动
System
2024-08-17
所有,css

要使用CSS将div固定在页面顶部并且不随着页面滑动，可以使用position: fixed;属性。这样设置后，div将相对于视口固定，而不是文档可滚动区域。

下面是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Div Example</title>
<style>
  .fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="fixed-top">
  我在顶部固定不动！
</div>
 
<!-- 页面的其他内容 -->
 
</body>
</html>

在这个例子中，.fixed-top 类应用于一个div，使其固定在页面的顶部。无论页面如何滚动，这个div都会保持在视口的顶部。

- 阅读更多 -
css_22_过渡&动画
System
2024-08-16
所有,css

在CSS中，过渡和动画可以让网页的元素在状态改变时产生平滑的效果，而不是突兀的变化。

过渡效果可以通过transition属性来实现，该属性通常包括以下几个部分：

  1. transition-property: 指定应用过渡效果的CSS属性名。
  2. transition-duration: 指定过渡效果的持续时间。
  3. transition-timing-function: 控制过渡的速度曲线，默认为ease。
  4. transition-delay: 定义过渡效果何时开始。

例如，如果你想要在鼠标悬停时，改变元素的颜色，并且给它一个过渡效果，可以这样写：




div {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
 
div:hover {
  background-color: red;
}

而动画效果则通过@keyframes规则和animation属性来实现：

  1. @keyframes: 创建动画序列。
  2. animation-name: 引用@keyframes的名称。
  3. animation-duration: 动画完成一个周期所需的时间。
  4. animation-timing-function: 动画的速度曲线。
  5. animation-iteration-count: 动画重复次数。
  6. animation-direction: 动画在循环中是否反向。

例如，创建一个旋转的动画：




@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
div {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

这样就定义了一个无限循环，不断旋转的动画。

- 阅读更多 -
Web开发 —— 放大镜效果（HTML、CSS、JavaScript）
System
2024-08-16
所有,css

以下是实现放大镜效果的简单HTML、CSS和JavaScript代码示例。这个例子中，当鼠标悬停在小图片上时，会显示一个大图片放大镜。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜效果</title>
<style>
  .magnifier {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
  }
  .magnifier img {
    width: 150px;
    height: 150px;
  }
  .magnifier-large {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 0, 0.5);
    display: none;
    top: 0;
    left: 150px;
    cursor: none;
    overflow: hidden;
  }
  .magnifier-large img {
    position: absolute;
    width: 600px;
    height: auto;
  }
</style>
</head>
<body>
 
<div class="magnifier" id="magnifier1">
  <img src="small-image.jpg" alt="小图片">
  <div class="magnifier-large">
    <img src="large-image.jpg" alt="大图片">
  </div>
</div>
 
<script>
  function createMagnifier(magnifier) {
    const magnifierLarge = magnifier.querySelector('.magnifier-large');
    const ratio = 3; // 放大倍数
    const img = magnifierLarge.querySelector('img');
 
    // 鼠标移入放大镜区域时显示放大镜
    magnifier.addEventListener('mouseenter', function(e) {
      magnifierLarge.style.display = 'block';
    });
 
    // 鼠标移出放大镜区域时隐藏放大镜
    magnifier.addEventListener('mouseleave', function(e) {
      magnifierLarge.style.display = 'none';
    });
 
    // 鼠标移动时更新放大镜的位置
    magnifier.addEventListener('mousemove', function(e) {
      const x = e.pageX - magnifier.offsetLeft - magnifierLarge.offsetWidth / 2;
      const y = e.pageY - magnifier.offsetTop - magnifierLarge.offsetHeight / 2;
      const maxX = img.offsetWidth - magnifierLarge.offsetWidth;
      const maxY = img.offsetHeight - magnifierLarge.offsetHeight;
 
      // 限制放大镜的移动范围
      if (x < 0) {
        x = 0;
      } else if (x > maxX) {
        x = maxX;
      }
      if (y < 0) {
        y = 0;
      } else if (y > maxY) {
        y = maxY;
      }
 
      // 更新放大镜位置
      magnifierLarge.style.left = x + 'px';
      magnifierLarge.style.top = y + 'px';
 
      // 更新大图显示区域
      img.style.left = -x * ratio + 'px';
      img.style.top = -y * ratio + 'px';
    });
  }
 
  // 初始化放大镜效果
  document.querySelectorAll('.magnifier').forEach(createMagnifier);
</script>
 
</body>
</html>

这段代码中，.magnifier 是放大镜容器，\`.m

- 阅读更多 -
纯 CSS 实现 超长内容滚动播放。
System
2024-08-16
所有,css



/* 设置滚动容器 */
.scroll-container {
  width: 300px; /* 设置固定宽度 */
  height: 50px; /* 设置固定高度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 确保内容在一行显示 */
}
 
/* 设置滚动内容 */
.scroll-content {
  display: inline-block; /* 使内容作为行内块显示 */
  animation: scroll 5s linear infinite; /* 应用滚动动画 */
}
 
/* 定义滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
 
/* HTML结构 */
<div class="scroll-container">
  <div class="scroll-content">
    这里是超长内容，它会不停地滚动播放。
    这里是超长内容，它会不停地滚动播放。
  </div>
</div>

这段代码展示了如何使用CSS关键帧动画实现一个简单的超长内容滚动播放效果。.scroll-container 是滚动容器，.scroll-content 是滚动内容。通过animation属性应用了一个名为scroll的动画，该动画会使内容从初始位置平滑滚动到完全隐藏的位置，形成一种连续滚动的效果。

- 阅读更多 -
动手实践！从零开始实现Springboot+Vue登录，CSS文本样式值
System
2024-08-16
所有,css

为了实现一个简单的Spring Boot和Vue.js的登录页面，你需要创建后端Spring Boot应用程序和前端Vue.js应用程序。以下是实现这两个应用程序的基本步骤：

后端（Spring Boot）:

  1. 创建一个Spring Boot项目，并添加Spring Security依赖。
  2. 配置Spring Security来设置用户和密码。
  3. 创建一个控制器处理登录请求。

前端（Vue.js）:

  1. 创建一个Vue.js项目，并添加Vue Router和Axios依赖。
  2. 设计登录表单的HTML模板并添加CSS样式。
  3. 创建Vue组件处理登录逻辑，并使用Axios发送登录请求到后端。

Spring Boot 后端代码示例




// build.gradle 或 pom.xml 中添加依赖
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-web'
}
 
// SecurityConfig.java
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("user").password("{noop}password").roles("USER");
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .antMatchers("/", "/home").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/login")
            .permitAll()
            .and()
            .logout()
            .permitAll();
    }
}
 
// LoginController.java
@Controller
public class LoginController {
 
    @GetMapping("/login")
    public String loginPage() {
        return "login";
    }
 
    // 处理登录请求
}

Vue.js 前端代码示例




<!-- Login.vue -->
<template>
  <div class="login-container">
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/login', {
          username: this.username,
          password: this.password
        });
        // 处理登录成功的情况
      } catch (error) {
        // 处理登录失败的情况
      }
    }
  }
};
</script>
 
<style>
/* CSS样式 */
.login-container {
  /* 样式内容 */
}
</style>

在实际的应用中，你需要将登录逻辑与后端的\`LoginCo

- 阅读更多 -
92款超级漂亮的css按钮样式 复制即用
System
2024-08-16
所有,css

以下是一个简化的CSS按钮样式集合，每个按钮都是简洁而又引人注目的。




/* 按钮基础样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  border: none;
  border-radius: 5px;
}
 
/* 按钮1 示例 */
.button1 {
  background-color: #007bff;
  box-shadow: 0 5px #0056b3;
}
 
.button1:active {
  background-color: #0069d9;
  box-shadow: 0 3px #00428c;
  transform: translateY(1px);
}
 
/* 按钮2 示例 */
.button2 {
  background-color: #f1c40f;
  box-shadow: 0 5px #c2a20c;
}
 
.button2:active {
  background-color: #e8b009;
  box-shadow: 0 3px #9c790c;
  transform: translateY(1px);
}
 
/* 按钮3 示例 */
.button3 {
  background-color: #2ecc71;
  box-shadow: 0 5px #289f55;
}
 
.button3:active {
  background-color: #289f55;
  box-shadow: 0 3px #228241;
  transform: translateY(1px);
}
 
/* 按钮4 示例 */
.button4 {
  background-color: #e74c3c;
  box-shadow: 0 5px #c0392b;
}
 
.button4:active {
  background-color: #c0392b;
  box-shadow: 0 3px #9d3124;
  transform: translateY(1px);
}
 
/* 按钮5 示例 */
.button5 {
  background-color: #9b59b6;
  box-shadow: 0 5px #793a9a;
}
 
.button5:active {
  background-color: #8e44ad;
  box-shadow: 0 3px #6c238e;
  transform: translateY(1px);
}
 
/* 按钮6 示例 */
.button6 {
  background-color: #3498db;
  box-shadow: 0 5px #2980b9;
}
 
.button6:active {
  background-color: #2980b9;
  box-shadow: 0 3px #2579a9;
  transform: translateY(1px);
}
 
/* 按钮7 示例 */
.button7 {
  background-color: #f39c12;
  box-shadow: 0 5px #d18b09;
}
 
.button7:active {
  background-color: #d79001;
  box-shadow: 0 3px #a87702;
  transform: translateY(1px);
}
 
/* 按钮8 示例 */
.button8 {
  background-color: #1abc9c;
  box-shadow: 0 5px #16a085;
}
 
.button8:active {
  background-color: #159382;
  box-shadow: 0 3px #128171;
  transform: translateY(1px);
}
 
/* 按钮9 示例 */
.button9 {
  background-color: #8e44ad;
  box-shadow: 0 5px #7e3491;
}
 
.button9:active {
  background-
- 阅读更多 -
VUE_自适应布局lib-flexible+postcss-pxtorem、lib-flexible + postcss-px2rem，nuxt页面自适配
System
2024-08-16
所有,css

在Vue项目中，自适应布局通常使用lib-flexible库结合postcss-pxtorem或postcss-px2rem插件来实现。

  1. lib-flexible：这是一个用于设置 rem 布局的库，它会根据屏幕宽度动态调整根字体大小。
  2. postcss-pxtorem：一个PostCSS插件，用于将像素单位转换成rem单位。
  3. postcss-px2rem: 一个PostCSS插件，用于将像素单位转换成rem单位。

安装依赖




npm install lib-flexible --save

对于postcss-pxtorem或postcss-px2rem，选择其一进行安装：




npm install postcss-pxtorem --save-dev
# 或者
npm install postcss-px2rem --save-dev

配置postcss-pxtorem或postcss-px2rem

在postcss的配置文件postcss.config.js中，配置相关选项：




module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
    // 或者使用 postcss-px2rem
    'postcss-px2rem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
  },
};

配置lib-flexible

在项目入口文件main.js中引入lib-flexible：




import 'lib-flexible/flexible'

注意：

  • 确保lib-flexible在项目中首先引入，以保证根据屏幕宽度动态调整根字体大小的特性。
  • 在postcss-pxtorem或postcss-px2rem的配置中，rootValue通常设置为设计稿宽度的1/10，这样可以使得计算更加方便。
  • 在使用时，选择其中一个插件进行配置，并确保在postcss.config.js文件中正确配置。

以上步骤完成后，你的Vue项目就可以使用rem单位进行自适应布局设计了。

- 阅读更多 -
前端css中border-radius的简单使用
System
2024-08-16
所有,css

CSS的border-radius属性用于设置元素的边框半径，从而创建圆角效果。

解法1：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

这段代码会创建一个圆形的盒子。

解法2：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

这段代码会创建一个具有不同半径的四个角的盒子。

解法3：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 100px;
}

这段代码会创建一个圆角矩形，所有的角都是圆的。

解法4：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

这段代码会创建一个圆形的盒子。

解法5：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 60%;
}

这段代码会创建一个椭圆形的盒子。

解法6：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-image: url('image.jpg');
  background-size: cover;
}

这段代码会创建一个圆形的盒子，并且在其中添加了一张图片。

解法7：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.5;
}

这段代码会创建一个半透明的圆形盒子。

解法8：




.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: linear-gradient(to right, red , yellow);
}

这段代码会创建一个具有渐变颜色的圆形盒子。

以上就是border-radius的一些基本用法，你可以根据自己的需求进行组合和变化。

- 阅读更多 -
如何利用CSS实现文字滚动效果
System
2024-08-16
所有,css

要使用CSS实现文字滚动效果，可以使用@keyframes规则创建动画，并使用animation属性应用到文本元素上。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scroll Animation</title>
<style>
  .scroll-text {
    overflow: hidden; /* 确保文本超出元素时隐藏 */
    white-space: nowrap; /* 确保文本在一行内显示，不换行 */
    position: relative; /* 相对定位，方便动画使用absolute */
  }
 
  .scroll-text::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, #000 50%); /* 创建左至右的半透明遮罩 */
    animation: scroll 5s linear infinite; /* 应用滚动动画 */
  }
 
  @keyframes scroll {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
</style>
</head>
<body>
 
<div class="scroll-text">
  这是一个滚动的文本效果，它会不停地从右向左滚动。
</div>
 
</body>
</html>

在这个例子中，.scroll-text 是需要滚动文本的元素。我们使用 ::after 伪元素创建一个遮罩，该遮罩应用了一个渐变背景，从左到右半透明。@keyframes 规则定义了名为 scroll 的动画，它使遮罩从右向左移动。通过将动画应用到遮罩上，我们得到了连续滚动的效果。

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