前端 特徵佈局例項練習
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作業1228</title> <style type="text/css"> *{ margin: 0; padding: 0; } .abc{ height: 42px; width: 960px; border: 1px solid #deddd9; margin: 30px auto; } .a{ list-style: none; margin: 0px 248px 0px 248px; } .a li{ float: left; margin: 8px auto; } .b{ display: block; font-size: 12px; font-family: 微軟雅黑; color: black; background-color: gold; padding: 5px 10px; text-decoration: none; margin: 3px; } .box{ width: 960px; height: 42px; margin: 30px auto; border: 1px solid #000; } .nav{ list-style: none; margin: 4px 248px 4px 248px; } .nav li{ float: left; margin: 8px auto; display: block; } .nav a{ display: block; font-size: 14px; font-family: 微軟雅黑; color: black; text-decoration: none; margin-left: 6px; margin-right: 6px; font-weight: bold; } .bj{ margin-top: 100px; width: 960px; height: 40px; background-color: #55a8ea; } .sy{ width: 700px; height: 40px; list-style: none; float: left; } .sy li:hover{ background-color: #00619f; } .top-menu-li{ width: 100px; line-height: 40px; float: left; text-align: center; } .sy1{ /*font: 14px '雅黑';*/ color: #fff; text-decoration: none; font: 14px tahoma, arial, 宋體; } .sy2{ color: #fff; text-decoration: none; font: 14px tahoma, arial, 宋體; /*background: url(新建資料夾/new.png) no-repeat; width: 33px; height: 20px;*/ } .sy2:after{ content: ''; position: absolute; width: 33px; height: 20px; display: block; background: url(img/new.png); margin-top: -45px; margin-left: 135px; } </style> </head> <body> <div class="abc"> <ul class="a"> <li><a href="#" class="b">上一頁</a><a href="#"></a></li> <li><a href="#" class="b">1</a><a href="#"></a></li> <li><a href="#" class="b">2</a></li> <li><a href="#" class="b">3</a></li> <li><a href="#" class="b">4</a></li> <li>...</li> <li><a href="#" class="b">17</a></li> <li><a href="#" class="b">18</a></li> <li><a href="#" class="b">19</a></li> <li><a href="#" class="b">20</a></li> <li><a href="#" class="b">下一頁</a></li> </ul> </div> <div class="box"> <ul class="nav"> <li><a href="#">首頁</a></li> <li>|</li> <li><a href="#">網站建設</a></li> <li>|</li> <li><a href="#">程式開發</a></li> <li>|</li> <li><a href="#">網頁營銷</a></li> <li>|</li> <li><a href="#">企業VI</a></li> <li>|</li> <li><a href="#">例項展示</a></li> <li>|</li> <li><a href="#">聯絡我們</a></li> </ul> <div class="bj"> <ul class="sy"> <li class=top-menu-li><a href="#" class="sy1">首頁</a></li> <li class=top-menu-li><a href="#" class="sy1">網站建設</a></li> <li class=top-menu-li><a href="#" class="sy1">程式開發</a></li> <li class=top-menu-li><a href="#" class="sy2">網頁營銷</a></li> <li class=top-menu-li><a href="#" class="sy1">企業VI</a></li> <li class=top-menu-li><a href="#" class="sy1">例項展示</a></li> <li class=top-menu-li><a href="#" class="sy1">聯絡我們</a></li> </ul> </div> </body> </html>
