提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
将图片作为背景，用定位的方式将文本框排列在图片上（这个图片发不出来，系统说我图片违规了，有不明白的小伙伴可以发私信，或者在下面评论呀！）
HTML部分
<body>
<div class="advertising">
<div class="next">
<ul>
<li>*姓名：<input type="text"></li>
<li>*邮箱：<input type="text"></li>
<li>*电话：<input type="text"></li>
<li>性别：<select name="" id="">
<option value="">请选择</option>
<option value="">男</option>
<option value="">女</option>
</select></li>
<li>年龄：<select name="" id="">
<option value="">请选择</option>
<option value="">18~20</option>
<option value="">21~30</option>
</select></li>
</ul>
</div class="img"><center>
<img src="./图片素材/学员免费体验/btn.jpg" alt=""></center>
</div>
</body>
CSS部分：
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.advertising{
background:url(./图片素材/学员免费体验/bg.jpg) no-repeat ;
background-size: 100% 100%;
width: 300px;
height: 350px;
margin: 50px;
}
.next{
width: 300px;
height: 250px;
position: relative;
left: 40px;
top: 100px;
line-height: 2;
}
ul li{
font-size: 14px;
color: white;
}
这是第一种方式，用图片作为背景，用定位的方式，将其他文本居中显示；
接下来这个也是用图片作为背景插入到这个列表中的，但是也是有不同的，这个背景是插入在我们的li中，具体哪里有区别，我们一起来看看吧！
HTML部分：
<body>
<div class="nav">
<div class="main">
<h3><img src="./图片素材/中心开班/bg.gif" alt="">中心开班信息</h3>
</div>
<div class="information">
<ul>
<li><a href="#">8月12日：学历+技能班</a></li>
<li><a href="#">8月16日：高考特招班</a></li>
<li><a href="#">8月23日：Java精英班</a></li>
<li><a href="#">8月31日：学士后强化班</a></li>
<li><a href="#">9月5日：大学生就业班</a></li>
<li><a href="#">9月9日：企业定向委培班</a></li>
<li><a href="#">9月16日：网络营销强化班</a></li>
</ul>
</div>
</div>
</body>CSS部分
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.nav{
width: 300px;
margin: 50px;
border: 1px gray solid;
border-radius: 15px;
overflow: hidden;
}
a {
color: gray;
}
li a:hover {
color: red;
}
li{
width: 300px;
height: 50px;
background:url(./图片素材/中心开班/dotBg.gif);
line-height: 2;
text-indent: 1em;
background-size:100% 100%;
}
.main{
width: 300px;
height: 50px;
background-color: #6BC7F9;
line-height: 50px;
color: white;
border-radius: 15px 15px 0px 0px;
border-bottom: 2px white solid;
}
.information{
background-image: linear-gradient(#ADE0FC 10%,#FFFFFF 20%);
}总结：
有不清楚的小伙伴可以发私信给我，这边有两个知识点，一个就是，一定要分清楚这个背景是相对于谁的背景，不要跟我一样，放错了盒子哦；还有一个就是这渐变色，background-color的渐变应该怎么写，包括渐变的百分比又是怎么算的。
好啦，今天的分享就到这里啦，如果文档中有什么错误，欢迎指正，也欢迎各位大佬一起探讨呀，最后，祝愿屏幕前的你，生活愉快，万事胜意呀~~