简单过渡页面制作及遇到问题的延伸

一、HTML结构布局

用无序列表来布局，中间文字用h标签达到换行的效果。

    <ul>
        <li>
            <h1>欢迎来到召唤师峡谷！</h1>
            <h3>敌军还有30秒到达战场！</h3>
        </li>
        <li>
            <h1>欢迎来到召唤师峡谷！</h1>
            <h3>敌军还有30秒到达战场！</h3>
        </li>
        <li>
            <h1>欢迎来到召唤师峡谷！</h1>
            <h3>敌军还有30秒到达战场！</h3>
        </li>
        <li>
            <h1>欢迎来到召唤师峡谷！</h1>
            <h3>敌军还有30秒到达战场！</h3>
        </li>
    </ul>

二、css制作部分

css部分主要分为三部分，整体的样式添加、伪类选择器的使用、过渡的添加。

1、整体样式：

  * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            list-style: none;
            width: 500px;
            height: 100px;
            background-color: #87ceeb;
            margin: 10px auto;
            text-align: center;
            border-left: 10px solid #000;
            padding-top: 15px;
            cursor: pointer;
            box-sizing: border-box;
        }

2、伪类选择器的使用：

        li:hover {
            background-color: #000;
            color: #fff;
            border-left: 10px solid tomato;
        }
        
        li:hover h1 {
            font-size: 18px;
        }
        
        li:hover h3 {
            font-size: 28px;

3、过渡的添加：

        li,
        h1,
        h3 {
            transition: all 800ms linear;
        }

三、页面效果

1、伪类未触发时：

 

2、伪类触发时：

 四、问题

在对h1、h3居中时发现，h1的上边框和div盒子的上边框重合，用padding-top时，div的高度会变大。

解决方案：给div加一个box-sizing：border-box; 此时给盒子用padding-top时，div的高度就吧会改变。

起初我想用line-height: 100px;来完成上下居中的效果，但是此盒子内的是多行文字，用此方法不能预期效果。