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

HTML实战：响应式个人资料页面

article 2025/9/16 13:43:53

我将创建一个现代化的响应式个人资料页面，展示HTML在实际应用中的强大功能。这个页面将包含多个实战元素：导航栏、个人简介、技能展示、作品集和联系表单。

设计思路

  • 使用Flexbox和Grid布局实现响应式设计

  • 添加CSS过渡效果增强交互体验

  • 实现深色/浅色模式切换功能

  • 创建悬停动画效果提升视觉体验

  • 确保所有元素在不同设备上完美显示

下面是完整的HTML代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML实战 - 响应式个人资料页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --text: #333;
            --bg: #ffffff;
            --card-bg: #f8f9fa;
            --shadow: rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        .dark-mode {
            --primary: #4895ef;
            --secondary: #4361ee;
            --accent: #3f37c9;
            --light: #343a40;
            --dark: #f8f9fa;
            --text: #f8f9fa;
            --bg: #121212;
            --card-bg: #1e1e1e;
            --shadow: rgba(0, 0, 0, 0.3);
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            transition: var(--transition);
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px var(--shadow);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: var(--accent);
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 1.5rem;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 4px;
            transition: var(--transition);
        }

        nav ul li a:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .theme-toggle {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            margin-left: 20px;
            transition: var(--transition);
        }

        /* 英雄区域 */
        .hero {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') center/cover no-repeat;
            color: white;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: fadeInDown 1s ease;
        }

        .hero p {
            font-size: 1.5rem;
            max-width: 700px;
            margin: 0 auto 2rem;
            animation: fadeInUp 1s ease;
        }

        .btn {
            display: inline-block;
            background: var(--accent);
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: 2px solid var(--accent);
            animation: fadeIn 1.5s ease;
        }

        .btn:hover {
            background: transparent;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* 关于区域 */
        .section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            l

相关文章：

HTML实战：响应式个人资料页面

我将创建一个现代化的响应式个人资料页面，展示HTML在实际应用中的强大功能。这个页面将包含多个实战元素：导航栏、个人简介、技能展示、作品集和联系表单。 设计思路 使用Flexbox和Grid布局实现响应式设计 添加CSS过渡效果增强交互体验 实现深色/浅色模式切换功能 创建悬停动…...

编程日记 2025/9/13 1:37:19

Mac电脑上本地安装 MySQL并配置开启自启完整流程

文章目录 一、mysql安装1.1 使用 Homebrew 安装&#xff08;推荐&#xff09;1.2 手动下载 MySQL 社区版1.3 常见问题1.4 图形化管理工具&#xff08;可选&#xff09; 二、Mac 上配置 MySQL 开机自动启动2.1 使用 launchd 系统服务&#xff08;原生支持&#xff09;2.2 通过 H…...

编程日记 2025/7/16 9:41:51

JavaSE:面向对象进阶之内部类（Inner Class）

JavaSE 面向对象进阶之内部类&#xff08;Inner Class&#xff09; 一、内部类的核心概念 内部类是定义在另一个类内部的类&#xff0c;它与外部类存在紧密的逻辑关联&#xff0c;主要作用&#xff1a; 封装细节&#xff1a;隐藏实现细节&#xff0c;对外提供简洁接口。访问…...

编程日记 2025/8/4 23:00:47

【HW系列】—安全设备介绍（开源蜜罐的安装以及使用指南）

文章目录 蜜罐1. 什么是蜜罐&#xff1f;2. 开源蜜罐搭建与使用3. HFish 开源蜜罐详解安装步骤使用指南关闭方法 总结 蜜罐 1. 什么是蜜罐&#xff1f; 蜜罐&#xff08;Honeypot&#xff09;是一种主动防御技术&#xff0c;通过模拟存在漏洞的系统或服务&#xff08;如数据库…...

编程日记 2025/9/10 4:21:44

汽车总线分析总结（CAN、LIN、FlexRay、MOST、车载以太网）

目录 一、汽车总线技术概述 二、主流汽车总线技术对比分析 1. CAN总线&#xff08;Controller Area Network&#xff09; 2. LIN总线&#xff08;Local Interconnect Network&#xff09; 3. FlexRay总线 4. MOST总线&#xff08;Media Oriented Systems Transport&#x…...

编程日记 2025/9/7 2:07:12

MyBatisPlus--条件构造器及自定义SQL详解

条件构造器 在前面学习快速入门的时候&#xff0c;练习的增删改查都是基于id去执行的&#xff0c;但是在实际开发业务中&#xff0c;增删改查的条件往往是比较复杂的&#xff0c;因此MyBatisPlus就提供了一个条件构造器来帮助构造复杂的条件。 MyBatisPlus支持各种复杂的wher…...

编程日记 2025/9/12 13:01:38

OVD开放词汇检测 Detic 训练COCO数据集实践

0、引言 纯视觉检测当前研究基本比较饱和&#xff0c;继续创新提升空间很小&#xff0c;除非在CNN和transformer上提出更强基础建模方式。和文本结合是当前的一大趋势&#xff0c;也是计算机视觉和自然语言处理结合的未来趋势&#xff0c;目前和文本结合的目标检测工作还是有很…...

编程日记 2025/9/7 2:12:30

docker、ctr、crictl命令简介与使用

概述 在使用k3s过程中&#xff0c;经常需要使用ctr和crictl两个命令&#xff0c;本文记录一下。 ctr 类似docker命令是docker-shim容器运行时的客户端工具&#xff0c;ctr是Containerd的客户端工具。一个简单的CLI接口&#xff0c;用作Containerd本身的一些调试用途&#xf…...

编程日记 2025/9/12 3:37:38

WEB安全--SQL注入--bypass技巧2

继之前文章的补充&#xff1a; WEB安全--SQL注入--bypass技巧_sql注入过滤空格-CSDN博客 Q1&#xff1a;发现sql注入的时间盲注时&#xff0c;如果时间盲注的函数都被过滤了&#xff0c;怎么办&#xff1f; 除了找其他函数替换、编码等方式&#xff0c;还有以下方式绕过&…...

编程日记 2025/8/11 21:36:38

【强化学习哲学 Day 1】Q-Learning - 在不确定中寻找确定

&#x1f3ad; 故事&#xff1a;那些选择的时刻 你还记得那些站在十字路口的时刻吗&#xff1f; 也许是刚进实验室&#xff0c;面对满墙的研究方向海报&#xff0c;不知道哪条路通向你想要的未来&#xff1b;也许是第一份工作的选择&#xff0c;大厂的螺丝钉还是小公司的多面…...

编程日记 2025/7/6 19:11:35

WEB3——什么是ABI

怎么获得ABI&#xff1f; 在编译完合约后&#xff0c;可以在左边下面点击复制ABI ABI&#xff08;Application Binary Interface&#xff0c;应用二进制接口&#xff09;是用来让前端或服务端 JavaScript 代码与智能合约进行交互的桥梁&#xff0c;它描述了合约的函数、事件和…...

编程日记 2025/9/7 2:12:31

嵌入式软件--stm32 DAY 8.5 基础复习总结

1.时钟树 在数据手册里面&#xff0c;有一张密密麻麻的图&#xff0c;正是时钟系统里的时钟树。 对于时钟&#xff0c;我们注意有两点。一个是系统时钟SYSCLK,一个是依赖外部晶振生成的RTC. RTC以外部低速晶振作为时钟源或者外部高速晶振128分频后作为时钟源&#xff0c;又或者…...

编程日记 2025/9/12 7:12:12

MMRL: Multi-Modal Representation Learning for Vision-Language Models(多模态表示学习)

摘要 预训练的VLMs,对于跨任务的迁移学习至关重要&#xff0c;然而&#xff0c;在few-shot数据集上微调会导致过拟合&#xff0c;降低在新任务上的性能。为解决这个问题&#xff0c;提出一种新的多模态表征学习框架&#xff08;MMRL&#xff09;,该框架引入了一个共享、可学习…...

编程日记 2025/9/7 2:22:56

贪心算法求解汽车加油问题

一、问题描述 一辆汽车加满油后可以行驶 n km。在前往目的地的途中&#xff0c;有多个加油站。我们的目标是设计一个有效的算法&#xff0c;确定汽车应该在哪些加油站停靠加油&#xff0c;以使得沿途的加油次数最少。 二、输入输出形式 算法的输入包括两部分&#xff1a;第一…...

编程日记 2025/7/7 2:27:13

JVM Full GC 频繁问题排查、优化及解决方案

引言 在Java应用程序中&#xff0c;JVM&#xff08;Java虚拟机&#xff09;通过垃圾回收机制自动管理内存&#xff0c;确保不再使用的对象能够被及时清理和释放。虽然垃圾回收在大多数情况下运行顺利&#xff0c;但当Full GC频繁发生时&#xff0c;它会严重影响应用性能&#x…...

编程日记 2025/7/23 8:19:03

rsync服务的搭建

目录 一、rsync介绍 rsync的安装 二、rsync的语法 三、rsync命令使用 1. 本机同步 2. 远程同步 四、rsync作为服务使用 1、尝试启动rsync程序 2、rsync的配置文件介绍 注意事项&#xff1a; 3. rsyncinotify实时同步 3.依赖服务托管xinetd&#xff08;CentOS 6中rs…...

编程日记 2025/9/15 10:01:29

JDK21深度解密 Day 8：Spring Boot 3与虚拟线程整合

【JDK21深度解密 Day 8】Spring Boot 3与虚拟线程整合 引言：Spring Boot 3遇上JDK21虚拟线程 在本系列的第8天，我们将聚焦于Spring Boot 3与JDK21虚拟线程的整合实践。作为全网首套完整的JDK21特性解析，我们不仅会探讨虚拟线程如何颠覆传统Java并发模型，还会通过完整的Sp…...

编程日记 2025/7/22 23:16:35

vscode 配置 QtCreat Cmake项目

1.vscode安装CmakeTool插件并配置QT中cmake的路径&#xff0c;不止这一处 2.cmake生成器使用Ninja&#xff08;Ninja在安装QT时需要勾选&#xff09;&#xff0c;可以解决[build] cc1plus.exe: error: too many filenames given; type ‘cc1plus.exe --help’ for usage 编译时…...

编程日记 2025/9/7 2:25:30

排序算法-归并排序与快速排序

归并排序与快速排序 快速排序是利用的递归思想&#xff1a;选取一个基准数&#xff0c;把小于基准数的放左边 大于的放右边直到整个序列有序 。快排分割函数 O(lognn), 空间 :没有额外开辟新的数组但是递归树调用函数会占用栈内存 O(logn) 。 归并排序&#xff1a;在递归返回的…...

编程日记 2025/7/7 19:45:39

HTML实现端午节主题网站：龙舟争渡，凭吊祭江诵君赋。

名人说&#xff1a;龙舟争渡&#xff0c;助威呐喊&#xff0c;凭吊祭江诵君赋。——苏轼《六幺令天中节》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、项目概览&#xff1a;传统与现代的技术碰撞1. 核心特…...

编程日记 2025/9/7 2:25:29

uniapp uni-id 如果是正式项目，需自行实现发送邮件的相关功能

(3) 使用云对象sendEmailCode 发送邮箱验证码&#xff0c;报错送邮箱验证码失败 Error: 已启动测试模式&#xff0c;直接使用&#xff1a;123456作为邮箱验证码即可。 如果是正式项目&#xff0c;需自行实现发送邮件的相关功能 - DCloud问答 uni-id 没有实现邮箱验证码逻辑&am…...

编程日记 2025/9/15 23:00:29

Spring boot 策略模式

public abstract class Node {/*** 执行** param a* param b* return*/public abstract Integer execute(int a, int b); }package my.node;import org.springframework.stereotype.Component;Component("exec") public class ExecNode extends Node {Overridepublic…...

编程日记 2025/9/9 22:24:12

websocket在vue中的使用步骤，以及实现聊天

一、WebSocket集成步骤 ‌连接初始化‌ 在Vue组件中创建WebSocket实例&#xff0c;建议在mounted生命周期中执行&#xff1a; data() {return {socket: null,messages: []} }, mounted() {this.socket new WebSocket(wss://your-server-endpoint); }‌事件监听配置 ‌连接成…...

编程日记 2025/7/10 4:22:05

C++学习-入门到精通【12】文件处理

C学习-入门到精通【12】文件处理 目录 C学习-入门到精通【12】文件处理一、文件和流二、创建顺序文件三、从顺序文件读取数据文件定位指针对之前的程序进行修改&#xff1a;贷款查询程序 四、更新顺序文件五、随机存取文件1.创建随机存取文件2.修改程序&#xff1a;贷款处理程序…...

编程日记 2025/9/12 15:28:22

第十一篇：MySQL 在分布式系统中的一致性保障与中间件实践

随着微服务和分布式架构的发展&#xff0c;单点数据库早已无法满足系统的横向扩展需求。本篇聚焦 MySQL 在分布式系统中的一致性保障机制&#xff0c;以及相关中间件的使用策略与实战经验。 一、一致性问题的由来 在 单机 MySQL 环境 中&#xff0c;事务具有原子性、隔离性&am…...

编程日记 2025/7/20 7:23:04

Java中如何枚举正则表达式捕获组的名字

在使用正则表达式在匹配文本时&#xff0c;除了可以通过表达式捕获命中的文本串外&#xff0c;还可以对捕获的文本串进行命名。尤其是在解析日志的场景中&#xff0c;经常会被用到。表达式如下&#xff1a; \<(?<pri>\d)\>(?<time>.*) (?<host>\S)…...

编程日记 2025/7/18 16:49:11

matlab实现图像压缩编码

一、基于DCT的JPEG压缩&#xff08;有损&#xff09; 1. 核心步骤 图像分块&#xff1a;将图像划分为88的小块。离散余弦变换&#xff08;DCT&#xff09;&#xff1a;对每个块进行DCT变换。量化&#xff1a;对DCT系数进行量化以减少高频信息。熵编码&#xff1a;使用哈夫曼或…...

编程日记 2025/7/9 5:10:27

如何排查Redis单个Key命中率骤降？

问题现象 Redis整体命中率98%&#xff0c;但监控发现特定Key&#xff08;如user:1000:profile&#xff09;的命中率从99%骤降至40%&#xff0c;引发服务延迟上升。 排查步骤 1. 确认现象与定位Key // 通过Redis监控工具获取Key指标 public void monitorKey(String key) {Je…...

编程日记 2025/8/19 10:27:52

记一次 Starrocks be 内存异常宕机

突发性 be 内存飙高&#xff0c;直至被系统 kill 掉&#xff0c;be 内存如下&#xff1a;其中 starrocks_be_update_mem_bytes 指标打满&#xff0c;重启也是如此 [rootlocalhost bin]# curl -XGET -s http://192.168.1.49:8040/metrics | grep "^starrocks_be_.*_mem_b…...

编程日记 2025/9/9 9:07:11

Spring Boot 读取.env文件获取配置

Spring Boot 读取.env文件获取配置 在Resouce 目录下创建.env文件 # DEEP SEEK TOKEN DEEP_SEEK_TOKENyour_deep_seek_key # 阿里云百炼 TOKEN ALI_BAILIAN_TOKENyour_ali_bailian_keyyml引入.env文件 spring:config:import: optional:classpath:.env[.properties]使用.env文…...

编程日记 2025/9/16 7:49:59