网站开发师培训,网站建设进程表,网页游戏排行榜2023,茌平网站建设菜谱制作目录
任务要求
任务讲解
源码:
详细讲解
html部分
CSS部分 任务要求 页面结构: 创建一个基本的 HTML 页面#xff0c;页面标题为“我的个人简介”。页面内容分为以下四个部分#xff1a; 顶部导航栏: 包含至少三个导航链接#xff0c;例如#xff1a;“主页”、“关于… 目录
任务要求
任务讲解
源码:
详细讲解
html部分
CSS部分 任务要求 页面结构: 创建一个基本的 HTML 页面页面标题为“我的个人简介”。页面内容分为以下四个部分 顶部导航栏: 包含至少三个导航链接例如“主页”、“关于我”、“联系我”。个人信息部分: 包含你的名字作为主要标题。包括一段简短的自我介绍。名言部分: 添加一段你喜欢的名言或座右铭。联系信息部分: 显示你的联系方式如电子邮件地址和社交媒体链接。 样式要求: 顶部导航栏: 背景色为深色你可以选择具体颜色。链接文本的颜色为白色。导航链接水平排列并在鼠标悬停时改变颜色。个人信息部分: 标题名字居中对齐字体大小为 24px字体颜色为你选择的颜色。自我介绍段落左对齐字体大小为 16px字体颜色为黑色。名言部分: 名言段落右对齐使用斜体字体颜色为灰色。联系信息部分: 居中对齐使用无序列表显示每一项联系方式。列表项之间留有适当的间距。 布局: 页面整体居中显示设置合适的页面宽度如 800px。每个部分之间留有适当的上下间距确保页面布局整齐美观。 任务讲解
源码:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的个人简介/titlestyle/* 页面整体居中 */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 classtopa href#主页/aa href#关于我/aa href#联系我/a/nav!-- 姓名部分 --h3 classnameMike/h3!-- 个人介绍部分 --p classintroMike一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业李明辉以其深厚的学术功底和创新思维在人工智能领域取得了突破性成就。/p!-- 名言部分 --p classquote知之愈明则行之愈笃;行之愈笃则知之益明。/p!-- 联系方式部分 --div classcontaulliTEL: 13584203695/liliQQ: 2541036985/liliEMAIL: 8541203593qq.com/li /ul/div
/body
/html详细讲解 html部分
1.顶部导航栏 !-- 顶部导航栏 --nav classtopa href#主页/aa href#关于我/aa 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; 消除无序列表前面的点。
