原理依旧是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>