HTML 北大青鳥視訊宣傳片列表
阿新 • • 發佈：2019-01-05
<!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;} img { border:0px; } ul ,li { list-style-type:none; } .a { float:right; width:400px; height:450px; background-color:#ced4db; } .b { background:url(1/icon-03.jpg) repeat-x; height:29px; line-height:29px; color:#ffffff; font-size:14px; font-weight:bold; } .c { padding:10px 15px 0px ; } .c li { float:left; width:142px; height:160px; } .c li a img { border:2px #ffffff solid; } .c li a:hover img { border:2px #f08609 solid; } .c h1 { font-size:12px; padding-left:10px; line-height:25px; } .c p { background:url(1/icon-01.jpg) 10px 5px no-repeat; padding-left:30px; height:25px; line-height:25px; } .c span { background:url(1/icon-02.jpg) 10px 5px no-repeat; padding-left:30px; height:25px; line-height:25px; display:block; } </style> </head> <body> <div class="a"> <div class="b">精彩視訊</div> <ul class="c"> <li><a href="#"><img src="1/video-01.jpg"/></a> <h1>攜手共同進步</h1> <p>時長：80秒</p> <span>點選：541563</span> </li> <li><a href="#"><img src="1/video-02.jpg"/></a> <h1>美麗的起點</h1> <p>時長：120秒</p> <span>點選：657842</span> </li> <li><a href="#"><img src="1/video-03.jpg"/></a> <h1>努力的過程</h1> <p>時長：50秒</p> <span>點選：912380</span> </li> <li><a href="#"><img src="1/video-04.jpg"/></a> <h1>享受豐碩的成果</h1> <p>時長：60秒</p> <span>點選：47651280</span> </li> </ul> </div> </body> </html>