HTML第七章上機練習2
阿新 • • 發佈：2019-02-11
<!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"> body{ line-height:20px; font-size:12px; background-color:#999;} .sll { font-weight: bold; background-color:#036; width:600px; height:50px; color:#FFF; font-size: 36px; text-indent: 2em; padding:7px; } .bbb {float: left; list-style-type: none; } .abc { width:600px; heigth:600px; background-color:#999; } .c li{ float:left; width:260px; height:260px;} .c li a img{border:2px #FFF solid;} .c li a:hover img{border:2px #F93 solid;} .c span{ background-image: url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-02.jpg); background-repeat: no-repeat; background-position: 10px 5px; height: 25px; padding-left: 30px; display:block; line-height:25px; } .c p{ background-image: url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg); background-repeat: no-repeat; background-position: 10px 5px; height: 25px; padding-left: 30px; display:block; line-height:25px;} </style> </head> <body> <div class="sll">精彩視訊</div> <div class="abc"> <ul class="c"> <div class="bbb"> <li><a href="#"><img src="file:///E|/cs6/video-01.jpg"/></a> <h3>攜手共同進步</h3> <p>時長:80秒</p> <span>點選:541563</span></li></div> <div class="bbb"> <li><a href="#"><img src="file:///E|/cs6/video-02.jpg"/></a> <h3>美麗的起點</h3> <p>時長:120秒</p> <span>點選:657842</span> </li> </div> <div class="bbb"> <li><a href="#"><img src="file:///E|/cs6/video-03.jpg"/></a> <h3>努力地過程</h3> <p>時長:50秒</p> <span>點選:912380</span> </li> </div> <div class="bbb"> <li><a href="#"><img src="file:///E|/cs6/video-04.jpg"/></a> <h3>享受豐碩的成果</h3> <p>時長:60秒</p> <span>點選:47651280</span> </li></div> </ul> </div> </body> </html>