原理依舊是ul>li*3
通過li的浮動float: left;以及寬度width: 33.33%;進行布局
然後在裡面加文字,並進行多行居中則是通過
display: table;和 display: table-cell;vertical-align: middle;
由於是垂直居中,所以需要乙個高度.並且需要父子級巢狀,即
.fu.zi
然後就是滑鼠懸浮:hover
想讓哪個有懸浮效果就在哪個標籤上加:hover,不必拗厥於a標籤上
好了,這是整體的**,由於不好看,所以就不截圖.至於想多加列?那就加li,減寬度width: 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
>
*.lm_new
.lm_new h1
.lm_new ul li
.lm_ju
.lm_new ul li a
.lm_ju:hover
style
>
head
>
<
body
>
<
div
class
="lm_new"
>
<
h1>專業課程
h1>
<
ul>
<
li><
div
class
="lm_ju"
><
a href
="">
對網頁的設計，應該是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
>
多行文字的垂直居中
與其他一些display屬性類似，table cell同樣會被其他一些css屬性破壞，例如float,position absolute，所以，在使用display table cell與float left或是position absolute屬性盡量不用同用。設定了display table c...
單行 多行文字的垂直居中
無標題文件 title head style container style body div class container h3 1.單行文字居中 h3 div style border 1px dashed red line height 60px margin 30px 這是高度為30畫素的...
單行 多行文字的垂直居中
無標題文件 title head style container style body div class container h3 1.單行文字居中 h3 div style border 1px dashed red line height 60px margin 30px 這是高度為30畫素的...