引言
随着互联网的快速发展，网页设计已经成为一项至关重要的技能。HTML和CSS作为网页设计的基石，掌握它们对于想要从事网页设计或开发的人来说至关重要。本文将深入探讨CSS与HTML布局的精髓，并通过实战Demo带你轻松入门网页设计。
HTML基础
1. HTML结构
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它通过一系列标签来定义网页上的文本、图片、链接、列表等元素。

欢迎来到我的网页

这是一个关于HTML和CSS的科普文章。

2. 常用标签

到

：标题标签

：段落标签

：超链接标签

：图片标签

、
、
1. ：无序列表和有序列表标签
   ：用于布局的容器标签
   CSS基础
   1. CSS简介
   CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML文档样式的样式表语言。它通过选择器来指定样式规则，从而控制HTML元素的外观和布局。
   body {
   font-family: Arial, sans-serif;
   background-color: #f8f8f8;
   }
   2. 选择器
   类型选择器：如
   body
   、
   p
   等
   类选择器：如
   .my-class
   等
   ID选择器：如
   #my-id
   等
   3. 属性
   color
   ：字体颜色
   font-size
   ：字体大小
   margin
   ：外边距
   padding
   ：内边距
   width
   ：宽度
   height
   ：高度
   CSS与HTML布局实战
   1. 布局结构
   
   
   
   
   

   我的网站

   欢迎来到我的网站

   这是一个关于HTML和CSS的实战示例。

   
   
   header {
   background-color: #333;
   color: #fff;
   padding: 10px;
   text-align: center;
   }
   nav ul {
   list-style-type: none;
   padding: 0;
   }
   nav ul li {
   display: inline;
   margin-right: 10px;
   }
   main {
   margin: 20px;
   }
   footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 10px;
   }
   2. 响应式设计
   @media screen and (max-width: 600px) {
   nav ul li {
   display: block;
   margin-bottom: 5px;
   }
   }
   总结
   通过本文的学习，相信你已经对CSS与HTML布局有了更深入的了解。通过实战Demo，你可以轻松入门网页设计。在实际应用中，不断练习和积累经验，你将能够设计出更加美观、实用的网页。

   ---