2024-08-26

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




// 连接数据库
$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、MySQLi和准备语句来安全地处理数据库操作。同时,也展示了如何使用JQuery和CSS来创建一个简单的用户界面,以便用户可以查看、添加和修改学生成绩。

2024-08-26



<!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>

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

2024-08-26

以下是一个简单的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>

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

2024-08-26

在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>

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

2024-08-26

在CSS中,有两种方式可以引入样式表:

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

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

<link>标签




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

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

@import规则




@import url("styles.css");

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

区别

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

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

2024-08-26

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

  1. 坐标问题:使用position属性结合toprightbottomleft属性来控制元素的位置。



.element {
  position: absolute;
  top: 100px;
  left: 200px;
}
  1. 定位问题:使用flexboxgrid布局系统来对子元素进行排版。



.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
  1. 图片居中:可以使用margin属性设置为auto来实现水平居中。



img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 根据需要设置宽度 */
}

或者使用flexbox来居中图片:




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

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

2024-08-26

以下是一个使用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>

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

2024-08-26

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

  1. 安装SCSS加载器:

    确保你已经安装了sassscss相关的包,例如sasssass-loader。如果还没有安装,可以通过npm或yarn来安装:




npm install sass -D
# 或者
yarn add sass -D
  1. 创建全局SCSS文件:

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

  2. 配置Vite配置文件:

    在Vite配置文件中(通常是vite.config.jsvite.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";`
      }
    }
  }
});

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

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

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

2024-08-26



/* 方法 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 中定义的遮罩 */
}



<!-- 在 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>

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

2024-08-26

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; /* 边框 */
}
  1. 使用场景:



<div>
  <h2>我是一个普通的标题</h2>
  <div class="sticky">我是一个粘性定位的元素</div>
  <!-- 更多的内容 -->
</div>

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

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