当前位置： 首页 > news >正文

打造古风炫酷个人网页：用HTML和CSS3传递笔墨韵味

news 2026/3/26 12:41:03

在这里插入图片描述

需要用到的背景大家可以自己找喜欢的风格!!! 当然俺把俺用的背景放到文章最后了哦！！！！！ 感谢关注和支持 长期更新哦~~~

1. 简洁的页面布局：保持优雅和对称

在古风设计中，布局的对称性非常重要。通过左右平衡的内容布局，配合留白来减少页面的视觉噪音。

2. 合理的字体选择与背景搭配

古风网页应该选用较为雅致的字体，例如书法风或小篆风格，尽量避免太过花哨的元素。可以选择清新的配色，比如墨绿色、淡黄色和灰色，与柔和的背景图结合。

3. 背景图建议

背景图要简洁，不要太复杂，可以选用淡淡的水墨效果，以竹子、山水、祥云等元素为主，同时保持背景透明，突出前景内容。

4. 适当的动态效果

我建议使用CSS3制作轻微的动态效果，如缓慢的渐变、元素淡入淡出等，不会显得过于繁杂。通过这些动态效果增加互动性，但不会干扰用户体验。

示例HTML和CSS代码（古风优雅设计）：

HTML:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人主页 - 古风设计</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><header><h1>心如水墨淡如风</h1><p>在每一笔墨之间，书写你的故事</p></header><section class="intro"><h2>个人介绍</h2><p>你好，我是热爱古风文化的前端开发者，致力于打造兼具美感与功能的网页体验。</p></section><section class="gallery"><h2>作品展示</h2><div class="image-container"><img src="art1.jpg" alt="作品1"><img src="art2.jpg" alt="作品2"></div></section><footer><p>版权所有 © 2024</p></footer></div>
</body>
</html>
CSS:
body {font-family: 'ZCOOL XiaoWei', serif;background: url('background-image.png') no-repeat center center fixed;background-size: cover;color: #333;margin: 0;padding: 0;
}.container {max-width: 1200px;margin: 0 auto;padding: 20px;background-color: rgba(255, 255, 255, 0.9);
}header {text-align: center;padding: 60px 20px;color: #2c3e50;
}header h1 {font-size: 3em;font-weight: bold;letter-spacing: 2px;
}header p {font-size: 1.2em;color: #7f8c8d;
}.intro, .gallery {margin: 40px 0;padding: 20px;background: rgba(250, 250, 250, 0.95);border-radius: 10px;
}.intro h2, .gallery h2 {font-size: 2em;text-align: center;margin-bottom: 20px;
}.image-container {display: flex;justify-content: space-around;
}.image-container img {max-width: 100%;border-radius: 10px;transition: transform 0.3s ease;
}.image-container img:hover {transform: scale(1.1);
}footer {text-align: center;padding: 20px;background-color: #2c3e50;color: white;margin-top: 40px;
}

视觉元素：

  • 背景图：柔和的水墨画或清淡的古风花纹，作为网页背景。图像不应喧宾夺主，而是轻柔、点到为止的渲染古典氛围。
  • 布局：居中对称布局，左右各放置介绍与图片展示，整体简洁，不显杂乱。
    在这里插入图片描述
    在这里插入图片描述

相关文章：

打造古风炫酷个人网页：用HTML和CSS3传递笔墨韵味

需要用到的背景大家可以自己找喜欢的风格!!! 当然俺把俺用的背景放到文章最后了哦&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 感谢关注和支持 长期更新哦~~~ 1. 简洁的页面布局&#xff1a;保持优雅和对称 在古风设计中&#xff0c;布局的对称性非常重要…...

编程日记 2024/9/14 13:15:02

vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装 npm i postcss-plugin-px2rem --save -dev --force找到 postcss.config.cjs 没有的话就新建一个 module.exports {plugins: {// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {},"postcss-plugin-px2rem":…...

编程日记 2024/9/14 13:12:00

股票程序化交易是，第三方软件申请券商私有接口API的门槛

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…...

编程日记 2024/9/14 13:09:56

JDK8的一些主要的新特性

JDK8&#xff08;Java Development Kit 8&#xff09; 是一个重要的版本&#xff0c;带来了许多显著的特性和改进&#xff0c;极大地提升了 Java 语言的功能性和开发效率。以下是 JDK 8 的一些主要新特性&#xff1a; 一、Lambda 表达式 1.简化匿名内部类的写法&#xff0c;…...

编程日记 2024/9/14 13:06:32

40岁的java程序员，还有出路吗？

目录 前言一、现状与挑战二、出路与机遇三、案例分析与启示四、结语 前言 40岁Java程序员的出路&#xff1a;挑战与机遇并存 在科技日新月异的今天&#xff0c;IT行业始终保持着高速的发展态势&#xff0c;而Java作为其中的重要一员&#xff0c;其地位依然稳固且充满挑战。对…...

编程日记 2024/9/14 13:05:31

【服务器】shell脚本之Docker创建nginx

#!/bin/bash# 定义目标目录和配置文件路径 BASE_DIR"/opt/docker/nginx"ETC_DIR"$BASE_DIR/etc" ETC_CONF_DIR"$ETC_DIR/conf.d" SSL_DIR"$ETC_CONF_DIR/ssl" LOG_DIR"$BASE_DIR/log"HTML_DIR"$BASE_DIR/html"C…...

编程日记 2024/9/14 13:04:27

提取蛋白质复合体结构中组装体的变换矩阵

PDB文件中&#xff0c;组装体变换矩阵&#xff08;assembly transformation matrices&#xff09;用于描述多聚体结构中各个单体之间的相对位置和取向。从蛋白质复合体 PDB 数据中提取每个组装体&#xff08;assembly&#xff09;的变换矩阵&#xff0c;通常需要解析 PDB 文件中…...

编程日记 2024/9/14 13:03:26

java程序员入行科目一之CRUD轻松入门教程(一)

之前在操作MySQL的时候&#xff0c;都是采用Navicat&#xff0c;或者cmd黑窗口。 无论使用什么方式和MySQL交互&#xff0c;大致步骤是这样的 建立连接&#xff0c;需要输入用户名和密码编写SQL语句&#xff0c;和数据库进行交互 这个连接方式不会变&#xff0c;但是现在需要 基…...

编程日记 2024/9/14 13:02:25

OpenHarmony鸿蒙开发（ Beta5.0）智能油烟机开发实践

样例简介 本Demo是基于Hi3516开发板&#xff0c;使用开源OpenHarmony开发的应用。本应用主要功能有&#xff1a; 可以搜索本地指定目录的图片和视频文件&#xff0c;并可进行点击播放。 可以通过wifi接收来自手机的美食图片以及菜谱视频&#xff0c;让我们对美食可以边学边做…...

编程日记 2024/9/14 12:58:19

【GBase 8c V5_3.0.0 分布式数据库常用维护命令】

一、查看数据库状态/检查&#xff08;gbase用户&#xff09; 1.gha_ctl monitor 使用gha_ctl monitor查看节点运行情况(跟dcs的地址和端口) gha_ctl monitor -c gbase -l http://172.20.10.8:2379 -Hall |coordinator | datanode | gtm | server|dcs:必选字段。指定查看哪类集…...

编程日记 2024/9/14 12:57:18

破解AI生成检测：如何用ChatGPT降低论文的AIGC率

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 降低论文的“AIGC率”是个挑战&#xff0c;但有一些策略可以尝试。使用ChatGPT逐步调整和改进内容&#xff0c;使其更加自然和原创&#xff0c;降低AI检测工具识别出高“AIGC率”的概率…...

编程日记 2024/9/14 12:53:14

Python用MarkovRNN马尔可夫递归神经网络建模序列数据t-SNE可视化研究

原文链接&#xff1a;https://tecdat.cn/?p37634 本文聚焦于利用马尔可夫递归神经网络&#xff08;MarkovRNN&#xff09;结合树库展开建模工作。MarkovRNN 通过整合马尔可夫特性与离散随机变量来深入探索递归神经网络中的随机转换机制&#xff0c;旨在高效处理具有复杂潜在信…...

编程日记 2024/9/14 12:52:13

setup函数子传父普通写法

父组件 <template><div><p>接收的数据: {{ receivedData }}</p><Demo4Chiren2 custom-event"handleGetWeb" /></div> </template><script> import { ref } from vue; import Demo4Chiren2 from ./demo4Chiren2.vue…...

编程日记 2024/9/14 12:48:09

seafaring靶场漏洞测试攻略

步骤一&#xff1a;打开网页 一&#xff1a;sql注入漏洞 步骤一&#xff1a;测试回显点 -1 union select 1,2,3# 步骤二&#xff1a;查看数据库 -1 union select 1,2,database()# 步骤三&#xff1a;查看表名 -1 union select 1,2,group_concat(table_name) from informati…...

编程日记 2024/9/14 12:47:08

简单示例，搞懂PowerBI的ALL()，ALLEXCEPT()和ALLSELECTED()的区别

假设我们有如下数据&#xff0c;我们来统计下各班级的人数 我们在报表页里加上 班级’二班‘ 的筛选条件&#xff0c;此时PowerBI已经自动为我们显示了各班级人数&#xff1a;一班有3人&#xff0c;二班有1人。 根据我们的筛选条件&#xff0c;我们的统计人数应该是按照筛选器&…...

编程日记 2024/9/14 12:45:07

Collection

java.util.Collections:是集合工具类 作用&#xff1a;Collections不是集合&#xff0c;而是集合的工具类 常用API addAll package Collections;import java.util.ArrayList; import java.util.Collections;public class CollectionsDemo {public static void main(String[]…...

编程日记 2024/9/14 12:44:06

19章 泛型

1.修改程序清单19-1中的GenericStack类&#xff0c;使用数组而不是ArrayList来实现它。你应该在给栈添加新元素之前检查数组的大小如果数组满了&#xff0c;就创建一个新数组。该数组是当前数组大小的两倍&#xff0c;然后将当前数组的元素复制到新数组中。 public class Gene…...

编程日记 2024/9/14 12:43:05

基于python+django+mysql+Nanodet检测模型的水稻虫害检测系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

编程日记 2024/9/14 12:41:03

计算机网络27、28——Linux命令1、2

1、虚拟机网络前方路径内容 用户名机器名&#xff1a;/$ $表示普通用户&#xff0c;#表示root用户 2、Linux不分盘&#xff0c;都是绝对路径 /表示根目录&#xff0c;表示计算机文件夹下 ~是当前用户的家&#xff0c;表示home文件夹下自己的文件夹 3、bin文件夹下的是可执…...

编程日记 2024/9/14 12:40:03

【Python深度学习】逆强化学习（IRL）：通俗揭开学习背后的奥秘

逆强化学习：揭开学习背后的奥秘 1. 引言 当我们谈论人工智能（AI）时，很多人第一时间会想到强化学习。强化学习是一种让智能体通过与环境的互动，逐渐学习到如何做出最优决策的学习方法。然而，有一种更加神奇的学习方式叫做 逆强化学习（Inverse Reinforcement Learning，…...

编程日记 2024/9/14 12:39:02

引入电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度

【文章复现 可】计及电转气协同的含碳捕集与垃圾焚烧 虚拟电厂优化调度 引入碳捕集电厂–电转气–燃气机组协同利用框架&#xff0c;碳捕集的 CO2可作为电转气原料&#xff0c;生成的天然气则供应给燃气机组&#xff1b;并通过联合调度将碳捕集能耗和烟气处理能耗进行负荷转移…...

编程新知 2026/3/26 11:45:58

企业IT必看：教员工用小米手机配置Exchange邮箱的完整指南（含服务器参数详解）

企业IT标准化指南&#xff1a;小米手机Exchange邮箱配置与服务器参数解析 在移动办公成为标配的今天&#xff0c;企业邮箱的稳定接入直接关系到团队协作效率。根据2023年企业通信工具调研报告&#xff0c;超过67%的中大型企业仍在使用Exchange作为核心邮件系统&#xff0c;而员…...

编程新知 2026/3/26 10:21:15

RK3568 Android12长按电源键无反应？三步搞定关机菜单恢复

RK3568 Android12电源键功能失效排查与深度修复指南 在RK3568平台上进行Android12系统定制时&#xff0c;电源键功能异常是开发者常遇到的典型问题。不同于简单的功能缺失&#xff0c;这背后涉及系统级行为配置、手势交互逻辑和硬件抽象层的多层级适配。本文将带您从现象溯源到…...

编程新知 2026/3/26 10:21:15

3步实现PDF文献自动化管理：Zotero Reference插件新手入门指南

3步实现PDF文献自动化管理&#xff1a;Zotero Reference插件新手入门指南 【免费下载链接】zotero-reference PDF references add-on for Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-reference 一、价值定位&#xff1a;为什么选择Zotero Reference …...

编程新知 2026/3/26 9:51:05

NCMconverter完整指南：3步解锁NCM音乐文件的终极播放方案

NCMconverter完整指南&#xff1a;3步解锁NCM音乐文件的终极播放方案 【免费下载链接】NCMconverter NCMconverter将ncm文件转换为mp3或者flac文件 项目地址: https://gitcode.com/gh_mirrors/nc/NCMconverter 你是否曾经遇到过这样的情况&#xff1a;从音乐平台下载了心…...

编程新知 2026/3/26 7:26:20

c++ 20 有什么新的功能

C20 是继 C11 之后最具革命性的 C 标准更新之一&#xff0c;引入了许多强大的新特性&#xff0c;旨在提高代码的表达力、类型安全性、编译效率和开发体验。以下是 C20 的主要新功能分类总结&#xff1a;一、四大核心语言特性1. 模块&#xff08;Modules&#xff09;目的&#x…...

编程新知 2026/3/26 6:29:43

StructBERT模型本地部署详解：从GitHub克隆到服务启动

StructBERT模型本地部署详解&#xff1a;从GitHub克隆到服务启动 你是不是也遇到过这样的场景&#xff1f;手头有一堆文本&#xff0c;需要快速判断它们之间的相似度&#xff0c;比如检查文章是否重复、匹配用户查询、或者做智能问答。如果每次都调用云端API&#xff0c;不仅费…...

编程新知 2026/3/26 5:51:15

基于模型的增程式混合动力汽车整车策略开发与建模

基于模型的整车策略开发思路、整车模型搭建流程&#xff0c;增程式混合动力汽车建模仿真模型&#xff0c;增程纯电&#xff0c;类似Nisson的e-power整车配置策略 具体内容包括&#xff1a;增程器模型、电机模型、电池模型&#xff0c;驾驶员模型&#xff0c;整车VCU控制模型等 …...

编程新知 2026/3/26 4:45:42

HunyuanVideo-Foley效果展示：AI生成音效在Audition中后期处理兼容性验证

HunyuanVideo-Foley效果展示&#xff1a;AI生成音效在Audition中后期处理兼容性验证 1. 音效生成技术概览 HunyuanVideo-Foley作为新一代AI音效生成模型&#xff0c;通过深度学习技术实现了从文本描述到高质量音效的端到端生成。该技术基于RTX 4090D 24GB显存和CUDA 12.4环境…...

编程新知 2026/3/26 4:33:39

OpenClaw语音交互方案：GLM-4.7-Flash对接ASR/TTS

OpenClaw语音交互方案&#xff1a;GLM-4.7-Flash对接ASR/TTS 1. 为什么需要语音交互的OpenClaw&#xff1f; 上周三凌晨两点&#xff0c;我正在赶一份项目报告时突然冒出一个想法&#xff1a;如果能用语音控制OpenClaw执行自动化任务&#xff0c;是不是能彻底解放双手&#x…...

编程新知 2026/3/26 4:19:26