第六章 盒子模型
阿新 • • 發佈：2019-01-01
課堂練習<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style type="text/css"> .ull{ width:230px; height:80px; background-color:#0F3; border: 5px; border-top-color: #09F; border-right-color: #F39; border-bottom-color: #96F; border-left-color: #F0F; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; margin: 6px auto; padding: 10px ; text-align:center } .do{ border-color: #C09; border-top-color: #9FF; border-right-color: #C6F; border-bottom-color: #FC3; border-left-color: #F99; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; } </style> </head> <body class="do"> <div class="ull">人生若是無誤,鉛筆何須橡皮!</div> <div class="ull">人生若是無誤,鉛筆何須橡皮!</div> <div class="ull">人生若是無誤,鉛筆何須橡皮!</div> </body> </html>
練習五<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美容熱點產品</title> <style type="text/css"> .do{ background-color: #F09; color: #FFF; font-size: 24px; } .r{ width:400px; height:45px; font-size: 18px; border-bottom-style: dashed; margin:0px; padding:0px; background-color: #FFF; } a span{ background-repeat: no-repeat; background-position: right; background-image: url(dot_01.gif); padding: 0px 8px; color: #FFF; } a:hover span{ color:#F0F; } a:hover{ color:#F0F; } ul{list-style-type:none;} ul li a{text-decoration:none; } </style> </head> <body> <div class="do">大家都喜歡買的美容品</div> <ul > <li class="r"><a href="#" ><span>1</span> 雅詩蘭黛即時修護眼部精華霜15ml</a></li> <li class="r"><a href="#" ><span>2</span> 伊麗莎白雅頓顯效複合活膚霜75ml</a></li> <li class="r"><a href="#" ><span>3</span>OLAY玉蘭油多效修護霜 50g</a></li> <li class="r"><a href="#" ><span>4</span>倩碧保溼潔膚水2號 200ml</a></li> <li class="r"><a href="#" ><span>5</span>比度克細膚淡印霜 30g</a></li> <li class="r"><a href="#" ><span>6</span>蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml</a></li> <li class="r"><a href="#" ><span>7</span>SK-II護膚精華露 215ml</a></li> <li class="r"><a href="#" ><span>8</span>歐萊雅青春密碼活顏精華肌底液</a></li> </ul> </body> </html>
練習三
</pre><pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>彩妝熱賣產品列表</title> <style type="text/css"> .tt{ border: 10px groove #000; } ul{ list-style-type: none; } ul li a { text-decoration: none; } .title{ background-repeat: no-repeat; color: #FFF; background-position: 0px 0px; background-color: #F0F; border-bottom-style: double; } a span{ background-repeat: no-repeat; background-position: right; background-image: url(dot_01.gif); padding: 0px 8px; color: #FFF; } li div{ display:none; } a:hover div{ display:block; } a:hover { color:#0FF; } a:hover span{ color:#0FF; } </style> </head> <body> <div id="tt"> <p class="title">大家都喜歡的彩妝</p> <ul> <li><a href="#"><span>1</span> Za姬芮新能真皙美白隔離霜 35g <div id="r" ><img src="icon-1.jpg" alt="Za姬芮新能真皙美白隔離霜" /> <p>￥62.00 最近69122人購買</p> </div> </a></li> <li><a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml <div><img src="icon-2.jpg" alt="美寶蓮精純礦物奇妙新顏乳霜BB霜 " /> <p>￥89.00 最近13610人購買</p> </div> </a></li> <li><a href="#"><span>3</span>菲奧娜水漾CC霜40g <div><img src="icon-3.jpg"alt="菲奧娜水漾CC霜" /> <p>￥59.90 最近13403人購買</p> </div> </a></li> <li><a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml <div><img src="icon-4.jpg" alt="蝶翠詩橄欖卸妝油" /> <p>￥169.00 最近16757人購買</p> </div> </a></li> </ul> </body> </html>