html违停查询案例制作

最新推荐文章于 2024-08-04 20:38:28 发布

真的学不懂..

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量543

点赞数 19

文章标签： html5 css

本文链接：https://blog.csdn.net/2301_80941660/article/details/139445447

版权

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>违停查询</title>
   <style type="text/css">
       body{
           font-family:"微软雅黑";
       }
       body,p,h2,img{
           padding:0;
           margin:0;
           border:0;
       }
       a{
           display:block;
       }
       .orange{
           width:603px;
           height:400px;
           margin:20px auto;
           background:#1E2D3B;
           padding-right:70px;
       }
       .dog{
           width:332px;
           height:400px;
           background:url(images2/road.png) no-repeat 70px top;
           float:left;
           position: relative;
       }
       .wy1{
           width:158px;
           height:177px;
           background:url(images2/icon1.png) no-repeat;
           position: absolute;
           left:6px;
           top:130px;
       }
       .wy2{
           width:98px;
           height:106px;
           background:url(images2/icon3.png) no-repeat;
           position: absolute;
           left:233px;
           top:130px;
       }
       .wy3{
           width:69px;
           height:78px;
           background:url(images2/icon5.png) no-repeat;
           position:absolute;
           left:127px;
           top:17px;
       }
       .wy4{
           width:45px;
           height:50px;
           background:url(images2/icon7.png) no-repeat;
           position: absolute;
           left:232px;
           top:8px;
       }
       .wy1:hover{
           background:url(images2/icon2.png) no-repeat;
       }
       .wy2:hover{
           background:url(images2/icon4.png) no-repeat;
       }
       .wy3:hover{
           background:url(images2/icon6.png) no-repeat;
       }
       .wy4:hover{
           background:url(images2/icon8.png) no-repeat;
       }
       .cat{
           width:224px;
           height:340px;
           padding-top:60px;
           float:right;
           font-style:italic;
           font-weight:bold;
       }
       .cat h2{
           font-size:88px;
           color:#3f9ade;
       }
       .cat .mink{
           font-size:18px;
           color:#55606b;
           margin-bottom:20px;
       }
</style>

</head>
<body>
<div class="orange">
   <div class="dog">
       <a href=" " class="wy1"></a >
        <a href="#" class="wy2"></a >
        <a href="#" class="wy3"></a >
        <a href="#" class="wy4"></a >
</div>
   <div class="cat">
   <h2>查违</h2>
   <p class="mink">及时、迅速、精准、便捷</p >
   < img src="images2/car.png">

</div>
</div>
</body>
</html>

欢迎大家一起学习交流