2025年08月18日
CSS（Cascading Style Sheets）即层叠样式表，是用于美化网页、控制网页布局和外观的语言。以下从基础概念、选择器、常用属性、样式表引入方式和示例代码等方面为你介绍如何用CSS进行网页设计。
基础概念
CSS通过选择器选中HTML元素，然后为这些元素应用样式规则，以改变元素的外观和布局。样式规则由选择器和声明块组成，声明块中包含一个或多个声明，每个声明由属性和值组成，中间用冒号分隔，声明之间用分号分隔。例如：
2025年08月18日
2025年08月18日
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优雅五子棋</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 800px;
width: 100%;
margin: 0 auto;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.5rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.game-info {
display: flex;
justify-content: space-between;
width: 480px;
margin: 0 auto 20px;
font-size: 1.2rem;
color: #34495e;
}
.player-info {
padding: 10px 20px;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.black {
background-color: #2c3e50;
color: white;
}
.white {
background-color: #ecf0f1;
color: #2c3e50;
border: 1px solid #bdc3c7;
}
.active {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.board {
display: grid;
grid-template-columns: repeat(15, 32px);
grid-template-rows: repeat(15, 32px);
gap: 0;
margin: 0 auto;
background-color: #e8bb6e;
border: 2px solid #8d6e3a;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
border-radius: 4px;
position: relative;
}
.cell {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
}
.cell::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #8d6e3a;
z-index: 1;
}
.cell::after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 100%;
background-color: #8d6e3a;
z-index: 1;
}
.piece {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
top: 2px;
left: 2px;
z-index: 2;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
transition: transform 0.2s;
}
.piece.black {
background-color: #2c3e50;
background: radial-gradient(circle at 30% 30%, #34495e, #2c3e50);
}
.piece.white {
background-color: #ecf0f1;
background: radial-gradient(circle at 30% 30%, #ffffff, #bdc3c7);
}
.piece.last-move {
box-shadow: 0 0 0 2px #e74c3c, 0 3px 5px rgba(0,0,0,0.3);
}
.controls {
margin-top: 30px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 30px;
cursor: pointer;
margin: 0 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 100;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 400px;
width: 90%;
}
.modal h2 {
color: #2c3e50;
margin-bottom: 20px;
}
.modal button {
margin-top: 20px;
}
@media (max-width: 600px) {
.board {
grid-template-columns: repeat(15, 20px);
grid-template-rows: repeat(15, 20px);
}
.cell {
width: 20px;
height: 20px;
}
.piece {
width: 18px;
height: 18px;
top: 1px;
left: 1px;
}
.game-info {
width: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>优雅五子棋</h1>
<div class="game-info">
<div class="player-info black active" id="black-info">黑棋回合</div>
<div class="player-info white" id="white-info">白棋</div>
</div>
<div class="board" id="board"></div>
<div class="controls">
<button id="restart-btn">重新开始</button>
<button id="undo-btn">悔棋</button>
</div>
</div>
<div class="modal" id="win-modal">
<div class="modal-content">
<h2 id="winner-message">黑棋获胜!</h2>
<button id="play-again-btn">再玩一局</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('board');
const blackInfo = document.getElementById('black-info');
const whiteInfo = document.getElementById('white-info');
const restartBtn = document.getElementById('restart-btn');
const undoBtn = document.getElementById('undo-btn');
const winModal = document.getElementById('win-modal');
const winnerMessage = document.getElementById('winner-message');
const playAgainBtn = document.getElementById('play-again-btn');
const BOARD_SIZE = 15;
let currentPlayer = 'black';
let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
let gameOver = false;
let moveHistory = [];
// 初始化棋盘
function initBoard() {
board.innerHTML = '';
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
board.appendChild(cell);
}
}
}
// 处理点击事件
function handleCellClick(e) {
if (gameOver) return;
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if (gameBoard[row][col] !== null) return;
placePiece(row, col);
if (checkWin(row, col)) {
gameOver = true;
const winner = currentPlayer === 'black' ? '黑棋' : '白棋';
winnerMessage.textContent = `${winner}获胜!`;
winModal.style.display = 'flex';
} else {
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
updatePlayerInfo();
}
}
// 放置棋子
function placePiece(row, col) {
gameBoard[row][col] = currentPlayer;
moveHistory.push({ row, col, player: currentPlayer });
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
const piece = document.createElement('div');
piece.className = `piece ${currentPlayer}`;
// 移除上一个棋子的last-move类
const lastMove = document.querySelector('.last-move');
if (lastMove) {
lastMove.classList.remove('last-move');
}
piece.classList.add('last-move');
cell.appendChild(piece);
// 添加动画效果
piece.style.transform = 'scale(0)';
setTimeout(() => {
piece.style.transform = 'scale(1)';
}, 10);
}
// 检查获胜
function checkWin(row, col) {
const directions = [
[0, 1], // 水平
[1, 0], // 垂直
[1, 1], // 对角线
[1, -1] // 反对角线
];
const player = gameBoard[row][col];
for (const [dx, dy] of directions) {
let count = 1;
// 正向检查
for (let i = 1; i < 5; i++) {
const newRow = row + i * dx;
const newCol = col + i * dy;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || gameBoard[newRow][newCol] !== player) {
break;
}
count++;
}
// 反向检查
for (let i = 1; i < 5; i++) {
const newRow = row - i * dx;
const newCol = col - i * dy;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || gameBoard[newRow][newCol] !== player) {
break;
}
count++;
}
if (count >= 5) {
return true;
}
}
return false;
}
// 更新玩家信息显示
function updatePlayerInfo() {
if (currentPlayer === 'black') {
blackInfo.classList.add('active');
whiteInfo.classList.remove('active');
} else {
blackInfo.classList.remove('active');
whiteInfo.classList.add('active');
}
}
// 重新开始游戏
function restartGame() {
gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
currentPlayer = 'black';
gameOver = false;
moveHistory = [];
updatePlayerInfo();
initBoard();
winModal.style.display = 'none';
}
// 悔棋
function undoMove() {
if (moveHistory.length === 0 || gameOver) return;
const lastMove = moveHistory.pop();
gameBoard[lastMove.row][lastMove.col] = null;
const cell = document.querySelector(`.cell[data-row="${lastMove.row}"][data-col="${lastMove.col}"]`);
const piece = cell.querySelector('.piece');
if (piece) {
piece.remove();
}
// 更新最后一个棋子的样式
const newLastMove = moveHistory[moveHistory.length - 1];
if (newLastMove) {
const newCell = document.querySelector(`.cell[data-row="${newLastMove.row}"][data-col="${newLastMove.col}"]`);
const newPiece = newCell.querySelector('.piece');
if (newPiece) {
newPiece.classList.add('last-move');
}
}
currentPlayer = lastMove.player;
updatePlayerInfo();
}
// 事件监听
restartBtn.addEventListener('click', restartGame);
undoBtn.addEventListener('click', undoMove);
playAgainBtn.addEventListener('click', restartGame);
// 初始化游戏
initBoard();
});
</script>
</body>
</html>2025年08月18日
popup弹窗，可以说是一个很常见的功能，像上边的微信，以及很多的应用，都会存在这样的需求，鸿蒙原生Api中，对于popup弹窗，可以说实现起来特别的简单，直接使用提供的
bindPopup方法即可。
2025年08月18日
这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。
但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。
所有示例的完整代码，都可以从 GitHub 的代码仓库[1]下载。
微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。
2025年08月18日
层叠样式表（CSS）是网页开发中不可或缺的一部分，用于控制网页的视觉呈现。本文将以简洁的方式介绍CSS的核心概念，帮助初学者快速上手。本文将涵盖CSS的选择器、属性、盒模型、布局、伪类以及媒体查询等内容，并提供实用的代码示例。
2025年08月18日
各位周末好，今天为大家来仓颉语言外卖App的实战分享。
我们可以先分析一下页面的布局结构，它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件，还是要自定义，这个导航栏有三部分内容，可以使用两端对齐，要注意的是，如果需要中间部分在页面中间需要两端的内容宽度相同。导航栏和页面的布局结构代码如下：
2025年08月18日
## 什么是视频播放器组件
在鸿蒙HarmonyOS的ArkTS开发框架中，视频播放器组件（Video）是专门用于音视频媒体内容播放的核心UI组件。这个组件不仅提供了强大的视频解码和渲染能力，还集成了完整的播放控制逻辑，为开发者构建多媒体应用提供了一站式的解决方案。视频播放器组件支持多种主流的视频格式，包括MP4、AVI、MKV、WebM等，同时也支持网络流媒体和本地文件的播放。
2025年08月18日
本文基于Api13
来了一个需求，要实现顶部下拉刷新，并且顶部的标题栏，下拉状态下跟随手势刷新，上拉状态下进行吸顶，也就是tabs需要固定在顶部标题栏的下面，基本的效果可以看下图，下图是一个Demo，实际的需求，顶部标题栏带有渐变显示，不过这些不是重点。