2018-09-17css实例一、二

作者: 菩灵 | 来源:发表于2018-09-17 21:09 被阅读13次

2018-09-17css实例一、二
Runtime应用
Vue 的 methods 方法中调用另一个方法及 this 指
HTML样式CSS-11
Linux crontab 详细
Java 反射
实例对象-类对象-元类之间的关系
@synchronized
ElevatedButton
PhpExcel大全

实例一：
div中的a，转化为inline-block之后，去除间距要在父级设置font-size为0，子级再设置font-size；设置水平并垂直居中，父级设置text-align为center，父级设置line-height为父级的高度（但是在设置了垂直方向的padding之后无效，会把padding的值加进去）
这时可以通过计算并设置margin来进行垂直居中，注意12px大小的字高度竟然是17px
代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局实例</title>
    <style type="text/css">
        .pagenation{
            width: 958px;
            height: 40px;
            border: 1px solid #000;
            margin: 50px auto 0;
            font-size: 0;
            text-align: center;
            /*line-height: 40px;*/

        }
        .pagenation a{
            display: inline-block;
            padding: 5px 10px;
            background-color: gold;
            font-size: 12px;
            font-family: "Microsoft Yahei";
            text-decoration: none;
            margin: 6.5px 5px;
            /*line-height: 40px;*/


        }
        .pagenation a:hover{
            background-color: red;
            color: white;
        }
        .pagenation span{
            font-size: 12px;
            display: inline-block;

        }
    </style>
</head>
<body>
    <div class="pagenation">
        <a href="">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <span>...</span>
        <a href="">17</a>
        <a href="">18</a>
        <a href="">19</a>
        <a href="">20</a>
        <a href="">下一页</a>

    </div>
</body>
</html>

实例一

实例二：
代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局实例</title>
    <style type="text/css">
        .pagenation{
            width: 958px;
            height: 40px;
            border: 1px solid #000;
            margin: 50px auto 0;
            font-size: 0;
            text-align: center;
            /*line-height: 40px;*/

        }
        .pagenation a{
            display: inline-block;
            padding: 5px 10px;
            background-color: gold;
            font-size: 12px;
            font-family: "Microsoft Yahei";
            text-decoration: none;
            margin: 6.5px 5px;
            /*line-height: 40px;*/


        }
        .pagenation a:hover{
            background-color: red;
            color: white;
        }
        .pagenation span{
            font-size: 12px;
            display: inline-block;

        }
        .menu{
            width: 958px;
            height: 40px;
            border: 1px solid #000;
            padding: 0;
            list-style: none;
            text-align: center;
            line-height: 40px;
            font-size: 0;
            margin: 50px auto 0;

        }
        .menu li{
            display: inline-block;
            font-size: 14px;
            font-family: "Microsoft Yahei";
        }
        .menu li a{
            color: #333;
            font-family: "Microsoft Yahei";
            text-decoration: none;

        }
        .menu .line{
            color: #333;
            margin: 0 20px;
        }
        .menu li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div class="pagenation">
        <a href="">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <span>...</span>
        <a href="">17</a>
        <a href="">18</a>
        <a href="">19</a>
        <a href="">20</a>
        <a href="">下一页</a>

    </div>
    <ul class="menu">
        <li><a href="">首 页</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
        <li class="line">|</li>
        <li><a href="">网站建设</a></li>
    </ul>
</body>
</html>

效果：

效果展示