简单的三栏,文字多行居中效果 css原生

原理依旧是ul>li*3

通过li的浮动float: left;以及宽度 33.33%;进行布局

然后在里面加文字,并进行多行居中则是通过

　　display: table;和　display: table-cell;　vertical-align: middle;

由于是垂直居中,所以需要一个高度.并且需要父子级嵌套,即

.fu{
    dispaly:table;
}
.zi{
    display: table-cell;
    vertical-align: middle;
    height: 300px;
}

然后就是鼠标悬浮:hover

想让哪个有悬浮效果就在哪个标签上加:hover,不必拗厥于a标签上

好了,这是整体的代码,由于不好看,所以就不截图.至于想多加列?那就加li , 减宽度 33.33%;的百分比,总之满足百分百即可.

由于给了高度,所以也需要酌情计算象素了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .lm_new{
            width: 90%;
            overflow: hidden;
            margin: 0 auto;
        }
        .lm_new h1{
            text-align: center;
        }
        .lm_new ul li{
            list-style-type: none;
            width: 33.33%;
            float: left;
            overflow: hidden;
            padding: 20px;
            box-sizing: border-box;
            height: 300px;
            display: table;
        }
        .lm_ju{
            padding: 20px;
            display: table-cell;
            vertical-align: middle;
            height: 300px;
        }
        .lm_new ul li a{
            width: 100%;
            display: block;
            color: #000;
            text-decoration: none;
        }
        .lm_ju:hover{
            border: 1px solid #ccc;
            box-shadow: 10px 10px 10px #ccc;
        }
    </style>
</head>
<body>
    <div class="lm_new">
    <h1>专业课程</h1>
        <ul>
            <li><div class="lm_ju"><a href="">web前端设计。前端设计中，ps重要，flash随着市场发展，渐渐需求量变小。动画制作方面，svg+js，canvas，css3过度效果和动画效果正在成为主流的动画，百度网盟图片由原来的flash变成现在的.gif图片.

对网页的设计，应该是pc端和移动端两方面的课程。
如果可能，建议将AI基础操作和svg作为前端设计课程，web前端开发的时候，做svg动画

</a></div></li>
            <li><div class="lm_ju"><a href="">对不同浏览器的认知，使用，特点，对html标签、css3动画的支持程度，以及网页开发调试工具（debug tool）的使用，这个非常非常重要，对开发调试来说，十分节省时间。

</a></div></li>
            <li><div class="lm_ju"><a href="">web前端开发。建议将html5、css3作为网页设计与制作的课程，因为在Pc端网站开发过程中，也会大量的应用css3动画，ie10+及非ie内核的浏览器也对html标签解析的更完美了，针对ie9及以下的浏览器，在课上用1-2节课的时间学习css hack即可。

同时，项目开发中，js作为客户端脚本对页面中模块效果，动画以及与服务器端交互都能实现，但源生js开发浪费时间，用js框架开发节省时间，建议学1-2个js框架，从目前来看最流行的还是jQuery。

响应式布局，也是比较流行的，实现方法也比较简单，用css3的media query，建议放在必修课程中。

</a></div></li>
        </ul>
    </div>
</body>
</html>