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


目录

任务要求

任务讲解

源码:

详细讲解

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

相关推荐
雯0609~14 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ17 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z22 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5