这个HTML示例展示了一个包含基本CSS样式的网页结构。以下是对各部分的详细解释和说明：
HTML结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实践示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #333;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #0779e4 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav {
float: right;
margin-top: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
margin-left: 5px;
}
#showcase {
min-height: 400px;
background: url('showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
section {
padding: 20px;
margin: 20px 0;
background: #fff;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
@media(max-width: 600px) {
nav ul {
text-align: center;
float: none;
}
nav ul li {
display: block;
margin: 0;
}
#showcase h1 {
margin-top: 50px;
font-size: 30px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>学习CSS</h1>
</div>
<nav>
<ul>
<li><a href="#showcase">展示区</a></li>
<li><a href="#section1">部分1</a></li>
<li><a href="#section2">部分2</a></li>
</ul>
</nav>
</div>
</header>
<div id="showcase">
<div class="container">
<h1>欢迎学习CSS</h1>
<p>掌握网页设计的基本技能</p>
</div>
</div>
<section id="section1" class="container">
<h2>部分1</h2>
<p>这是CSS基础知识的第一部分内容。</p>
</section>
<section id="section2" class="container">
<h2>部分2</h2>
<p>这是CSS基础知识的第二部分内容。</p>
</section>
<footer>
<p>学习CSS © 2024</p>
</footer>
</body>
</html>1. 文档类型声明和语言设置
html
<!DOCTYPE html>
<html lang="en"><!DOCTYPE html>声明文档类型为HTML5。<html lang="en">定义文档的语言为英语。
2. 头部信息
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实践示例</title>
<style>
/* CSS样式内容 */
</style>
</head><meta charset="UTF-8">设置文档的字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口，以确保在移动设备上有良好的浏览体验。<title>CSS实践示例</title>设置网页的标题。<style>标签内包含页面的CSS样式。
3. 页面主体
html
<body>
<header>
<div class="container">
<div id="branding">
<h1>学习CSS</h1>
</div>
<nav>
<ul>
<li><a href="#showcase">展示区</a></li>
<li><a href="#section1">部分1</a></li>
<li><a href="#section2">部分2</a></li>
</ul>
</nav>
</div>
</header>
<div id="showcase">
<div class="container">
<h1>欢迎学习CSS</h1>
<p>掌握网页设计的基本技能</p>
</div>
</div>
<section id="section1" class="container">
<h2>部分1</h2>
<p>这是CSS基础知识的第一部分内容。</p>
</section>
<section id="section2" class="container">
<h2>部分2</h2>
<p>这是CSS基础知识的第二部分内容。</p>
</section>
<footer>
<p>学习CSS © 2024</p>
</footer>
</body>
</html>CSS样式
1. 通用样式
css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}body样式设置了全局字体、行高、边距、填充和背景颜色。.container类设置了容器的宽度、居中对齐和隐藏溢出内容。
2. 头部样式
css
header {
background: #333;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #0779e4 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav {
float: right;
margin-top: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
margin-left: 5px;
}header样式设置了背景颜色、文字颜色、上填充、最小高度和底边框。header a样式设置了链接的文字颜色、去掉下划线、全大写和字体大小。nav样式将导航栏浮动到右边，并设置上边距。nav ul去掉了默认的列表样式、边距和填充。nav ul li设置列表项为内联显示，并设置左边距。
3. 展示区样式
css
#showcase {
min-height: 400px;
background: url('showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}#showcase设置了最小高度、背景图片、文字居中对齐和文字颜色。#showcase h1设置了上边距、字体大小和下边距。#showcase p设置了字体大小。
4. 内容部分和页脚样式
css
section {
padding: 20px;
margin: 20px 0;
background: #fff;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}section设置了填充、垂直边距和背景颜色。footer设置了背景颜色、文字颜色、文字居中对齐、上下填充和上边距。
5. 响应式设计
css
@media(max-width: 600px) {
nav ul {
text-align: center;
float: none;
}
nav ul li {
display: block;
margin: 0;
}
#showcase h1 {
margin-top: 50px;
font-size: 30px;
}
}- 使用媒体查询，当屏幕宽度小于600px时，调整导航栏和展示区标题的样式。
nav ul设置了居中对齐，去掉浮动。nav ul li设置列表项为块级显示，并去掉边距。#showcase h1设置了上边距和较小的字体大小。
总结
这个示例展示了一个简单的响应式网页，包括头部、导航栏、展示区、内容部分和页脚，并应用了基本的CSS样式。通过这种方式，展示了如何使用CSS进行布局、样式设置以及响应式设计。