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

网站建设存在的具体问题超八成搜索网站存在信息泄露问题

news 2025/8/11 3:44:01

网站建设存在的具体问题,超八成搜索网站存在信息泄露问题,wordpress 主题arbitrary,网络营销方式举例目录任务要求任务讲解源码: 详细讲解 html部分 CSS部分任务要求页面结构: 创建一个基本的 HTML 页面，页面标题为“我的个人简介”。页面内容分为以下四个部分： 顶部导航栏: 包含至少三个导航链接，例如：“主页”、“关于…

任务要求

任务讲解

源码:

详细讲解

html部分

CSS部分

任务要求

页面结构:
- 创建一个基本的 HTML 页面，页面标题为“我的个人简介”。
- 页面内容分为以下四个部分：
  1. 顶部导航栏:
    - 包含至少三个导航链接，例如：“主页”、“关于我”、“联系我”。
  2. 个人信息部分:
    - 包含你的名字作为主要标题。
    - 包括一段简短的自我介绍。
  3. 名言部分:
    - 添加一段你喜欢的名言或座右铭。
  4. 联系信息部分:
    - 显示你的联系方式，如电子邮件地址和社交媒体链接。
样式要求:
- 顶部导航栏:
  - 背景色为深色（你可以选择具体颜色）。
  - 链接文本的颜色为白色。
  - 导航链接水平排列，并在鼠标悬停时改变颜色。
- 个人信息部分:
  - 标题（名字）居中对齐，字体大小为 24px，字体颜色为你选择的颜色。
  - 自我介绍段落左对齐，字体大小为 16px，字体颜色为黑色。
- 名言部分:
  - 名言段落右对齐，使用斜体，字体颜色为灰色。
- 联系信息部分:
  - 居中对齐，使用无序列表显示每一项联系方式。
  - 列表项之间留有适当的间距。
布局:
- 页面整体居中显示，设置合适的页面宽度，如 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; 消除无序列表前面的点。