css伪类放大缩小

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

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

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

设置HTML的宽度和高度，以及h1标题居中：

为了能在指定的宽度显示图片，所以设置图片的宽高：

由于每台计算机的分辨率不同，会造成效果不同，看看我的效果，具体像素需要自己调整：

对图片设置伪类，鼠标移入出现放大效果，还可以加边框，使图片居中显示：

下面开始加入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>但幸运的是，在生活中每个结局，都会成为一个新的开始“。” &nbsp;&nbsp;“，”</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标签自带标题小点，如果感觉碍眼的话可以清除掉，设置字体大小，具体效果看个人需要：

对图片设置大小、边距和伪类，鼠标移入出现缩小效果：

效果图：