* { padding:0; margin:0; list-style:none; } #box:after { content:""; display:block; clear:both; } #box { width:800px; border:1px solid black; margin:20px auto; background:blue; } #leftBox { width:200px; float:left; } #leftBox li { width:200px; height:89px; background:red; margin-bottom:2px; color:white; font:50px/89px "黑体"; text-align:center; } #rightBox div { display:none; float:left; width:600px; } #rightBox p { width:100%; height:325px; font:100px/325px "黑体"; text-align:center; background:greenyellow } #rightBox ul { width:600px; display:table; } #rightBox li { display:table-cell; background:purple; height:40px; border-right:2px solid blue; font:30px/40px "黑体"; text-align:center; color:white; } #leftBox .active { background:yellow; color:black; } #rightBox .active { background:white; color:black; }
利用jq做的简易图片切换