生活随笔
收集整理的這篇文章主要介紹了
HTML常用布局方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言：對HTML的學習，在了解了基礎的語法之后，需要學習與掌握的是，HTML的基礎布局方式，這個是網頁布局的基礎，本文講解是當前常用布局。
布局一
示例圖：
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><style>.header{border-style: solid; text-align: center; height: 100px;width: 100%; }.left{height: 500px;width: 20%;margin-top: 10px;display: inline-block; border-style: solid;text-align: center;}.center{height: 500px;width: 79%;margin-top: 10px;display: inline-block;border-style: solid;text-align: center;}</style>
</head>
<body><div class="header">header
</div><div class="left">left
</div><div class="center">center
</div>
</body>
</html>
布局二
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><style>.header{border-style: solid; text-align: center; height: 100px;width: 100%;} .center{height: 500px;width: 100%;margin-top: 10px;display: inline-block;border-style: solid;text-align: center;}</style>
</head>
<body><div class="header">header
</div><div class="center">center
</div>
</body>
</html>
布局三
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><style>.center{height: 500px;width: 100%;border-style: solid;text-align: center;margin-bottom: 10px;}.buttom{height: 200px;width: 100%;border-style: solid;text-align: center;}</style>
</head>
<body><div class="center">center
</div><div class="buttom">buttom
</div>
</body>
</html>
布局四
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><style>.border1{border-style: solid;text-align: center;}.header{height: 200px;width: 100%;}.left{width: 23.5%;display: inline-block;}.center{width: 50%;display: inline-block;}.right{width: 23.5%;display: inline-block;}.buttom1{margin-top: 10px;margin-bottom: 10px;height: 200px;}.buttom{height: 200px;width: 100%;}</style>
</head>
<body><div class="header border1" >header
</div><div class="left border1 buttom1">left
</div><div class="center border1 buttom1">center
</div><div class="right border1 buttom1">right
</div><div class="buttom border1">buttom
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的HTML常用布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
