首页 > 其他分享> > HTML练习之路12

HTML练习之路12

2022-01-22 09:07:18 作者：互联网

本次要实现如下图所示的咖啡店banner效果图：

其实主要看给了什么素材，总共给了两种图片的素材，所以我们的结构框架就是一个大<div>包含一个小<div>:

<body>
	<div class="out">
		<div class="in">
		
		</div>
	</div>
</body>

写到这儿还没有任何效果展示，因为我们需要通过css给两个<div>设置不同的背景，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：

然后紧接着</title>标签下一行引入Css文件：

<link href="index1_20_test03.css"  rel="stylesheet" type="text/css">

接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：

*{
	        margin: 0px;
			padding:0px;			
}

为底部（外部）图片添加宽高，边框和背景图片：

 .out{
	margin: 0px auto;
	height: 400px;
	width: 800px;
	background:url("../../../Documents/muxishiye/bg.png") repeat-x;

然后故技重施，对上部（内部）图片设置宽高范围，边框和背景图片即可：

 .in{
	margin: 0px auto;
	height: 400px;
	width: 800px;
	background:url("../../../Documents/muxishiye/coffee.png") repeat-x 0px 40px;
}

实际效果如下：

完整.html源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>咖啡店Banner</title>
	<link href="index1_21_test2.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="out">
		<div class="in">
		
		</div>
	</div>
</body>
</html>

完整.css文件源码：

@charset "utf-8";
/* CSS Document */

*{
	margin: 0px;
	padding: 0px;
}
 .out{
	margin: 0px auto;
	height: 400px;
	width: 800px;
	background:url("../../../Documents/muxishiye/bg.png") repeat-x;
}

 .in{
	margin: 0px auto;
	height: 400px;
	width: 800px;
	background:url("../../../Documents/muxishiye/coffee.png") repeat-x 0px 40px;
}

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）

标签：12,..,auto,练习,HTML,Documents,0px,margin,CSS
来源： https://blog.csdn.net/qq_62714412/article/details/122632744