生活随笔
收集整理的這篇文章主要介紹了
HTML常用布局方式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言：對(duì)HTML的學(xué)習(xí)，在了解了基礎(chǔ)的語(yǔ)法之后，需要學(xué)習(xí)與掌握的是，HTML的基礎(chǔ)布局方式，這個(gè)是網(wǎng)頁(yè)布局的基礎(chǔ)，本文講解是當(dāng)前常用布局。
布局一
示例圖：
代碼部分：
<!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>
總結(jié)
以上是生活随笔為你收集整理的HTML常用布局方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
