CSS練習絕對定位於頁面寬度自適應
阿新 • • 發佈：2017-06-03
ear family vertica 寬度 content back left display splay
<!DOCTYPE html> <html> <head> <title>九宮格布局</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="js/jquery.min.js"></script> <scripttype="text/javascript"> $(function(){ var w=$(document.body).width()+"px"; $(".wrapper").css("width",w); $(".header").css("width",w); $(".bottom").css("width",w); }); </script> </head> <body> <div class="wrapper"> <div class="header">首頁</div> <div class="nav"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> <div class="space"></div> <div class="list-item"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> </div> <div class="bottom"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> </body> </html>
CSS
body { margin: 0; width: 100%; max-width: 640px; width: expression_r(document.body.clientWidth > 640 ? "640px": "auto") } ul { padding: 0; } .wrapper { display: block; background: #fff; font-family: "微軟雅黑"; color: #6c6c6c; } .header { width: 100%; background: #555; height: 50px; border-bottom: #c6c6c6 solid 1px; text-align: center; line-height: 50px; vertical-align: middle; color: #fff; top: 0; position: fixed; } .nav { margin-top: 20px; background: #f5f5f5; width: 100%; } .nav ul li{ margin:10px 0px 0px 0px; list-style: none; width: 25%; float: left; text-align: center; font-size: 200%; color: #fac240; line-height: 160px; border-bottom: #f5f5f5 solid 1px; } .space { clear:both; width: 100%; height: 15px; background: #f5f5f5; } .list-item ul li { list-style: none; width: 100%; height: 45px; border-bottom: #f5f5f5 solid 1px; line-height: 45px; vertical-align: middle; font-size: 200%; color: #fac240; text-align: center; } .bottom { height:70px; width: 100%; background: #f5f5f5; bottom: 0; position: fixed; } .bottom ul li { list-style: none; width: 25%; float: left; line-height: 50px; vertical-align: middle; text-align: center; font-size: 200%; color: #fac240; }
CSS練習絕對定位於頁面寬度自適應