1. 首页
  2. 标签
  3. css
学生成绩管理系统实现（CSS+JQuery+PHP+MySQL）
System
2024-08-26
所有,jquery

以下是实现学生成绩管理系统的核心功能的代码示例，包括查看成绩、添加成绩和修改成绩。

// 连接数据库
$db = new mysqli('localhost', 'username', 'password', 'database');

// 检查连接
if ($db->connect_error) {
    die('连接失败: ' . $db->connect_error);
}

// 查看成绩
if (isset($_GET['action']) && $_GET['action'] == 'view') {
    $student_id = $_GET['student_id'];
    $sql = "SELECT * FROM results WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('i', $student_id);
    $stmt->execute();
    $result = $stmt->get_result();
    while ($row = $result->fetch_assoc()) {
        echo "学生ID: " . $row['student_id'] . " 成绩: " . $row['score'] . "<br>";
    }
    $stmt->close();
}

// 添加成绩
if (isset($_POST['action']) && $_POST['action'] == 'add') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "INSERT INTO results (student_id, score) VALUES (?, ?)";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $student_id, $score);
    $stmt->execute();
    echo "成绩添加成功";
    $stmt->close();
}

// 修改成绩
if (isset($_POST['action']) && $_POST['action'] == 'edit') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "UPDATE results SET score = ? WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $score, $student_id);
    $stmt->execute();
    echo "成绩修改成功";
    $stmt->close();
}

// 关闭数据库连接
$db->close();
PHP

这段代码展示了如何使用PHP、MySQLi和准备语句来安全地处理数据库操作。同时，也展示了如何使用JQuery和CSS来创建一个简单的用户界面，以便用户可以查看、添加和修改学生成绩。

- 阅读更多 -
前端H5+CSS3回到顶部功能
System
2024-08-26
所有,css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5+CSS3 回到顶部示例</title>
<style>
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 9999;
  }
  .back-to-top:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>
<!-- 页面内容 -->

<div class="back-to-top">回到顶部</div>

<script>
  // 获取页面中的“回到顶部”按钮
  const btn = document.querySelector('.back-to-top');

  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当页面向下滚动超过500px时显示按钮，否则隐藏按钮
    if (window.pageYOffset > 500) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });

  // 点击按钮回到顶部的功能
  btn.addEventListener('click', function() {
    // 平滑滚动到页面顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>
</body>
</html>
HTML

这段代码实现了一个简单的回到顶部按钮，当页面向下滚动超过500px时显示这个按钮，点击按钮会平滑滚动至页面顶部。CSS部分定义了按钮的样式和位置，JavaScript部分则监听了滚动事件并处理了按钮的显示和点击事件。

- 阅读更多 -
前端JS特效第6波：H5+CSS3幻灯片图片切换代码
System
2024-08-26
所有,css3

以下是一个简单的H5和CSS3应用于创建幻灯片图片切换效果的代码示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片图片切换</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 50px;
    overflow: hidden;
  }
  .slider img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>

<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;

  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // 切换时间
</script>

</body>
</html>
HTML

这段代码使用了CSS3中的transition属性来平滑地过渡图片的透明度，并使用了JavaScript中的setInterval函数来定期更换当前活跃的图片。这个示例假设您有至少3张图片，并且它们的路径分别是image1.jpg、image2.jpg和image3.jpg。您可以根据实际情况调整图片的路径和数量。

- 阅读更多 -
学习css3，使用代码实现一根心爱的二踢脚_css画脚丫，源码+原理+手写框架
System
2024-08-26
所有,css3

在CSS中，我们可以使用边框（border）、圆角（border-radius）和透明度（opacity）等特性来画出一根心爱的二踢脚丫。以下是实现这个图案的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心爱的二踢脚丫</title>
<style>
  .shoe {
    position: relative;
    width: 100px;
    height: 150px;
    background: #f0e68c;
    border-top-left: 50px solid #333;
    border-top-right: 50px solid #333;
    border-bottom: 10px solid #333;
    border-radius: 70% 70% 50% 50%;
    margin: 50px auto;
  }

  .shoe:before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background: #f0e68c;
    border-radius: 50%;
    z-index: -1;
  }

  .shoe:after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    background: #333;
    border-radius: 50%;
    z-index: -2;
  }
</style>
</head>
<body>
<div class="shoe"></div>
</body>
</html>
HTML

这段代码定义了一个.shoe类，它创建了一个带有底部边框的椭圆，并使用:before和:after伪元素来创建脚丫的上半部分和底部的圆形。通过调整尺寸和边框半径，可以进一步完善和优化这个图案，使其更加逼真。

- 阅读更多 -
link 与 @import：CSS 样式表的加载策略
System
2024-08-26
所有,css

在CSS中，有两种方式可以引入样式表：

  1. 使用<link>标签直接引入外部样式表。
  2. 使用@import规则在CSS文件中引入其他CSS文件。

<link>标签用于HTML文档中，而@import规则用于CSS文件内。

<link>标签

<link rel="stylesheet" type="text/css" href="styles.css">
HTML

<link>标签是XHTML标准的一部分，用于定义文档与外部资源（如CSS、图片等）的关系。浏览器会在解析HTML结构的同时下载<link>引用的资源。

@import规则

@import url("styles.css");
CSS

@import规则用于CSS文件中，它允许在一个CSS文件中引入另一个CSS文件。

区别

  1. 加载顺序：使用<link>的样式表会同时加载，而使用@import的样式表会等到页面全部加载完毕后再加载。
  2. 兼容性：@import可能不被一些老旧浏览器支持。
  3. 控制能力：@import可以在CSS文件中根据条件引入不同的样式表，而<link>不具备这种灵活性。

综上所述，通常推荐使用<link>标签来引入CSS，因为它更加直接、简单，并且是所有现代浏览器都支持的标准方法。

- 阅读更多 -
前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）
System
2024-08-26
所有,css

在CSS中，解决坐标问题、定位问题和图片居中可以使用不同的技术。以下是一些常用的方法：

  1. 坐标问题：使用position属性结合top、right、bottom、left属性来控制元素的位置。
.element {
  position: absolute;
  top: 100px;
  left: 200px;
}
CSS
  1. 定位问题：使用flexbox或grid布局系统来对子元素进行排版。
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
CSS
  1. 图片居中：可以使用margin属性设置为auto来实现水平居中。
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 根据需要设置宽度 */
}
CSS

或者使用flexbox来居中图片：

.container {
  display: flex;
  justify-content: center;
}

.container img {
  max-width: 100%; /* 根据需要设置最大宽度 */
}
CSS

这些是解决坐标问题、定位问题和图片居中的常见方法，具体使用哪种方法取决于具体的布局需求和上下文环境。

- 阅读更多 -
CSS-自适应导航栏（flex | grid）
System
2024-08-26
所有,css

以下是一个使用CSS Flexbox创建自适应导航栏的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应导航栏</title>
<style>
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #333;
  }

  .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .nav ul li {
    margin-left: 10px;
    margin-right: 10px;
  }

  .nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
  }

  .nav ul li a:hover {
    background-color: #555;
  }
</style>
</head>
<body>

<div class="nav">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</div>

</body>
</html>
HTML

这段代码创建了一个水平的导航栏，使用Flexbox布局进行对齐和空间分配。导航链接是一个无序列表，每个链接被包裹在一个列表项<li>中，并且使用了a元素的display: block属性来允许为链接指定宽度和填充。

- 阅读更多 -
Vite 中怎么添加全局 scss 文件
System
2024-08-26
所有,css

在Vite项目中添加全局SCSS文件，你需要做以下几步：

  1. 安装SCSS加载器：

    确保你已经安装了sass或scss相关的包，例如sass或sass-loader。如果还没有安装，可以通过npm或yarn来安装：

npm install sass -D
# 或者
yarn add sass -D
Bash

  1. 创建全局SCSS文件：

    在项目中创建一个全局的SCSS文件，比如styles/global.scss。

  2. 配置Vite配置文件：

    在Vite配置文件中（通常是vite.config.js或vite.config.ts），使用Vite提供的插件API或配置选项来引入全局SCSS文件。

例如，你可以使用Vite提供的css.preprocessorOptions配置来指定全局样式文件：

// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
});
JavaScript

在这个配置中，@import "@/styles/global.scss";指令会被加入到每个被Vite处理的SCSS文件中，使得global.scss中的样式规则会被全局应用。

注意：@ 符号通常在Vite配置中代表项目的src目录。

确保你的全局SCSS文件中的样式规则是全局作用域的，或者使用Vite提供的additionalData选项来避免局部样式意外地污染全局命名空间。

- 阅读更多 -
常见需求：CSS 实现弧形卡片的 3 种方式
System
2024-08-26
所有,css
/* 方法 1: 使用 border-radius 创建弧形 */
.arc-card-1 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

/* 方法 2: 使用伪元素和 transform 创建弧形 */
.arc-card-2 {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  overflow: hidden;
}
.arc-card-2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: inherit;
  border-top-right-radius: 50%;
}

/* 方法 3: 使用 SVG 创建弧形 */
.arc-card-3 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  mask: url(#arc-mask); /* 引用 SVG 中定义的遮罩 */
}
CSS
<!-- 在 HTML 中的 <head> 或 <body> 里定义 SVG 遮罩 -->
<svg width="0" height="0">
  <defs>
    <clipPath id="arc-mask">
      <path d="M0,0 L200,0 A50,50 0 0 1 200,100 L0,100 Z" fill="white"></path>
    </clipPath>
  </defs>
</svg>
SVG

以上 CSS 代码展示了创建弧形卡片的三种不同方法：使用 border-radius、伪元素和 transform，以及 SVG 遮罩。每种方法都有各自的优点和适用场景，可以根据实际需求选择合适的方法实现弧形卡片效果。

- 阅读更多 -
【前端基础系列】CSS篇-带你了解position:sticky
System
2024-08-26
所有,css

position: sticky; 是CSS中的一个位置值，它使元素在达到某个滚动位置时变为固定定位。这种行为类似于position: relative;和position: fixed;的结合体，但是它只在达到某个阈值时变为固定，这个阈值由用户设置。

解决方案：

  1. 使用position: sticky;
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 离顶部的距离 */
  background-color: green; /* 背景颜色 */
  border: 2px solid #fff; /* 边框 */
}
CSS
  1. 使用场景：
<div>
  <h2>我是一个普通的标题</h2>
  <div class="sticky">我是一个粘性定位的元素</div>
  <!-- 更多的内容 -->
</div>
HTML

在这个例子中，.sticky元素在滚动时会“粘”在顶部，直到其父元素的顶部与视窗顶部对齐时，它才会变为固定定位。

注意：position: sticky; 的兼容性较好，但是在使用时需要设置top、right、bottom、left其中之一的值，这个值决定了当滚动到何种程度时元素变为固定定位。此外，position: sticky; 在移动端的表现可能不同于在桌面端，因为移动端的滚动行为不同。

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