【HTML网页制作】这段HTML和CSS代码构建了一个模拟手机界面的简单网页，其中包含了一个导航栏和几个可切换的内容区域。

本文链接：https://blog.csdn.net/2201_76060199/article/details/142313322

这段HTML和CSS代码构建了一个模拟手机界面的简单网页，其中包含了一个导航栏和几个可切换的内容区域。下面是代码的详细解释：

DOCTYPE声明和HTML基础结构：
- <!DOCTYPE html>：声明文档类型为HTML5。
- <html lang="en">：指定文档语言为英语。
- <head>部分包含字符集设置、视口设置、一个空的样式表链接（可能是用于外部字体或图标，但链接地址为空）、内嵌样式和标题。
- <body>部分是页面的主要内容。
主要容器：
- <div class="phone">：模拟手机的容器，具有固定的宽度和高度，圆角边框和内边距。
内容区域：
- 四个<img>标签，每个都具有类content，用于显示不同的页面内容（如首页、工作、博客、关于我们）。其中一个默认有show类，使其初始显示。
- 这些<img>标签的src属性为空，因此实际不会显示任何图片。在实际应用中，应填入有效的图片URL。
导航栏：
- <nav>标签包含一个无序列表<ul>，每个列表项<li>代表一个导航链接，包含图标文字描述。
- 第一个<li>默认有active类，表示它是当前激活的导航项。

全局样式：
- * { box-sizing: border-box; }：确保所有元素的宽度和高度包括内边距和边框。
- body样式设置背景色、字体、布局方式（Flexbox），以及确保页面内容居中。
.phone 容器：
- 设置位置、溢出处理、边框、圆角、高度和宽度。
.content 内容：
- 初始设置为不可见（opacity: 0）