395day(定位複習，子絕父相)
阿新 • • 發佈：2018-11-21
《2018年11月3日》【連續395天】
標題：定位複習，子絕父相；
內容：
/*postion: static/
absolute/ 不佔位置 移當前屏為基準
relative(以自己的左上角點為基點移動)/ 原本的佔位置
fixed*/
/*當父沒有定位，以最近的已定位的祖先為基準，直到window*/<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0px; padding: 0px; } li { list-style: none; } .sf { width: 1250px; height: 472px; margin: 100px auto; position: relative; } .nav { width: 960px; height: 80px; position: absolute; bottom: 0; left: 50%; margin-left: -480px; background-color: #000; } .nav li { float: left; width: 160px; height: 80px; } .nav li a { width: 160px; height: 80px; display: block; text-align: center; line-height: 80px; color: #fff; text-decoration: none; } .nav li a:hover { background-color: #fff; color: #000; } </style> </head> <body> <div class="sf"> <a href="#"> <img src="images/sf.png" height="472" width="1259" alt=""> </a> <div class="nav"> <ul> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> </ul> </div> </div> </body>
