2021/3/26遇到HTML的问题

最新推荐文章于 2024-10-02 17:15:49 发布

ax阿楠

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量270

点赞数

文章标签： html

本文链接：https://blog.csdn.net/l765692971/article/details/115256219

版权

本文介绍了CSS中设置边框宽度的直接方法，以及如何使用`position: absolute`实现元素的绝对定位，脱离正常文档流，创建重叠效果。同时展示了当鼠标悬停在图片上时，如何通过:hover伪类改变图片大小。示例代码详细展示了这些概念在实际布局中的应用。

摘要由CSDN通过智能技术生成

1.设置dvi边框粗细时可以直接border设置,不用加weight都可以
border:10px; border-weight
2.position定位 left/right/top/bottom absolute代表绝对定位,设置后会脱离文档流,会文档重叠

.t2 {           
  /* 智能数码 */     
         position: absolute;     
         top: 13px;      
         left: 320px;

3.鼠标移动到图片,会使图片大或者变小,高度宽度尽量比图片小

 img:hover {     
        width: 290px;      
             
   height: 190px;        }

2021/3/26练习

<!DOCTYP1E html><html lang="en">
<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>day4作业</title>   
 <!-- position 定位     float 浮动4     -->    <style>        .t1 {          
   background-color: tomato;       
        width: 700px;          
          height: 420px;        }            
              img {            width: 300px;
                          height: 200px;        }              
                .t2 {        
                    /* 智能数码 */          
                      position: absolute;         
                   top: 13px;        
                       left: 320px;        }                .t3 {       
                            /* 家装城 */    
                                    float: left;
                           padding-left: 5px;            padding-top: 5px;   
                                }               
                                 .t4 {     
        position: absolute;       
             top: 230px;           
              right: 20px;            
              /* 京东超市 */       
               }              
     .t5 {        
              position: absolute; 
                   top: 230px;    
        left: 15px;
         /* 生鲜馆 */        }                              img:hover {   
  width: 290px;          
height: 190px;     
 }    
</style>
</head>
<body>    
<div class="t1">       
 <div class="t2"><img src="./img/01.png" alt=""></div>        <div class="t3"><img src="./img/02.png" alt=""></div>        <div class="t4"><img src="./img/03.png" alt=""></div>        <div class="t5"><img src="./img/04.png" alt=""></div>    </div>
</body>
</html>