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

页面设计任务 个人简介页面

news 2026/2/8 20:56:22

目录

任务要求

任务讲解

源码:

详细讲解

html部分

CSS部分

任务要求

  1. 页面结构:

    • 创建一个基本的 HTML 页面，页面标题为“我的个人简介”。
    • 页面内容分为以下四个部分：
      1. 顶部导航栏:
        • 包含至少三个导航链接，例如：“主页”、“关于我”、“联系我”。
      2. 个人信息部分:
        • 包含你的名字作为主要标题。
        • 包括一段简短的自我介绍。
      3. 名言部分:
        • 添加一段你喜欢的名言或座右铭。
      4. 联系信息部分:
        • 显示你的联系方式，如电子邮件地址和社交媒体链接。

  2. 样式要求:

    • 顶部导航栏:
      • 背景色为深色（你可以选择具体颜色）。
      • 链接文本的颜色为白色。
      • 导航链接水平排列，并在鼠标悬停时改变颜色。
    • 个人信息部分:
      • 标题（名字）居中对齐，字体大小为 24px，字体颜色为你选择的颜色。
      • 自我介绍段落左对齐，字体大小为 16px，字体颜色为黑色。
    • 名言部分:
      • 名言段落右对齐，使用斜体，字体颜色为灰色。
    • 联系信息部分:
      • 居中对齐，使用无序列表显示每一项联系方式。
      • 列表项之间留有适当的间距。

  3. 布局:

    • 页面整体居中显示，设置合适的页面宽度，如 800px。
    • 每个部分之间留有适当的上下间距，确保页面布局整齐美观。

任务讲解

源码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人简介</title><style>/* 页面整体居中 */body {width: 800px;margin: 0 auto;}/* 顶部导航栏样式 */.top {background-color: #333;overflow: hidden;}.top a {float: left;display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}.top a:hover {background-color: #575757;}/* 姓名部分样式 */.name {text-align: center;font-size: 24px;color: #262323;margin-top: 20px;}/* 个人介绍部分样式 */.intro {text-align: left;font-size: 16px;color: black;margin: 20px 0;}/* 名言部分样式 */.quote {text-align: right;color: grey;font-style: italic;margin-bottom: 20px;}/* 联系方式部分样式 */.conta {max-width: 400px;margin: 0 auto;}.conta ul {list-style-type: none;padding: 0;}.conta li {margin: 10px 0;text-align: center;}</style>
</head>
<body><!-- 顶部导航栏 --><nav class="top"><a href="#">主页</a><a href="#">关于我</a><a href="#">联系我</a></nav><!-- 姓名部分 --><h3 class="name">Mike</h3><!-- 个人介绍部分 --><p class="intro">Mike，一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇，自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业，李明辉以其深厚的学术功底和创新思维，在人工智能领域取得了突破性成就。</p><!-- 名言部分 --><p class="quote">知之愈明，则行之愈笃;行之愈笃，则知之益明。</p><!-- 联系方式部分 --><div class="conta"><ul><li>TEL: 13584203695</li><li>QQ: 2541036985</li><li>EMAIL: 8541203593@qq.com</li>  </ul></div>
</body>
</html>

详细讲解

html部分

1.顶部导航栏

    <!-- 顶部导航栏 --><nav class="top"><a href="#">主页</a><a href="#">关于我</a><a href="#">联系我</a></nav>

(1).<nav>元素是一个语义化的标签，用于定义导航链接的部分。

CSS部分

1.页面整体居中

/* 页面整体居中 */
body {width: 800px;margin: 0 auto;
}

(1).当居中对齐时，常使用margin: 0 auto;

2.顶部导航栏样式

        /* 顶部导航栏样式 */.top {background-color: #333;overflow: hidden;}.top a {float: left;display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}.top a:hover {background-color: #575757;}

(1). .top部分中background-color设置颜色，overflow 用于控制当元素的内容超出其指定大小时，是否以及如何裁剪/显示这些内容。hidden：内容会被裁剪，并且其余内容是不可见的。

(2). .top a部分中 float: left;表示靠左显示；  display:block;表示块级元素会独占一行，即元素前后的内容（无论是文本还是其他元素）都会被迫换到新的一行显示。  text-decoration: none;用于删除链接的下划线

(3). .top a:hover 用于当鼠标放在链接上时做出的改变，这里发生了颜色的改变。

3. 姓名部分

/* 姓名部分样式 */
.name {text-align: center;font-size: 24px;color: #262323;margin-top: 20px;
}

(1).text-align: center; 将姓名居中显示；font-size: 24px; 设置字体大小；color: #262323;设置字体颜色。

4.个人介绍部分

/* 个人介绍部分样式 */
.intro {text-align: left;font-size: 16px;color: black;margin: 20px 0;
}

(1).text-align: left; 靠左显示；font-size: 16px;字体大小；color: black;字体颜色。

5.名言部分

/* 名言部分样式 */
.quote {text-align: right;color: grey;font-style: italic;margin-bottom: 20px;
}

(1).text-align: right;靠右展示；color: grey;字体颜色；font-style: italic;字体格式为斜体。

6.联系方式部分

.conta {max-width: 400px;margin: 0 auto;
}
.conta ul {list-style-type: none;padding: 0;
}
.conta li {margin: 10px 0;text-align: center;
}

(1).max-width: 400px; 如果元素的自然宽度（比如由于内容过多导致的宽度）小于或等于400像素，那么这个属性不会有任何影响；但是，如果元素的自然宽度超过了400像素，那么这个属性就会将元素的宽度限制在400像素以内。

(2).margin: 0 auto; 表示居中对齐。

(3).list-style-type: none; 消除无序列表前面的点。

相关文章：

页面设计任务 个人简介页面

目录 任务要求 任务讲解 源码: 详细讲解 html部分 CSS部分 任务要求 页面结构: 创建一个基本的 HTML 页面&#xff0c;页面标题为“我的个人简介”。页面内容分为以下四个部分&#xff1a; 顶部导航栏: 包含至少三个导航链接&#xff0c;例如&#xff1a;“主页”、“关于…...

编程日记 2024/8/21 15:48:08

机械学习—零基础学习日志（如何理解概率论3）

随机变量的函数分布 一维随机变量分布&#xff0c;可以看到下图&#xff0c;X为不同情况的概率。而x如果是大于等于X&#xff0c;那么当x在40以内时&#xff0c;没有概率&#xff0c;为0。 当x变大&#xff0c;在40-80之间&#xff0c;那么x大于X的概率为&#xff0c;0.7&…...

编程日记 2024/8/21 15:46:05

YOLOv8添加SE注意力机制有效提升检测精度（已跑通)

SE注意力机制概念 SSqueeze-and-Excitation (SE) 注意力机制是一种专注于增强网络模型对不同特征通道的重要性理解的机制。它通过对通道维度上的特征进行动态调整&#xff0c;增强了网络对重要特征的敏感性。 源码 import numpy as np import torch from torch import nn fro…...

编程日记 2024/8/21 15:45:03

【正点原子K210连载】第三十二章 音频FFT实验 摘自【正点原子】DNK210使用指南-CanMV版指南

第三十二章 音频FFT实验 本章将介绍CanMV下FFT的应用&#xff0c;通过将时域采集到的音频数据通过FFT为频域。通过本章的学习&#xff0c;读者将学习到CanMV下控制FFT加速器进行FFT的使用。 本章分为如下几个小节&#xff1a; 32.1 maix.FFT模块介绍 32.2 硬件设计 32.3 程序设…...

编程日记 2024/8/21 15:44:02

Android Studio修改默认.m2与Gradle user home缓存位置

Android Studio修改默认.m2与Gradle user home缓存位置 1、修改Gradle user home的方法&#xff1a; android studio配置默认.gradle路径_android studio gradle在哪-CSDN博客文章浏览阅读2k次。当android studio新建一个项目时候&#xff0c;默认的.gradle路径均认为是在c盘的…...

编程日记 2024/8/21 15:43:01

BFS解决单源最短路问题

目录 迷宫中离入口最近的出口 最小基因变化 单词接龙 为高尔夫比赛砍树 迷宫中离入口最近的出口 题目 思路 使用宽度优先遍历解决这道题&#xff0c;需要一个二维数组标记是否被遍历过&#xff0c;也需要一个队列辅助完成宽度优先遍历&#xff0c;类似于水波纹一样&#x…...

编程日记 2024/8/21 15:42:00

Linux运维、Windows运维常用命令，保存起来当手册用

文章目录 一、centos基本命令1、升级内核到最新版本2、文件句柄数限制优化3、ssh、sftp、scp等远程命令4、find文件查找5、vi命令 二、windows常用操作 一、centos基本命令 1、升级内核到最新版本 # 1、查看内核版本 [rootlocalhost ~]# cat /etc/centos-release CentOS Linu…...

编程日记 2024/8/21 15:40:59

FTP协议-匿名用户登录 从0到1

前言 日常大家可能接触web漏洞比较多而对其他端口及协议不那么了解&#xff0c;其实其他协议漏洞在渗透中也同样重要只是平时可能接触得不多。本文将介绍FTP协议、FTP匿名用户登录及其具体流程分析和自动化利用demo。 FTP简介 FTP是File Transfer Protocol&#xff08;文件传…...

编程日记 2024/8/21 15:39:58

【UltraVNC】私有远程工具VNC机器部署方式

旨在解决监控端非固定IP的计算机A，远程连接受控端非固定IP的计算机B。如果没有独立公网IP，是不能直接远程桌面的，所以需要一个服务器来中转双方的数据。 一、UltraVNC下载和安装 ----------免费开源远程控制工具——UltraVNC 官网：Home - UltraVNC VNC OFFICIAL SITE, R…...

编程日记 2024/8/21 15:33:52

五大无线领夹麦克风误区科普：领夹麦杂音干扰不耐用问题必须规避

在选购无线领夹麦克风的道路上&#xff0c;不少新手因经验不足&#xff0c;容易落入性能低下的产品陷阱。这些麦克风不仅信号不稳定&#xff0c;音质差强人意&#xff0c;甚至在使用一段时间后出现信号衰减、杂音加重等现象。这并非偶然&#xff0c;而是市场中充斥着大量品质参…...

编程日记 2024/8/21 15:31:49

适合金融行业的企业级跨网文件交换系统

在金融领域&#xff0c;文件交换平台的作用不可小觑&#xff0c;它关乎数据的保密性、稳定性&#xff0c;并且必须遵守严格的合规标准。那么&#xff0c;一个适合金融业跨网文件交换的系统应该具备哪些特质&#xff0c;又是如何满足这些需求的呢&#xff1f;镭速跨网文件交换系…...

编程日记 2024/8/21 15:30:48

vba发邮件的几种方法：新人如何快速上手？

vba发邮件的几种方法有哪些&#xff01;vba自动化邮件发送技巧&#xff01; 对于新人来说&#xff0c;快速掌握VBA发邮件的几种方法&#xff0c;不仅可以节省大量时间&#xff0c;还能提高工作质量。AokSend将详细介绍几种常见的VBA发邮件的方法&#xff0c;帮助新人快速上手&…...

编程日记 2024/8/21 15:26:42

豆瓣评分8.7！Python pandas创始人亲码的数据分析入门手册！

在众多解释型语言中&#xff0c;Python最大的特点是拥有一个巨大而活跃的科学计算社区。进入21世纪以来&#xff0c;在行业应用和学术研究中采用python进行科学计算的势头越来越猛。 近年来&#xff0c;由于Python有不断改良的库(主要是pandas)&#xff0c;使其成为数据处理任…...

编程日记 2024/8/21 15:25:41

关于linux上root连接mysql时遇到的一点小问题以及rsync通过ssh的文件同步传输以及免密码传输的实现

一、关于linux上root连接mysql时遇到的一点小问题 今天因为工作需要&#xff0c;需要使用root连接一下很久没有连接过的mysql服务器了&#xff0c;一看找不到root密码了&#xff0c;记得当时我在搭建整个mysql主从的时候&#xff0c;我明明把root密码记录在了txt文件上的&#…...

编程日记 2024/8/21 15:21:36

一、Socket介绍（也叫套接字）

一、定义 通过IP地址或者端口 将两个电脑连接起来&#xff1b; Socket是网络通信最常用的&#xff0c;除了这个还有HTTP&#xff1b; Http是一个弱联网&#xff1b;Socket用于长连接&#xff0c;使用的是Tcp&#xff1b; 除了这个还有一个SuperSocket&#xff0c;是对Socket…...

编程日记 2024/8/21 15:19:34

虚拟现实技术的发展现状如何？

虚拟现实&#xff08;VR&#xff09;技术自2016年被广泛认为是元年之后&#xff0c;经历了快速增长和随后的调整期。目前&#xff0c;VR行业正处于快速发展期&#xff0c;技术不断进步&#xff0c;应用场景持续拓展。2024年VR技术发展现状概述&#xff1a; 1、行业发展阶段&am…...

编程日记 2024/8/21 15:18:34

实时美颜技术的实现：视频美颜SDK与直播美颜工具的最佳实践

视频美颜SDK与直播美颜工具的诞生&#xff0c;为主播美颜一需求提供了技术支撑。接下来&#xff0c;笔者将深入探讨实时美颜技术的实现及其在视频美颜SDK与直播美颜工具中的最佳实践。 一、实时美颜技术的核心原理 具体来说&#xff0c;主要包括以下几个步骤&#xff1a; 1.…...

编程日记 2024/8/21 15:17:33

Java中的司机抢单实现：并发问题与解决方案

文章目录 司机抢单的基础实现乐观锁解决并发问题 总结 在共享经济的浪潮中&#xff0c;像滴滴打车这样的服务已经成为我们生活中不可或缺的一部分。对于司机和平台来说&#xff0c;抢单是一个关键环节&#xff0c;如何在保证系统高效运行的同时&#xff0c;确保抢单过程的公平与…...

编程日记 2024/8/21 15:15:29

2、Unity【基础】Mono中的重要内容

Unity基础 MonoBehavior中的重要内容 文章目录 Mono中的重要内容1、延迟函数1、延迟函数概念2、延迟函数使用3、延迟函数受对象失活销毁影响思考1 利用延时函数实现计时器思考2 延时销毁 2、协同程序1、Unity是否支持多线程2、协同程序概念3、协同程序和线程的区别4、协程的使用…...

编程日记 2024/8/21 15:14:28

C++11：右值引用、移动语义和完美转发

目录 前言 1. 左值引用和右值引用 2. 引用范围 3. 左值引用的缺陷 4. 右值引用的作用 5. 右值引用的深入场景 6. 完美转发 总结 前言 C11作为一次重大的更新&#xff0c;引入了许多革命性的特性&#xff0c;其中之一便是右值引用和移动语义。本文将深入探讨其中引入的…...

编程日记 2024/8/21 15:13:27

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2026/2/4 16:43:10

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/1/29 20:04:46

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2026/1/27 19:36:39