分类所有下的文章

2024-08-10

以下是实现两款流光溢彩的炫 Button 的 CSS 代码：

解法一：




.btn-ellipse {
  position: relative;
  background: none;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-ellipse:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

解法二：




.btn-glitch {
  position: relative;
  background: #00FFE0;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-glitch:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

这两种解法都是使用 CSS 的 animation 属性和 @keyframes 关键字来创建流光溢彩的效果。解法一是通过改变背景位置来实现移动的视觉效果，而解法二则是通过改变背景颜色的不透明度来实现同样的效果。这两种方法都能很好地展示流光溢彩的按钮效果，并且代码简洁，易于理解。

- 阅读更多 -

HTML至核心：HTML 中的 head 标签

System

2024-08-10

所有,html

<head> 标签在 HTML 中用于定义文档的头部区域，它通常包含文档的元数据，如标题、脚本、样式表和字符编码声明。<head> 内的内容不会在浏览器的界面上显示，但是会影响如何显示网页的内容。

以下是一个简单的 <head> 标签示例，包含了一些常见的元素：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 网页的主体内容 -->
</body>
</html>

在这个例子中：

<meta charset="UTF-8"> 指定文档字符编码。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于响应式设计，使网页在不同设备上的显示正常。
<title>My Web Page</title> 定义了网页的标题，显示在浏览器的标题栏上。
<link rel="stylesheet" href="styles.css"> 链接到外部的 CSS 样式表。
<script src="script.js" defer></script> 链接到外部的 JavaScript 脚本，并且使用 defer 属性来延迟脚本的加载，直到文档解析完成。

- 阅读更多 -

java+springboot+mysql课程题库管理系统

System

2024-08-10

所有,mysql

由于提供的信息不足以编写完整的系统，以下是一个简化版的课程题库管理系统的核心功能代码示例：




// 实体类：Topic
@Entity
public class Topic {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String description;
    // 省略getter和setter方法
}
 
// Repository接口
public interface TopicRepository extends JpaRepository<Topic, Long> {
}
 
// 服务层
@Service
public class TopicService {
    @Autowired
    private TopicRepository topicRepository;
 
    public List<Topic> findAllTopics() {
        return topicRepository.findAll();
    }
 
    public Topic findTopicById(Long id) {
        return topicRepository.findById(id).orElse(null);
    }
 
    public void saveTopic(Topic topic) {
        topicRepository.save(topic);
    }
 
    public void deleteTopicById(Long id) {
        topicRepository.deleteById(id);
    }
}
 
// 控制器层
@RestController
@RequestMapping("/topics")
public class TopicController {
    @Autowired
    private TopicService topicService;
 
    @GetMapping
    public ResponseEntity<List<Topic>> getAllTopics() {
        return ResponseEntity.ok(topicService.findAllTopics());
    }
 
    @GetMapping("/{id}")
    public ResponseEntity<Topic> getTopicById(@PathVariable Long id) {
        Topic topic = topicService.findTopicById(id);
        if (topic == null) {
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok(topic);
    }
 
    @PostMapping
    public ResponseEntity<Topic> createTopic(@RequestBody Topic topic) {
        topicService.saveTopic(topic);
        return ResponseEntity.status(HttpStatus.CREATED).body(topic);
    }
 
    @DeleteMapping("/{id}")
    public ResponseEntity<?> deleteTopicById(@PathVariable Long id) {
        topicService.deleteTopicById(id);
        return ResponseEntity.noContent().build();
    }
}

这个示例展示了一个简单的Spring Boot应用程序，用于创建、读取、更新和删除课程题目的基本操作。它包括了一个实体类Topic、一个仓库接口TopicRepository、一个服务层TopicService和一个控制器层TopicController。这个代码提供了一个很好的起点，可以根据具体需求进行扩展和修改。

- 阅读更多 -

GoLang Gin实际使用

System

2024-08-10

所有,golang

以下是一个使用Gin框架在Go语言中创建简单API服务器的示例代码：




package main
 
import (
    "net/http"
    "github.com/gin-gonic/gin"
)
 
func main() {
    // 设置Gin为发布模式
    gin.SetMode(gin.ReleaseMode)
 
    // 创建一个Gin引擎
    engine := gin.New()
 
    // 创建一个基本的路由组
    baseGroup := engine.Group("/api")
    {
        // 定义一个GET请求处理函数
        baseGroup.GET("/hello", func(ctx *gin.Context) {
            ctx.JSON(http.StatusOK, gin.H{"message": "Hello, World!"})
        })
    }
 
    // 启动服务器，默认在0.0.0.0:8080上监听
    engine.Run(nil)
}

这段代码创建了一个监听在8080端口的HTTP服务器，并定义了一个可以响应GET请求的路由/api/hello。当访问这个路由时，服务器会返回一个JSON响应，包含一个消息"Hello, World!"。这个例子展示了Gin框架的基本用法，是构建RESTful API的一个简单起点。

- 阅读更多 -

【Go语言精进之路】构建高效Go程序：了解切片实现原理并高效使用

System

2024-08-10

所有,golang




package main
 
import (
    "fmt"
    "reflect"
    "unsafe"
)
 
// 定义一个结构体，模拟切片的内部结构
type mockSliceHeader struct {
    Data uintptr
    Len  int
    Cap  int
}
 
func main() {
    // 创建一个切片
    slice := []int{1, 2, 3, 4, 5}
 
    // 打印切片的内存地址
    fmt.Println("Slice memory address:", &slice)
 
    // 获取切片的头部信息
    sliceHeader := *(*mockSliceHeader)(unsafe.Pointer(&slice))
 
    // 打印切片的头部信息
    fmt.Println("Slice header:", sliceHeader)
 
    // 打印切片的数据指针指向的内存地址
    fmt.Println("Data memory address:", sliceHeader.Data)
 
    // 通过指针访问切片元素
    ptr := (*[100]int)(unsafe.Pointer(sliceHeader.Data))
 
    // 打印切片的第一个元素
    fmt.Println("First element:", ptr[:sliceHeader.Len])
 
    // 修改切片的第一个元素
    (*ptr)[:1] = []int{100}
 
    // 打印修改后的切片
    fmt.Println("Modified slice:", slice)
}

这段代码首先定义了一个模拟切片内部结构的结构体mockSliceHeader，然后创建了一个切片并打印了它的内存地址。接着，代码获取了切片的头部信息，并打印出来。最后，代码通过指针访问切片的元素，并修改了第一个元素的值，然后打印出修改后的切片以验证修改确实生效。这个过程展示了如何通过内存地址和指针来操作切片，这对于理解切片内部实现和高效编程非常有帮助。

- 阅读更多 -

React 应用的 CSS 样式模块化

System

2024-08-10

所有,css




// 引入React和相关组件
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入Ant Design的样式
import './App.css'; // 引入应用特有的样式
 
// 定义组件
const App = () => {
  return (
    <div className="App">
      <h1>欢迎来到我的React应用</h1>
      <Button type="primary">点击我</Button>
    </div>
  );
};
 
// 导出组件
export default App;

这个例子展示了如何在React应用中引入和使用Ant Design组件库，并且如何通过模块化的方式引入它的CSS样式和应用特有的CSS样式。这种方法可以帮助开发者管理复杂的样式依赖，并确保样式的可维护性。

System

2024-08-10

所有,php




# 更新Homebrew数据库并安装必要的软件
brew update
brew install nginx mysql
 
# 安装php7.4和php8.0，并启用shiv-php模块以支持多版本
brew install shivammathur/php/php@7.4 shivammathur/php/php@8.0
brew link --force --overwrite php@7.4
brew link --force --overwrite php@8.0
 
# 为nginx设置PHP处理，并重新加载nginx配置
echo "server {
    listen 8080;
    root /var/www/html;
    index index.php index.html;
    error_log /var/log/nginx/error.log;
    error_log /var/log/nginx/access.log;
    location ~ \\.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4/cgi.sock;
        include fastcgi_params;
    }
}" > /usr/local/etc/nginx/servers/php7.4.conf
 
echo "server {
    listen 8081;
    root /var/www/html;
    index index.php index.html;
    error_log /var/log/nginx/error.log;
    error_log /var/log/nginx/access.log;
    location ~ \\.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.0/cgi.sock;
        include fastcgi_params;
    }
}" > /usr/local/etc/nginx/servers/php8.0.conf
 
nginx -t && nginx -s reload

这段代码展示了如何使用Homebrew在macOS上安装Nginx和MySQL，并安装两个不同版本的PHP（7.4和8.0）。然后，它为每个PHP版本创建了Nginx配置文件，并重新加载了Nginx以应用更改。这样，你就可以通过不同的端口访问使用不同PHP版本的网站了。

- 阅读更多 -

【CSS】· CSS列表、表格、背景、鼠标属性

System

2024-08-10

所有,html5

第六章的主题包括：CSS列表、表格、背景和鼠标属性。

CSS列表：




ul.circle {
  list-style-type: circle;
}
 
ul.square {
  list-style-type: square;
}
 
ol.upper-roman {
  list-style-type: upper-roman;
}
 
ol.lower-alpha {
  list-style-type: lower-alpha;
}

CSS表格：




table {
  border-collapse: collapse;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

CSS背景：




div {
  background-color: #f2f2f2;
  padding: 10px;
  margin: 10px 0;
}
 
/* 背景图片 */
body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

CSS鼠标属性：




a:hover {
  color: #ff0000;
  text-decoration: underline;
}
 
button:active {
  background-color: #4CAF50;
  color: white;
}

这些代码示例展示了如何使用CSS来定制列表的项目符号、表格的边框和填充、页面的背景以及鼠标的悬停和激活状态的样式。

- 阅读更多 -

HTML+CSS+JS--3D相册

System

2024-08-10

所有,html5

以下是一个简单的HTML和CSS代码示例，用于创建一个基本的3D相册效果。这里仅使用了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>3D Album</title>
<style>
  .album {
    width: 200px;
    height: 260px;
    perspective: 600px;
    margin: 50px auto;
  }
  .album img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .album:hover img {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="album">
  <img src="album_front.jpg" alt="Album Front">
  <img src="album_back.jpg" alt="Album Back">
</div>
</body>
</html>

这段代码创建了一个名为.album的容器，其中包含两个img元素。当鼠标悬停在相册上时，通过CSS的:hover伪类和transform属性实现翻转效果。perspective属性增加了3D效果的深度感。这个例子展示了如何使用CSS创建简单的交互效果，而无需使用JavaScript。

- 阅读更多 -

ThreeJs CSS3DObject 点击失效问题

System

2024-08-10

所有,css3

在Three.js中，如果你发现CSS3DObject的点击事件无效，可能是因为你没有正确设置事件监听器，或者是因为有其他的3D对象遮挡了你的CSS3DObject，导致点击事件无法触发。

解决方法：

确保你已经为你的场景添加了CSS3DRenderer，并且正确设置了相机和渲染器。
确保CSS3DObject已经添加到场景中，并且其位置没有被其他3D对象遮挡。
设置事件监听器时，确保监听的是正确的对象和事件类型。对于WebGLRenderer，通常监听的是canvas的mousedown、mouseup或click事件。
如果有其他3D对象遮挡了CSS3DObject，你可以通过更改它们的位置来解决遮挡问题，或者使用raycaster检测点击事件是否发生在CSS3DObject上。

示例代码：




// 假设你已经有了一个scene, camera, renderer和cssRenderer
// 还有一个CSS3DObject对象cssObject
 
// 将CSS3DObject添加到场景中
scene.add(cssObject);
 
// 更新渲染器和CSS渲染器
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    cssRenderer.render(scene, camera);
}
animate();
 
// 设置事件监听器
function onMouseClick(event) {
    // 将鼠标位置转换为three.js的坐标系
    const mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 通过raycaster检查点击事件是否发生在CSS3DObject上
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
 
    // 如果有交点并且该对象是CSS3DObject，处理点击事件
    if (intersects.length > 0 && intersects[0].object === cssObject) {
        console.log('CSS3DObject clicked!');
        // 执行点击事件的操作
    }
}
 
// 监听canvas的点击事件
renderer.domElement.addEventListener('click', onMouseClick);

确保在你的场景中，CSS3DObject是可见的，并且不会被其他3D对象遮挡。如果问题依然存在，可能需要进一步调试以确定是哪一部分导致了点击事件的失效。

- 阅读更多 -