当前位置：首页 > article >正文

Web网页制作之爱家居的设计（静态网页）

article 2025/3/15 2:02:08

一、使用的是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号 &nbsp;&nbsp;京公网安备 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% */
}