4.1 CSS概述
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容显示方式的样式语言。它与HTML一起使用，通过分离内容与样式，提供更高效的网页设计和维护。CSS的主要作用是控制网页的布局、颜色、字体、间距等视觉表现。
1.CSS的基本概念
1. 选择器（Selector）：用于指定HTML元素，决定样式应用在哪些元素上。常见选择器有：
元素选择器（如 p）：选择所有 <p> 元素。
类选择器（如 .class）：选择具有特定类的元素。
ID选择器（如 id）：选择具有特定ID的元素。
组合选择器（如 div > p）：选择父子关系等特定结构的元素。
2. 属性与值（Property & Value）：CSS通过指定属性和值来定义样式。属性决定了元素的哪一部分将被修改，值则规定了属性的具体样式。例如：
css
color: blue; / 设置文本颜色为蓝色 /
fontsize: 16px; / 设置字体大小为16像素 /
3. 层叠性（Cascading）：当多个样式同时作用于一个元素时，CSS使用“层叠”规则决定哪一个样式优先应用。一般情况下，优先级从高到低为：
内联样式（直接写在HTML元素内，<div style="color: red;">）
ID选择器
类选择器和属性选择器
元素选择器
4. 继承（Inheritance）：某些CSS属性（如字体、颜色）会被子元素继承，而另一些属性（如边距和背景）则不会。
2. CSS的工作方式
CSS可以通过三种方式应用到HTML文档中：
1. 内联样式（Inline Styles）：直接在HTML元素的style属性中写样式。
html
<p style="color: red;">This is a red text.</p>
2. 内部样式表（Internal Stylesheet）：在HTML文档的<head>部分中使用<style>标签编写样式。
html
<style>
p {
color: red;
}
</style>
3. 外部样式表（External Stylesheet）：通过链接外部CSS文件，这也是推荐的方式，尤其是当样式需要在多个页面间共享时。
html
<link rel="stylesheet" href="styles.css">
3. 常见的CSS属性
颜色和文本样式：
color：文本颜色
fontfamily：字体类型
fontsize：字体大小
textalign：文本对齐
盒模型（Box Model）：
width、height：宽度和高度
margin：外边距
padding：内边距
border：边框
布局：
display：定义元素的显示类型（如block、inline、flex等）
position：元素的定位方式（如relative、absolute等）
float 和 clear：控制元素的浮动布局
响应式设计
CSS还可以通过媒体查询（Media Queries）实现响应式设计，适应不同设备的屏幕大小和分辨率：
css
@media (maxwidth: 600px) {
body {
backgroundcolor: lightblue;
}
}通过使用CSS，开发者可以使网页内容以更丰富、灵活的形式呈现。
4.2 CSS语法基础
CSS的语法基础相对简单易学。每条CSS规则由选择器（selector）和声明块（declaration block）组成，声明块包含一个或多个属性和值的对。这些规则共同定义了页面中元素的外观。
1. CSS规则的基本结构
css
selector {
property: value;
}选择器（selector）：用于指定要应用样式的HTML元素。可以是元素名称、类名、ID，或组合选择器等。
属性（property）：表示你想要改变元素的哪个样式特征，如颜色、字体、边距等。
值（value）：给出的具体样式值，如red、16px等。
2. 选择器
CSS选择器用于选取网页中的HTML元素，以便对它们应用样式。
元素选择器：应用于所有指定标签的元素。
css
p {
color: blue; / 选中所有<p>元素，将文本颜色设置为蓝色 /
}
类选择器：以点号（.）开头，应用于具有特定类的元素。可以应用于多个元素。
css
.example {
fontsize: 20px; / 选中所有带有 class="example" 的元素 /
}
ID选择器：以井号（）开头，应用于具有唯一ID的元素。ID在一个页面中应该是唯一的。
css
header {
backgroundcolor: gray; / 选中具有 id="header" 的元素 /
}
组合选择器：
后代选择器：选取嵌套在另一个元素中的元素。
css
div p {
color: green; / 选中 <div> 元素内的所有 <p> 元素 /
}
群组选择器：对多个选择器应用相同样式。
css
h1, h2, p {
fontfamily: Arial; / 选中所有 <h1>, <h2> 和 <p> 元素，应用相同字体 /
}
3. 声明块
声明块由一对花括号 {} 包围，里面包含一条或多条样式声明。每条声明由属性（property）和对应的值（value）组成，用冒号 : 分隔，声明之间用分号 ; 分隔。
css
selector {
property1: value1;
property2: value2;
}例如：
css
p {
color: blue;
fontsize: 16px;
}这段代码表示所有<p>元素的文本颜色为蓝色，字体大小为16像素。
4. 注释
在CSS中，注释不会被浏览器执行，它们仅供开发者使用，用于解释代码。注释的语法是：
css
/ 这是一个注释 /例如：
css
/ 设置段落的样式 /
p {
color: red; / 文本颜色为红色 /
}5. 单位
在CSS中，许多属性需要指定单位，如长度、大小、时间等。常用的单位包括：
长度单位：
px（像素）：绝对单位，适合用于精确定位和大小。
em 和 rem：相对单位，em基于父元素的字体大小，rem基于根元素的字体大小。
%（百分比）：基于父元素的大小进行相对缩放。
例如：
css
h1 {
fontsize: 2em; / 字体大小为父元素字体的两倍 /
}颜色单位：
color: red;（使用颜色名称）
color: ff0000;（使用十六进制颜色值）
color: rgb(255, 0, 0);（使用RGB颜色模式）
color: rgba(255, 0, 0, 0.5);（使用带透明度的RGBA颜色模式）
6. 示例
综合示例，以下CSS规则选择了具有类名为box的所有元素，并应用了一些样式：
css
.box {
width: 200px; / 宽度 /
height: 100px; / 高度 /
backgroundcolor: lightblue; / 背景色 /
border: 1px solid black; / 边框 /
margin: 20px; / 外边距 /
padding: 10px; / 内边距 /
fontsize: 14px; / 字体大小 /
}这段代码会将所有具有box类的元素渲染为带有特定大小、边距、边框和背景颜色的矩形块。
4.3 CSS引入方式
在HTML文档中，CSS可以通过三种主要方式引入，分别是内联样式、内部样式表和外部样式表。每种方式都有其适用的场景和优缺点。
1. 内联样式（Inline Styles）
内联样式直接写在HTML元素的style属性中，适用于仅对单个元素设置样式的情况。这种方式不推荐用于大型项目，因为样式与内容混合，不便于维护和重用。
语法：
html
<p style="color: red; fontsize: 16px;">This is a red text.</p>优点：
适合快速应用样式到特定的HTML元素上。
在处理动态样式时（如通过JavaScript），内联样式有时是便捷的选择。
缺点：
难以维护，尤其是当页面上有大量样式时。
破坏了HTML结构与样式的分离。
2. 内部样式表（Internal Stylesheet）
内部样式表是将CSS规则写在HTML文档的<head>标签内，通过<style>标签进行定义。适用于小型页面或仅针对当前页面的样式。
语法：
html
<head>
<style>
p {
color: blue;
fontsize: 16px;
}
</style>
</head>
<body>
<p>This is a blue text.</p>
</body>优点：
所有样式集中在一个地方（<head>部分），管理页面的样式比内联样式方便。
适合用于页面独立的样式定义。
缺点：
样式仅适用于当前HTML页面，无法跨页面复用。
当样式较多时，HTML文件会显得冗长，影响代码可读性。
3. 外部样式表（External Stylesheet）
外部样式表将CSS代码保存在单独的.css文件中，并通过<link>标签在HTML文件中引用。它是推荐的方式，尤其是当多个页面使用相同的样式时。
语法：
HTML文件：
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is styled by an external CSS file.</p>
</body>CSS文件（styles.css）：
css
p {
color: green;
fontsize: 18px;
}优点：
样式与内容完全分离，提升代码的可读性和可维护性。
可以在多个页面之间共享样式，提高样式的复用性。
通过单个CSS文件即可控制多个页面的样式，使得全站的风格一致。
缺点：
需要额外的HTTP请求来加载CSS文件，可能会稍微影响页面的加载速度（可以通过CSS压缩和缓存优化）。
4. 引入CSS的其他方式
@import规则：除了使用<link>标签引入外部CSS文件，还可以通过@import规则在CSS文件中引入其他CSS文件。
语法：
css
@import url('anotherstylesheet.css');
优点：
可以在一个CSS文件中导入多个样式表，实现模块化管理。
缺点：
与<link>标签相比，@import的加载速度略慢，可能会延迟样式的渲染。
选择引入方式的建议
内联样式适用于快速调整个别元素的样式，但应尽量避免频繁使用。
内部样式表适合小型页面或单页应用，尤其是样式不多且不需要复用时。
外部样式表是推荐的标准方式，适用于中大型项目，样式独立于HTML，有助于提高代码的复用性、可维护性和结构的清晰度。
4.4 CSS的属性继承
在CSS中，继承是一种机制，允许某些属性从父元素传递给子元素。通过继承，子元素可以自动获取父元素的某些样式，而无需显式地为每个子元素重复定义相同的样式。这种特性简化了样式的定义，增强了CSS的可维护性。
1. 可继承的属性
并非所有CSS属性都是可继承的。通常，涉及到文本样式和字体的属性是可继承的，比如：
color（颜色）
fontfamily（字体）
fontsize（字体大小）
fontweight（字体粗细）
fontstyle（字体样式）
lineheight（行高）
textalign（文本对齐）
visibility（可见性）
例子：
html
<div style="color: blue;">
<p>This text is blue because the color is inherited from the parent div.</p>
</div>在这个例子中，<div>元素设置了color: blue，而<p>元素没有显式地设置颜色属性。由于color是可继承的，<p>中的文本自动继承了父级<div>的颜色。
2. 不可继承的属性
大多数布局和盒模型相关的属性是不可继承的，比如：
margin（外边距）
padding（内边距）
border（边框）
width（宽度）
height（高度）
background（背景）
例子：
html
<div style="margin: 20px;">
<p>This paragraph does not inherit the margin of the parent div.</p>
</div>在这个例子中，虽然<div>设置了margin: 20px，但它的子元素<p>并没有继承这个外边距，因为margin是不可继承的属性。
3. 强制继承和阻止继承
inherit关键字：即使某些属性不可继承，你也可以通过inherit关键字强制让子元素继承父元素的值。
例子：
css
p {
margin: inherit; / 强制继承父级元素的 margin /
}
initial关键字：将某个属性的值重置为浏览器的默认值，而不是继承父元素的值。
例子：
css
p {
color: initial; / 将颜色重置为浏览器默认的颜色（通常是黑色） /
}
unset关键字：这个关键字会根据属性是否可继承来决定行为。如果属性是可继承的，unset会使其表现为inherit；如果属性是不可继承的，则表现为initial。
例子：
css
p {
color: unset; / 可继承属性，表现为 inherit /
margin: unset; / 不可继承属性，表现为 initial /
}
4. 继承的应用场景
继承在CSS中主要用于简化和统一样式。例如，网页的全局字体颜色、字体样式可以通过继承实现：
css
body {
fontfamily: Arial, sansserif;
color: 333;
}
h1, h2, p {
/ 这些元素将自动继承 body 的 fontfamily 和 color /
}在这个例子中，body元素设置了全局的字体和颜色，所有子元素如<h1>、<h2>、<p>将自动继承这些样式，不需要为每个元素重复定义。
5. 继承的限制
虽然继承为样式的统一提供了方便，但有时也会带来问题。尤其在一些需要独立定义的样式中，继承可能导致不必要的样式被传播到子元素。因此，在开发时要合理利用继承，同时也要避免不必要的样式污染。
总结：CSS中的继承机制可以使样式代码更加简洁，减少重复，但并不是所有属性都能继承。通过使用inherit、initial和unset关键字，可以灵活控制属性的继承行为。
4.5 CSS继承与层叠
在CSS中，继承和层叠是两种核心机制，用于决定一个元素的最终样式。这两者共同影响了页面上元素样式的展示，理解它们有助于解决样式冲突和优化CSS代码。
1、CSS继承
继承是指某些属性会自动从父元素传递给子元素，子元素不用显式地定义这些属性即可获得父元素的样式。继承的作用是简化代码，减少样式的重复定义。
继承的关键点：
1. 可继承的属性：通常与文本样式相关，如color、fontsize、fontfamily等。
2. 不可继承的属性：一般与布局、盒模型相关，如margin、padding、border等。
3. 可以通过inherit关键字强制继承父级样式，或通过initial和unset重置样式值。
2、CSS层叠（Cascade）
层叠是CSS名称中的"C"（Cascading）的部分，它决定了当多个样式规则应用于同一个元素时，哪些规则将生效。CSS层叠遵循一定的规则，来处理样式冲突，最终确定元素的显示样式。
层叠的基本规则：
1. 样式来源：
浏览器默认样式：每个浏览器都有默认的样式表，用于为没有定义样式的元素提供默认的外观。
用户样式：用户可以定义自己的样式表覆盖网站样式。
开发者样式：开发者在CSS中定义的样式表。
2. 优先级：当多个规则冲突时，优先级决定哪个规则生效。优先级由四个部分构成，依次为：
行内样式：使用style属性直接在HTML元素上设置的样式，优先级最高。
ID选择器：ID选择器的优先级比类选择器和标签选择器更高。
类、伪类、属性选择器：比标签选择器的优先级更高。
元素（标签）选择器、伪元素：优先级最低。
优先级的数值计算：
行内样式：优先级为 1000
ID选择器：优先级为 100
类选择器、伪类、属性选择器：优先级为 10
元素选择器、伪元素：优先级为 1
示例：
css
example { color: red; } / 优先级 100 /
.example { color: blue; } / 优先级 10 /
p { color: green; } / 优先级 1 /
3. 层叠次序：
当不同样式的优先级相同时，后定义的样式会覆盖先定义的样式。CSS的规则是“就近原则”，即最后写入的样式优先。
4. !important声明：
!important是一个特殊的声明，用来提高样式的优先级。带有!important的规则会覆盖其他任何没有!important的规则，即使它的优先级较低。
示例：
css
p { color: blue !important; } / 优先级最高，即使有其他样式规则也会被覆盖 /
3、继承与层叠的关系
继承是从父元素向子元素传递某些样式的机制，而层叠则是当多个样式规则应用于同一元素时，确定哪个规则生效的机制。
当继承的样式和直接应用到元素的样式发生冲突时，层叠规则会决定哪个样式最终生效。
示例：
html
<style>
div {
color: green; / 父元素样式 /
}
p {
color: red; / 子元素直接设置的样式 /
}
</style>
<div>
<p>This text will be red due to the cascade.</p>
</div>
在这个例子中，虽然<div>中定义了color: green，但<p>元素的颜色最终会显示为红色，因为<p>的样式规则优先于继承的父元素样式。
4、层叠示例
假设我们有如下HTML结构：
html
<div id="container" class="box">
<p>This is a paragraph.</p>
</div>以下是CSS样式：
css
container {
color: red; / 优先级 100 /
}
.box {
color: blue; / 优先级 10 /
}
p {
color: green; / 优先级 1 /
}
p {
color: purple !important; / 使用了重要性声明 /
}分析：
container定义了color: red，优先级为 100。
.box定义了color: blue，优先级为 10。
p标签定义了color: green，优先级为 1。
但由于p的第二条样式规则中使用了!important，因此最终<p>中的文本会显示为紫色。
总结：
继承使子元素自动获得父元素的某些样式，简化了样式的编写。
层叠决定了当多个样式冲突时，哪个样式最终生效。通过优先级、层叠次序、!important等机制，CSS确保了样式的应用顺序和一致性。
4.6 元素类型
在HTML和CSS中，元素被分为不同的类型，主要是根据它们在页面布局中的表现形式来区分的。了解元素类型有助于更好地控制布局和样式。主要的元素类型包括以下几种：
1. 块级元素（Blocklevel Element）
块级元素是独占一行，且宽度默认填满其父容器的元素。块级元素通常用于结构化文档内容，例如段落、标题、列表等。
特点：
独占一行，垂直排列。
默认宽度为父容器的100%。
可以包含其他块级元素和行内元素。
宽度、高度、外边距（margin）和内边距（padding）均可生效。
常见的块级元素：
<div>：通用的块级容器，没有语义。
<p>：段落。
<h1>到<h6>：标题元素。
<ul>、<ol>、<li>：列表和列表项。
<section>、<article>、<aside>、<header>、<footer>：语义化的块级元素。
例子：
html
<div>
<p>This is a blocklevel element.</p>
<p>This is another blocklevel element.</p>
</div>在此例中，<p>元素作为块级元素，垂直排列并独占每一行。
2. 行内元素（Inline Element）
行内元素不会独占一行，它们会与其他行内元素在同一行内显示，宽度与内容相匹配。行内元素通常用于标记文本内容的一部分。
特点：
不会自动换行，水平排列。
仅占据其内容的宽度，不会填满父容器。
宽度、高度、外边距和内边距的水平部分有效，垂直部分无效（除非使用display: block或display: inlineblock进行修改）。
不能包含块级元素，但可以包含其他行内元素。
常见的行内元素：
<span>：通用的行内容器，没有语义。
<a>：超链接。
<strong>：表示强调的文本。
<em>：表示加重语气的文本。
<img>：图片。
<input>、<button>：表单元素。
例子：
html
<p>This is an <a href="">inline link</a> inside a paragraph.</p>在这个例子中，<a>元素是行内元素，它不会打断段落的流式布局，且与文本一起显示在一行中。
3. 行内块级元素（Inlineblock Element）
行内块级元素的表现介于块级元素和行内元素之间。它像行内元素一样水平排列，但可以像块级元素一样设置宽度、高度、外边距和内边距。
特点：
像行内元素一样水平排列，不会独占一行。
可以设置宽度和高度。
外边距和内边距的水平和垂直部分都有效。
常见的行内块级元素：
<img>：图片元素。
<button>：按钮元素。
<input>：表单输入框。
任何通过CSS设置display: inlineblock的元素。
例子：
html
<span style="display: inlineblock; width: 150px; height: 50px; backgroundcolor: lightblue;">
This is an inlineblock element.
</span>在这个例子中，<span>元素被设置为inlineblock，因此它既可以和其他元素保持在同一行，也可以设置宽度和高度。
4. 可替换元素（Replaced Element）
可替换元素的内容不是由CSS控制的，而是由外部资源决定。这类元素通常具有默认尺寸，或者其大小由所包含的内容决定。
特点：
由浏览器根据其内容替换的占位元素。
常常可以通过CSS设置大小，但它们的实际内容（如图片或表单元素）由外部决定。
常见的可替换元素如<img>、<video>、<iframe>等。
常见的可替换元素：
<img>：图片。
<video>：视频。
<iframe>：嵌入其他网页。
<object>：嵌入外部资源，如插件、SVG等。
例子：
html
<img src="image.jpg" alt="An image">在这个例子中，<img>是可替换元素，显示的图像由src属性指向的外部资源决定。
5. 自定义元素类型
通过CSS的display属性，开发者可以将元素的显示方式从默认的行内或块级形式转换为另一种形式。
常见的display值：
block：将元素作为块级元素显示。
inline：将元素作为行内元素显示。
inlineblock：将元素作为行内块级元素显示。
none：隐藏元素，不占据任何页面空间。
例子：
html
<p style="display: inlineblock; width: 100px;">This is now an inlineblock element.</p>通过display: inlineblock，<p>元素从块级元素变为行内块级元素，能够设置宽度且不再独占一行。
6. 容器元素（Container Elements）
某些元素，如<div>和<span>，在HTML中没有语义，仅仅用作容器，供开发者进行布局和样式设计。这些元素默认没有任何视觉效果，需要通过CSS定义其样式。
<div>：默认是块级元素，常用于布局结构。
<span>：默认是行内元素，常用于包裹文本中的一部分以应用样式。
例子：
html
<div class="container">
<span>This is a span inside a div.</span>
</div><div>作为块级容器，常用于包裹内容，而<span>作为行内容器则用于包裹行内文本。
总结：
块级元素：独占一行，通常用于结构化文档。
行内元素：与其他元素共享一行，通常用于内联内容。
行内块级元素：既可以水平排列，也可以设置宽度和高度。
可替换元素：由外部资源决定内容，如图片或视频。
自定义元素：通过CSS的display属性可以改变元素的显示方式。
本章习题
习题1
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Hyperlink Example</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.container {
background-color: #FF99CC; /* 背景颜色 */
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: flex-end; /* 垂直底部对齐 */
padding: 20px;
position: relative;
width: 100%;
height: 50%; /* 占据一半的高度 */
}
.container a {
color: #FFF; /* 链接的默认文字颜色 */
font-family: 'Arial Black', sans-serif; /* 字体 */
font-size: 60px; /* 字体大小 */
text-decoration: none; /* 移除下划线 */
}
.container a:hover {
color: #FF00FF; /* 悬停时的文字颜色 */
}
.container a:active {
color: #FF00CC; /* 鼠标按下时的文字颜色 */
}
hr {
border: 0;
height: 1px;
background-color: #666; /* 分割线颜色 */
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<a href="#">WELCOME</a> <!-- WELCOME超链接 -->
</div>
<hr size="5" color="#FF99CC" width="100%" />
<p align="center">网页制作教程 Copyright © 广州南方职业学院</p>
</body>
</html>
习题二
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司简介</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.8;
margin: 20px;
background-color: #f5f5f5; /* 设置背景为浅灰色以突出白色导航栏 */
}
/* 顶部导航栏和Logo的样式 */
.header {
background-color: white; /* 背景白色 */
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
position: sticky;
top: 0;
z-index: 1000;
}
/* Logo样式 */
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px; /* Logo的高度 */
margin-right: 15px; /* Logo和文本之间的间距 */
}
/* 导航栏样式 */
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px; /* 导航栏各项的间距 */
}
nav ul li {
position: relative;
}
nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 10px 15px;
}
nav ul li a:hover {
color: #0033ff; /* 悬停时的文本颜色 */
}
/* 子菜单样式 */
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}
nav ul li ul li {
white-space: nowrap; /* 子菜单项宽度根据内容调整 */
}
nav ul li:hover ul {
display: block; /* 悬停时显示子菜单 */
}
nav ul li ul li a {
padding: 10px 20px;
}
/* 二级水平导航栏样式 */
.secondary-nav {
background-color: #f9f9f9; /* 背景为浅灰色 */
padding: 10px;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.secondary-nav ul {
list-style: none;
display: flex;
gap: 15px;
justify-content: center;
padding: 0;
}
.secondary-nav ul li a {
text-decoration: none;
color: #333;
padding: 10px 15px;
font-weight: bold;
}
.secondary-nav ul li a:hover {
color: #0033ff; /* 悬停时变蓝色 */
}
h2 {
font-size: 20px;
margin-top: 20px;
}
hr {
border: none;
height: 2px;
background-color: #0033ff;
margin: 10px 0;
}
p {
text-indent: 2em;
}
ol {
padding-left: 20px;
margin-top: 10px;
}
li {
margin-bottom: 10px;
}
.bold-text {
font-size: 18px;
font-weight: bold;
text-indent: 0;
}
</style>
</head>
<body>
<!-- 顶部导航栏和Logo -->
<div class="header">
<div class="logo">
<img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="公司Logo"> <!-- Logo图片 -->
<span>公司名称</span>
</div>
<nav>
<ul>
<li><a href="#">手机</a>
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">折叠屏手机</a></li>
<li><a href="#">5G手机</a></li>
</ul>
</li>
<li><a href="#">笔记本</a>
<ul>
<li><a href="#">轻薄本</a></li>
<li><a href="#">游戏本</a></li>
</ul>
</li>
<li><a href="#">平板</a>
<ul>
<li><a href="#">安卓平板</a></li>
<li><a href="#">Windows平板</a></li>
</ul>
</li>
<li><a href="#">解决方案</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
</div>
<!-- 水平导航栏 -->
<div class="secondary-nav">
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司治理</a></li>
<li><a href="#">可持续发展</a></li>
<li><a href="#">网络安全</a></li>
<li><a href="#">管理层信息</a></li>
<li><a href="#">债券投资者关系</a></li>
<li><a href="#">出版物</a></li>
</ul>
</div>
<hr>
<h2>公司简介</h2>
<p>华为是全球领先的ICT（信息与通信）基础设施和智能终端供应商，致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。我们在通信网络、IT、智能终端和云服务等领域为客户提供竞争力、安全可信赖的产品、解决方案和服务。与生态伙伴开放合作，持续为客户创造价值，释放个人潜力，丰富家庭生活，激发组织创新。华为坚持围绕客户需求持续创新，加大基础研究投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区。</p>
<h2>我们为世界带来了什么？</h2>
<p class="bold-text">为客户创造价值</p>
<p>华为和运营商一起，在全球创建了1,500多张网络，帮助世界超过三分之一的人口实现联接。华为携手合作伙伴，为政府及公共事业机构、金融、能源、交通、制造等企业客户，提供开放、灵活、安全的端管云协同ICT基础设施平台，推动行业数字化转型；为云服务客户提供稳定可靠、安全可信赖和可持续发展的云服务。华为智能终端和智能手机，正在帮助人们享受高品质的数字工作、生活和娱乐体验。</p>
<p class="bold-text">推进产业良性发展</p>
<p>华为主张开放、合作、共赢，与客户、合作伙伴及友商合作创新，扩大产业价值，形成良性的产业生态系统。华为加入了360多个标准组织、产业联盟和开源社区，积极参与和支持主流标准的制定。合作共赢的生态圈，我们面向云计算、NFV/SDN、5G等新兴热点领域，与产业伙伴分工协作，推动产业持续良性发展。</p>
<p class="bold-text">促进经济增长</p>
<p>华为不仅为所在国家带来直接的税收贡献，促进当地就业，形成产业链带动效应。更重要的是通过创新的ICT解决方案打造数字化引擎，推动各行各业的数字化转型，促进经济增长，提升人们的生活质量和福祉，推动社会的可持续发展。</p>
<p class="bold-text">支持公平和教育</p>
<p>作为负责任的企业公民，华为致力于消除全球数字鸿沟。在珠峰南坡和北极圈内，在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场，都有华为人的身影。推进绿色、低碳的环保理念，从产业规划、设计、研发、生产、交付以及运维，华为向客户提供领先的节能环保产品和解决方案。</p>
<p class="bold-text">培养本地人才</p>
<p>华为的“未来种子”项目已经覆盖108个国家和地区，帮助培养本地ICT人才，推动知识迁移，提高人们对于ICT行业的了解和兴趣，并鼓励各国及地区参与到建设数字化社区的工作中。</p>
<p class="bold-text">为奋斗者提供舞台</p>
<p>华为坚持“以奋斗者为本”，以责任贡献来评价员工和选拔干部。为员工提供了全球化发展平台，与世界对话的机会。使大量年轻人有机会担当重任，快速成长，也使得十几万员工通过个人的能力，收获了合理的回报与值得回味的人生经历。</p>
<h2>我们坚持什么？</h2>
<p>华为始终坚持开放、合作、创新的理念，与全球客户和合作伙伴共同构建安全、稳定、可靠的数字生态系统。我们将持续以技术创新驱动社会进步，为未来的数字世界构建高效的ICT基础设施。</p>
</body>
</html>