一、使用的是PyCharm来敲写的代码（布局）
二、主要的html代码的介绍
这段代码展示了如何使用HTML和CSS创建一个结构化的网页，包含导航栏、新闻内容、图片展示和页脚信息。通过引入外部CSS文件，可以进一步美化和布局这些元素。
-
HTML5 文档结构：
-
使用
<!DOCTYPE html>声明文档类型为HTML5。 -
使用
<html>,<head>,<body>等标签构建基本的文档结构。
-
-
字符编码：
-
使用
<meta charset="UTF-8">指定文档的字符编码为UTF-8，确保页面能正确显示各种字符。
-
-
外部资源引入：
-
使用
<link>标签引入外部CSS文件 (style04.css)，用于定义页面的样式。
-
-
语义化标签：
-
使用
<div>标签进行页面布局，虽然<div>是一个通用容器，但结合id和class属性可以实现语义化的布局。 -
使用
<h2>和<p>标签来定义标题和段落，增强内容的语义化。
-
-
CSS 类和 ID：
-
使用
class和id属性为元素添加样式标识符。class可以用于多个元素，而id是唯一的。
-
-
图像嵌入：
-
使用
<img>标签嵌入图片，并通过src属性指定图片的路径。
-
-
文本内容：
-
使用
<span>标签包裹文本内容，通常用于对文本进行样式化或操作。
-
-
页面布局：
-
使用
<div>标签进行页面布局，将页面分为不同的部分（如导航栏、新闻部分、展览部分、页脚等）。
-
-
HTML 实体：
-
使用
表示不换行空格，用于在文本中插入空格。
-
-
响应式设计：
-
虽然没有直接使用媒体查询，但通过合理的HTML结构和CSS样式，可以为响应式设计打下基础。
-
-
SEO 基础：
-
使用
<title>标签定义页面标题，有助于搜索引擎优化（SEO）。
-
-
页面结构：
-
将页面内容分为头部（导航栏）、主体（新闻和展览部分）、页脚（版权信息）和附加内容（二维码），这种结构有助于提高页面的可读性和可维护性。
-
这些知识点涵盖了HTML5的基本结构、语义化标签、CSS样式引入、图像嵌入、文本处理、页面布局和基本的SEO优化等内容。通过这些知识点的结合，可以构建一个结构清晰、内容丰富的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱家居</title>
<link href="css/style04.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- head begin-->
<div id="bg">
<div class="nav">
<span class="margin_more">网站首页</span>
<span>床和床垫</span>
<span>卧室纺织品</span>
<span>灯具照明</span>
<span class="search">输入商品名称</span>
</div>
</div>
<!-- head end-->
<!--new begin-->
<div id="news">
<div class="news_con">
<img src="images/news1.jpg" />
<h2 class="one">BEST 贝达</h2>
<p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="images/news2.jpg" />
<h2 class="one">PONG 波昂</h2>
<p class="two">当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造 PONG 波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p>
<p class="shadow"></p>
</div>
<div class="news_con">
<img src="images/news3.jpg" />
<h2 class="one">GUNDE 冈德尔</h2>
<p class="two">一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，也很安全。它可以承受100公斤的重量，但本身却很轻盈。</p>
<p class="shadow"></p>
</div>
</div>
<!--new end-->
<!--exhibition begin-->
<div id="exhibition">
<div class="pic">
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</div>
</div>
<!--exhibition end-->
<!-- footer begin-->
<div id="footer">爱家居版权所有2016-2026 京 ICP 备22222222号 京公网安备 2222222222222222</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="images/erweima.png" />
</div>
<!--tree end-->
</body>
</html>三、具体实现的CSS代码（有详解）：
/* 全局样式重置，去除所有元素的外边距、内边距、轮廓和边框 */
* {
margin: 0;
padding: 0;
outline: none;
border: 0;
}
/* 设置页面整体字体和背景颜色 */
body {
font-family: "微软雅黑";
background: #fdfdfd;
}
/* 头部背景样式 */
#bg {
width: 1200px; /* 设置宽度 */
height: 617px; /* 设置高度 */
background: url(../images/bg.png) no-repeat; /* 设置背景图片，不重复 */
margin: 0 auto; /* 水平居中 */
}
/* 导航栏样式 */
.nav {
width: 850px; /* 设置宽度 */
height: 50px; /* 设置高度 */
margin: 0 auto; /* 水平居中 */
padding: 50px 0 0 150px; /* 设置内边距 */
background: url(../images/logo.png) left center no-repeat; /* 设置背景图片，左侧居中，不重复 */
}
/* 导航栏中的文本样式 */
.nav span {
color: #685649; /* 设置文本颜色 */
font-size: 16px; /* 设置字体大小 */
padding: 0 30px; /* 设置左右内边距 */
}
/* 搜索框样式 */
.nav .search {
float: right; /* 右浮动 */
width: 200px; /* 设置宽度 */
height: 30px; /* 设置高度 */
line-height: 30px; /* 设置行高，垂直居中 */
border-radius: 100px; /* 设置圆角 */
color: #aaa; /* 设置文本颜色 */
font-size: 14px; /* 设置字体大小 */
background: #fff url(../images/f.png) no-repeat 10px center; /* 设置背景颜色和图标 */
}
/* 新闻部分样式 */
#news {
width: 1200px; /* 设置宽度 */
height: 455px; /* 设置高度 */
background: url(../images/dongtai.jpg) center top no-repeat; /* 设置背景图片，居中顶部，不重复 */
margin: 18px auto; /* 设置外边距，水平居中 */
padding-top: 120px; /* 设置顶部内边距 */
}
/* 新闻内容块的样式 */
.news_con {
float: left; /* 左浮动 */
margin-left: 70px; /* 设置左边距 */
}
/* 新闻标题样式 */
.news_con .one {
width: 284px; /* 设置宽度 */
height: 50px; /* 设置高度 */
padding-left: 10px; /* 设置左侧内边距 */
line-height: 50px; /* 设置行高，垂直居中 */
font-weight: bold; /* 设置字体加粗 */
font-size: 16px; /* 设置字体大小 */
border-bottom: 1px solid #ddd; /* 设置底部边框 */
}
/* 新闻描述样式 */
.news_con .two {
width: 284px; /* 设置宽度 */
height: 70px; /* 设置高度 */
line-height: 20px; /* 设置行高 */
padding: 10px 0 0 10px; /* 设置内边距 */
font-size: 12px; /* 设置字体大小 */
color: #bbb; /* 设置文本颜色 */
}
/* 新闻块的阴影效果 */
.news_con .shadow {
width: 294px; /* 设置宽度 */
height: 5px; /* 设置高度 */
background: url(../images/yinying.jpg) no-repeat; /* 设置背景图片，不重复 */
}
/* 展览部分样式 */
#exhibition {
width: 1200px; /* 设置宽度 */
background-image: radial-gradient(ellipse at center, #fff, #d6e4ed); /* 设置径向渐变背景 */
margin: 50px auto; /* 设置外边距，水平居中 */
}
/* 展览标题样式 */
.tittle {
width: 636px; /* 设置宽度 */
height: 150px; /* 设置高度 */
margin: 0px auto; /* 水平居中 */
background: url(../../images/shenghuo.png) no-repeat center center; /* 设置背景图片，居中，不重复 */
}
/* 展览图片容器样式 */
#exhibition .pic {
width: 1000px; /* 设置宽度 */
height: 360px; /* 设置高度 */
margin: 0 auto; /* 水平居中 */
}
/* 展览图片样式 */
#exhibition .pic img {
margin-left: 45px; /* 设置左边距 */
}
/* 页脚样式 */
#footer {
width: 1200px; /* 设置宽度 */
height: 80px; /* 设置高度 */
background: url(../images/footer_bg.jpg) repeat-x; /* 设置背景图片，水平重复 */
color: #fff; /* 设置文本颜色 */
text-align: center; /* 文本居中 */
line-height: 80px; /* 设置行高，垂直居中 */
margin: 0 auto; /* 水平居中 */
}
/* 二维码样式 */
.tree {
position: fixed; /* 固定定位 */
right: 5%; /* 距离右侧5% */
bottom: 5%; /* 距离底部5% */
}四、具体的照片布局
五、运行结果页面
