頁面佈局
居中佈局
水平居中
- text-align:center
<style> .container { text-align: center; } .children { display: inline-block; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- margin: 0 auto
<style> .children { width: 100px; margin: 0 auto; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- flex
<style> .container { display: flex; justify-content: center; } .children { width: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- absolute+transform
<style> .children { position: absolute; left: 50%; transform: translate(-50%, 0); width: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
垂直居中
- line-height
<style> .container { height: 500px; line-height: 500px; background: green; } .children { display: inline; height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- flex
<style> .container { display: flex; align-items: center; height: 500px; background:green; } .children { height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- absolute+transform
<style> .container { position: relative; height: 500px; background:green; } .children { position: absolute; top: 50%; transform: translate(0, -50%); height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- table cell
<style> .container { display: table-cell; vertical-align: middle; height: 500px; background:green; } .children { height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- margin
<style> .container { position: relative; height: 500px; background:green; } .children { position: absolute; top:0; bottom: 0; margin: auto 0; height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
水平垂直居中
- absolute+transform
<style> .container { position: relative; width: 100%; height: 500px; background:green; } .children { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- flex
<style> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 500px; background:green; } .children { width: 100px; height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- margin
<style> .container { position: relative; width: 100%; height: 500px; background:green; } .children { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: blue; } </style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
- table-cell
<style>
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100vw;
height: 500px;
background:green;
}
.children {
display: inline-block;
width: 100px;
height: 100px;
background: blue;
}
</style>
<body>
<div class="container">
<div class="children">children</div>
</div>
</body>
複製代碼
多列布局
一列定寬，一列自適應
- float+margin
<style> .left { float: left; width: 100px; background:green; } .right { margin-left: 100px; background: blue; } </style>
<body>
<div class="left">
left
</div>
<div class="right">right</div>
</body>
複製代碼
- float+overflow
<style>
.left {
float: left;
width: 100px;
background:green;
}
.right {
overflow: hidden;
background: blue;
}
</style>
<body>
<div class="left">
left
</div>
<div class="right">right</div>
</body>
複製代碼
- table
<style> .parent { display: table; width: 100%; } .left { display: table-cell; width: 100px; background:green; } .right { display: table-cell; background: blue; } </style>
<body>
<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- flex
<style>
.parent {
display: flex;
width: 100%;
}
.left {
width: 100px;
background:green;
}
.right {
flex: 1;
background: blue;
}
</style>
<body>
<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
複製代碼
多列定寬，一列自適應
- float+overflow
<style> .parent { width: 100%; } .left-one, .left-two { float: left; width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { overflow: hidden; background: blue; } </style>
<body>
<div class="parent">
<div class="left-one">left-one</div>
<div class="left-two">left-two</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- table
<style> .parent { display: table; width: 100%; } .left-one, .left-two { display: table-cell; width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { display: table-cell; background: blue; } </style>
<body>
<div class="parent">
<div class="left-one">left-one</div>
<div class="left-two">left-two</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- flex
<style> .parent { display: flex; width: 100%; } .left-one, .left-two { width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { flex: 1; background: blue; } </style>
<body>
<div class="parent">
<div class="left-one">left-one</div>
<div class="left-two">left-two</div>
<div class="right">right</div>
</div>
</body>
複製代碼
三欄(左右欄固定寬度中間自適應)
- 絕對定位
<style> .container div { position: absolute; min-height: 200px; } .left { left: 0; width: 300px; background: yellow; } .center { left: 300px; right: 300px; background: gray; } .right { right: 0; width: 300px; background: green; } </style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- float
<style> .container div { min-height: 200px; } .left { float: left; width: 300px; background: yellow; } .center { background: gray; } .right { float: right; width: 300px; background: green; } </style>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
<!--<div class="left">left</div>-->
<!--<div class="center">center</div>-->
<!--<div class="right">right</div>-->
</div>
</body>
複製代碼
- flex
<style> .container { display: flex; min-height: 200px; } .left { width: 300px; background: yellow; } .center { flex: 1; background: gray; } .right { width: 300px; background: green; } </style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- 表格佈局
<style> .container { width:100%; display: table; min-height: 200px; } .container div { display: table-cell; } .left { width: 300px; background: yellow; } .center { background: gray; } .right { width: 300px; background: green; } </style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
複製代碼
- 網格佈局
<style> .container { width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 300px auto 300px; } .left { background: yellow; } .center { background: gray; } .right { background: green; } </style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
複製代碼
等分
- float
<style> .parent { width: 100%; } .one, .two, .three, .four{ float: left; width: 25%; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
<div class="parent">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
複製代碼
- table
<style> .parent { display: table; width: 100%; } .one, .two, .three, .four{ width: 25%; display: table-cell; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
<div class="parent">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
複製代碼
- flex
<style> .parent { display: flex; width: 100%; } .one, .two, .three, .four{ flex: 1; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
<div class="parent">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
複製代碼
聖盃佈局
<style> .header { background: green; height: 50px; } .wrapper { height: 200px; display: flex; } .wrapper .left { width: 100px; background: yellow; } .wrapper .main { flex: 1; background: blue; } .wrapper .right { width: 100px; background: red; } .footer { height: 50px; background: gray; } </style>
<body>
<div class="container">
<div class="header">header</div>
<div class="wrapper">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
複製代碼
相關文章
- 1. 頁面佈局
- 2. 頁面佈局3
- 3. HTML頁面佈局
- 4. 頁面佈局autoresizing
- 5. CSS 頁面 佈局
- 6. CSS3 & 頁面佈局
- 7. flexbox 頁面佈局
- 8. beego 頁面佈局
- 9. css頁面佈局
- 10. 頁面佈局一
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 頁面佈局
- 2. 頁面佈局3
- 3. HTML頁面佈局
- 4. 頁面佈局autoresizing
- 5. CSS 頁面 佈局
- 6. CSS3 & 頁面佈局
- 7. flexbox 頁面佈局
- 8. beego 頁面佈局
- 9. css頁面佈局
- 10. 頁面佈局一