<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,div,img,p,h1{/* 去除框架 */
margin: 0px;
padding: 0px;
}
.outer{
height: 400px;
width: 650px;
background-color: #1E2B3D;
}
.left{
width: 300px;
height: 400px;
float: left;
background-image: url(img/road.png);/* 插入图片 */
background-position: 50px;
background-repeat: no-repeat;/* 取消平铺 */
}
.right{
width: 300px;
height: 400px;
float: right;
position: absolute;
padding-top: 120px;
padding-left: 380px;
}
body{
font-family: "楷体";
font-style: italic;/* 斜体 */
}
.x{
position: absolute;/* 子绝父相 */
padding-top: 134px;
}
.c{
position: absolute;
padding-top: 130px;
padding-left: 220px;
}
.v{
position: absolute;
padding-top: 15px;
padding-left: 105px;
}
.b{
position: absolute;
padding-top: 8px;
padding-left: 220px;
}/* 命名后开始调节图片位置 */
h1{
font-size: 60px;
color: red;
letter-spacing: 18px;/* 字体之间的距离 */
}
p{
color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">
<img src="img/icon2.png" class="x"> <!-- 命名class -->
<img src="img/icon4.png" class="c">
<img src="img/icon6.png" class="v">
<img src="img/icon8.png" class="b">
</div>
<div class="right">
<h1>查违</h1>
<p>及时、迅速、精准、便捷</p>
<img src="img/car.png">
</div>
</div>
</body>
</html>