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

news2024/11/13 14:59:42


目录

任务要求

任务讲解

源码:

详细讲解

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; 消除无序列表前面的点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2058957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机毕业设计选题推荐-二手房价分析与预测-Python爬虫可视化-算法

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

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

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

Ubuntu 22.04 上更换 Node 版本管理器(nvm)的源

在 Ubuntu 22.04 上更换 Node 版本管理器&#xff08;nvm&#xff09;的源&#xff0c;可以通过修改 nvm 的配置文件来实现。以下是更换 nvm 源的步骤&#xff1a; 打开终端。 备份原始配置文件&#xff08;可选&#xff0c;但推荐&#xff09;&#xff1a; mv ~/.nvm/nvm.sh …

计算病理学中的Vision Transformer应用与挑战综述|顶刊精析·24-08-21

小罗碎碎念 这篇论文题为《Vision Transformers for Computational Histopathology》&#xff0c;综述了视觉变换器&#xff08;Vision Transformers, ViTs&#xff09;在计算病理学中的应用&#xff0c;包括图像分类、分割和生存风险回归等任务&#xff0c;并探讨了面临的挑战…

Modbus-TCP——Libmodbus安装和使用(Ubuntu22.04)

1、简介 Modbus是一种通信协议&#xff0c;广泛用于工业自动化和过程控制领域&#xff0c;允许不同设备之间进行数据交换。libmodbus是一个用于 Modbus 协议的开源库&#xff0c;主要用于开发和实现 Modbus 协议的客户端和服务器应用程序。libmodbus 以 C 语言编写&#xff0c…

后端开发刷题 | 合并两个排序的链表

描述 输入两个递增的链表&#xff0c;单个链表的长度为n&#xff0c;合并这两个链表并使新链表中的节点仍然是递增排序的。 数据范围&#xff1a; 0≤n≤1000&#xff0c;−1000≤节点值≤1000 如输入{1,3,5},{2,4,6}时&#xff0c;合并后的链表为{1,2,3,4,5,6}&#xff0c;…

python入门基础知识! 新手必备,看完技术突飞猛进!

基本的类 python最基础、最常用的类主要有int整形&#xff0c;float浮点型&#xff0c;str字符串&#xff0c;list列表&#xff0c;dict字典&#xff0c;set集合&#xff0c;tuple元组等等。int整形、float浮点型一般用于给变量赋值&#xff0c;tuple元组属于不可变对象&#x…

Nginx源码安装与进阶负载均衡

目录 一 web服务介绍 二 Nginx介绍与源码安装 2.1 nginx源码安装 2.2 平滑升级和回滚 三 配置文件详解 3.1 配置文件说明 3.2 全局配置与http模块 3.3 root与alias 3.4 location的介绍 3.5 账户认证 四 高级配置 4.1 nginx 压缩功能 4.2 变量介绍 五 nginx反向代…

【Android】adb devices 出现devices offline的问题

1 问题 adb devices 出现devices offline 2 解决方法 adb kill-serveradb start-server 然后&#xff0c;adb devices查看。 adb devices 问题解决啦。。。&#x1f49b; &#x1f499; &#x1f49c; ❤️ &#x1f49a; &#x1f49b; &#x1f499; &#x1f49c; ❤️…

韩顺平Java-第二十四章:MYSQL基础篇

一 数据库 1 数据库简单原理图 2 使用命令行窗口连接MYSQL数据库 &#xff08;1&#xff09;mysql -h 主机名 -P 端口 -u 用户名 -p密码&#xff1b; &#xff08;2&#xff09;登录前&#xff0c;保证服务启动。 3 MySQL三层结构 &#xff08;1&#xff09;所谓安装MySQL数…

第三期书生大模型实战营 第4关 Llamaindex RAG实践

前置知识 正式介绍检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术以前&#xff0c;大家不妨想想为什么会出现这样一个技术。 给模型注入新知识的方式&#xff0c;可以简单分为两种方式&#xff0c;一种是内部的&#xff0c;即更新模…

ES6笔记总结(Xmind格式):第一天

Xmind鸟瞰图&#xff1a; 简单文字总结&#xff1a; es6知识总结&#xff1a; 新增语法&#xff1a; 1.let声明变量的特点&#xff1a; ①let 没有变量提升 ②在同一作用域下let的变量不能重复声明 ③let声明的变量存在块级作用域 2.const声明…

仿真软件的功能有哪些?仿真软件助力科研与工程领域

仿真软件是一种强大的工具&#xff0c;可以帮助工程师和科学家在虚拟环境中模拟和分析各种现象和系统。它们具有广泛的应用领域&#xff0c;包括工程设计、科学研究、产品开发和决策支持等。 随着科技的飞速发展&#xff0c;仿真软件已成为科研与工程领域中不可或缺的工具。本文…

“2025深圳电子信息展”带您感受科技创新如何改变世界

深圳&#xff0c;这座位于中国南海之滨的城市&#xff0c;自改革开放以来&#xff0c;便以惊人的速度崛起&#xff0c;成为了全球瞩目的经济特区与创新高地。被誉为“中国的硅谷”&#xff0c;深圳不仅是中国科技创新的重要引擎&#xff0c;更是高新技术产业的璀璨明珠&#xf…

洗衣行业在线预约小程序源码系统 源码可二次开发 带源代码包以及搭建部署教程

系统概述 在快节奏的现代生活中&#xff0c;时间成为了人们最宝贵的资源之一。随着科技的飞速发展&#xff0c;各行各业都在积极探索数字化转型&#xff0c;以提升服务效率与用户体验。洗衣行业&#xff0c;作为日常生活中不可或缺的服务领域&#xff0c;也不例外。今天&#…

记一次 SAP BP 编号范围错误引发的一个问题 GET_NRIV_LINE

本来想着循着错误提示去排查&#xff0c;但是还是想看看业务发生了什么&#xff0c;他们的操作是否有问题&#xff0c;不经意间发现 号码段是有问题的&#xff0c;由此大概可以判断是他们编号范围和类型之间的问题 角色和分组是否一致的&#xff0c;如果不一致就发生了以上错误…

roles及项目搭建(thirty-two day)

回顾&#xff1a; playbook 1、调用剧本 ansible-playbook /etc/ansible/playbook/book001.yml 2、编写剧本 --- - hosts: s1remote_user: roottasks:- name: 卸载httpdyum: namehttpd stateabsent- name: 安装nginxyum: namenginx …

知识付费小程序的优势

1. 便捷性&#xff1a;用户可以随时随地通过手机访问小程序&#xff0c;获取所需的知识内容&#xff0c;不受时间和空间的限制。 2. 精准定位&#xff1a;能够根据用户的兴趣、需求和行为数据&#xff0c;为其精准推送符合其需求的知识产品&#xff0c;提高用户满意度和购买转化…

最新专业版Python+PyCharm安装保姆级教程(附安装包+永久插件码)

想入门学习python&#xff0c;那么你的python和pycharm安装好是第一步&#xff01;&#xff01;&#xff01;今天小编详细讲一下安装教程 如果你正准备入门Python并且找不到方向和学习路线的话可以试试我这一份学习方法&#xff0b;籽料呀&#xff01; 点击 领取&#xff08;无…

[数据集][目标检测]集装箱缺陷检测数据集VOC+YOLO格式4127张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4127 标注数量(xml文件个数)&#xff1a;4127 标注数量(txt文件个数)&#xff1a;4127 标注…