固定寬度實作頁面自适應居中
-
- 說明
- css代碼
- Index代碼
- 示範圖
說明
示範效果分辨率為1980x1080分辨率效果
width設定為1336px使在分辨率為1366x720的浏覽器不出現左右移動框
使用margin來控制浮動
css代碼
body {
}
.container{
width: 1336px;
margin: 0 auto;
}
Index代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
body {}
.container{
width: 1336px;
height: 1000px;
margin: 0 auto;
background: gray;
}
</style>
<body>
<div class="container">
<h1 style="color: #FFF;">container居中</h1>
</div>
</body>
</html>
示範圖
![【web素材】01-10款大氣的購物商城網站模闆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)