1、首先在电脑端找到Dw软件，进行打开操作，然后新建一个html文件。
2、新建文件完成之后，写入一个div代码操作，如图所示。
3、写入div代码之后，引入一个css样式，如图代码操作所示。
4、引入样式代码之后，打开引入的css.文件，如图所示。
5、在新引入的css文件中，写入css背景图片代码即可，如图所示。
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!--
* @Author: your name
* @Date: 2021-04-09 15:18:51
* @LastEditTime: 2021-04-09 16:13:21
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \结婚倒计时\index.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>结婚倒计时</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="banner-container">
<div class="heading">
<h2>小柳 &小冯</h2>
<h3>我们要结婚了</h3>
<h5>2021年05月20日</h5>
</div>
<div class="countdown styled"></div>
<div class="copyrights">版权所有 © 2021.保留所有权利</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
2.CSS代码
* {
margin: 0
padding: 0
list-style-type: none
}
a,
img {
border: 0
}
p {
color: #24298f
margin: 0 0 1em !important
font-size: 13px
}
body {
font-family: "Open Sans", Arial, sans-serif
font-size: 14px
font-weight: 300
line-height: 1.6em
color: #656565
-webkit-font-smoothing: antialiased
-webkit-text-size-adjust: 100%
background: #fff
transition: all 0.3s linear
-webkit-transition: all 0.3s linear
-moz-transition: all 0.3s linear
-o-transition: all 0.3s linear
}
.banner-container {
background-image: url("../images/bg.jpg")
background-repeat: repeat
background-size: cover
font-size: 14px
height: 100%
width: 100%
overflow: hidden
position: fixed
text-shadow: 1px 1px rgba(0, 0, 0, 0.3)
}
.heading {
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
text-align: center
/* margin-top:250px*/
line-height: 60px
color: #ffffff
}
.heading h2 {
font-size: 60px
font-weight: normal
font-weight: 700
height: 140px
line-height: 80px
}
.heading h3 {
font-size: 28px
font-weight: 700
text-shadow: -1px -1px 5px rgba(0, 0, 0, 0.33)
}
.heading h5 {
font-size: 14px
}
.countdown {
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
text-align: center
margin-top: 210px
line-height: 48px
}
.styled div span {
display: block
font-size: 16px
margin-top: 0
font-weight: normal
text-align: center
background: rgba(255, 255, 255, 0.06)
color: #fff
margin: 0 9px 8px 9px
height: 28px
line-height: 28px
}
.styled div {
display: inline-block
margin-left: 10px
font-size: 30px
font-weight: normal
text-align: center
height: 100px
text-shadow: none
vertical-align: middle
color: #f44336
margin: 10px 4px
height: auto
width: 112px
border: 1px dashed rgba(255, 255, 255, 0.46)
}
.copyrights {
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
margin-top: 310px
font-size: 14px
color: #f44336
text-align: center
opacity: 0.6
}
登录后复制
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
css代码添加背景图片：
1．背景颜色：background-color
语法：{background-color:数值}
注意：在html当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。
表格背影颜色：style="background-color:red"
2．背景图片：background-image
语法：{background-image: url(url)|none}
3．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。
说明：参数取值范围：
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
5．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}
作用：背景定位用于控制背景图片在网页中显示的位置。
·带长度单位的数字参数
·top：相对前景对象顶对齐
·right：相对前景对象右对齐
·center：相对前景对象中心对齐
·比例关系
关键字解释如下:
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
注意：参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。
6. 背景样式：background
语法：{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。
扩展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
参考资料来源：百度百科：css
