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


目录

任务要求

任务讲解

源码:

详细讲解

html部分

CSS部分


任务要求

  1. 页面结构:

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

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

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

任务讲解

源码:

html 复制代码
<!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.顶部导航栏

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

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

CSS部分

1.页面整体居中

css 复制代码
/* 页面整体居中 */
body {
    width: 800px;
    margin: 0 auto;
}

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

2.顶部导航栏样式

css 复制代码
        /* 顶部导航栏样式 */
        .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. 姓名部分

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

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

4.个人介绍部分

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

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

5.名言部分

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

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

6.联系方式部分

css 复制代码
.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; 消除无序列表前面的点。

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#