简单页面操作任务

2021-12-08 12:30:00 阅读：213 来源： 互联网

标签：top padding 任务 absolute background 简单 position 页面 left

<!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"> 
               <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>

标签：top,padding,任务,absolute,background,简单,position,页面,left
来源： https://blog.csdn.net/m0_63837329/article/details/121788325

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单页面操作任务