css伪类放大缩小

╰半橙微兮° 2022-03-20 08:28 358阅读 0赞

开发工具与关键技术：DW  
作者：文泽钦  
撰写时间：2019年1月31日

今天做一个在网上经常看到的模板，比如一些文章和图片的排版：  
新建一个HTML：

###  ###

<divclass="box">
    <h1>哲思2.0</h1>
    <div class="suofang"><imgsrc="image/1.jpg" alt="">
    <!—加标题，图片-->
    </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]  
设置HTML的宽度和高度，以及h1标题居中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 1]  
为了能在指定的宽度显示图片，所以设置图片的宽高：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 2]  
由于每台计算机的分辨率不同，会造成效果不同，看看我的效果，具体像素需要自己调整：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 3]  
对图片设置伪类，鼠标移入出现放大效果，还可以加边框，使图片居中显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 4]

下面开始加入ul，li标签插入文本，图片等：

###  ###

<ul>
           <li>为什么来之不易的机会往往白白错过？        </li><br/>
    
           <div class="suofang"><img src="image/2.jpg"alt=""></div>
    
          <li>为什么往往珍而重之的东西往往容易失去？</li><br/>
    
           <div class="suofang"><img src="image/3.jpg"alt=""></div>
    
           <li>为什么梦想往往与计划背道而驰？</li><br/>
    
           <div class="suofang"><img src="image/4.jpg" alt=""></div>
    
           <li>而又为什么，故事如此悲伤？</li><br/>
    
           <div class="suofang"><img src="image/5.jpg"alt=""></div>
    
           <li>所有的故事，都会有一个结局。</li><br/>
    
           <div class="suofang"><img src="image/6.jpg" alt=""></div>
    
           <li>但幸运的是，在生活中每个结局，都会成为一个新的开始“。”   “，”</li><br/>
    
           <div class="suofang"><img src="image/7.jpg" alt=""></div>
    
           <li>所有的错过，都是为了更好地遇见。</li><br/>
    
           <div class="suofang"><img src="image/8.jpg" alt=""></div>
    
           <li>所有失去的，都是给更珍贵的东西腾出位子。</li><br/>
    
           <div class="suofang"><img src="image/9.jpg" alt=""></div>
    
           <li>所有的低俗，都是为了逆袭做的热身。</li><br/>
    
           <div class="suo"><img src="image/11.png" alt=""></div>
    
           <li>而往往故事中的支离破碎，都是为了天长地久的圆满。</li><br/>
    
           <div class="suo"><img src="image/12.jpg" alt=""></div>
    
           <li>上天让你放弃和等待，是为了给你更好的，那个正处于困境的你，放宽心，坚持住，请相信一切，都是美好的安排。</li><br/>
    
           </ul>

ul,li标签自带标题小点，如果感觉碍眼的话可以清除掉，设置字体大小，具体效果看个人需要：  
![在这里插入图片描述][20190211235957125.PNG]  
对图片设置大小、边距和伪类，鼠标移入出现缩小效果：  
![在这里插入图片描述][20190212000037340.PNG]  
效果图：  
![在这里插入图片描述][20190212000135819.PNG]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]: /images/20220320/e3600efc5d4246298ea5e8cdc18bd0ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 1]: /images/20220320/b60f1b0cd8c64b82b17c845564eef24b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 2]: /images/20220320/cdb57dcb22a84c7a9dda49020afe7d5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 3]: /images/20220320/1314efceea964245b5006cba29fafebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70 4]: /images/20220320/d7a6a16f01964a92ae773ead5cb5d13a.png
[20190211235957125.PNG]: /images/20220320/3c3083cfdfb2449daa1840329ab536c4.png
[20190212000037340.PNG]: /images/20220320/3291fb53f48e4e598d2dffa498d6f7af.png
[20190212000135819.PNG]: /images/20220320/c39c4c69d793485aa7d6e71118f0fa0f.png