溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html如何實(shí)現(xiàn)百分比自適應(yīng)框架網(wǎng)頁模板

發(fā)布時(shí)間：2022-03-25 11:50:24 來源：億速云 閱讀：379 作者：小新 欄目：web開發(fā)

這篇文章主要介紹html如何實(shí)現(xiàn)百分比自適應(yīng)框架網(wǎng)頁模板，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

最外層DIV寬度采取百分比值完成構(gòu)造居中而長久適應(yīng)。

html如何實(shí)現(xiàn)百分比自適應(yīng)框架網(wǎng)頁模板
機(jī)關(guān)居中 自順應(yīng)網(wǎng)頁模板成績

1、殘破HTML CSS模板代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自適應(yīng)百分比HTML布局框架 CSS5</title>
<style type="text/css">
body {font: 100% 宋體, 新宋體;bac千克round: #666666;margin: 0;padding: 0;text-align: center;color: #000000;}
#container {
width: 80%; /* 這將樹立一個攻下 80% 涉獵器寬度的容器 */
background: #FFFFFF;
margin: 0 auto; /* 被動邊距（與寬度一路）會將頁面居中 */
border: 1px solid #000000;
text-align: left; /* 這將覆蓋 body 元素上的“text-align: center”。 */
}
#mainContent {padding: 0 20px; /* 請記取，添補(bǔ)是 div 方塊外部的空間，邊距則是 div 方塊外部的空間 */}
</style>
</head>
<body>
<div id="container">
<div id="mainContent">
<h2> 自適應(yīng)百分比機(jī)關(guān) </h2>
<p>1、最外層布局DIV寬度設(shè)置為百分比值，沒有設(shè)置詳細(xì)px或em，組織網(wǎng)頁寬度將根據(jù)閱讀器寬度而自順應(yīng)寬度。<br />
2、最外層DIV寬度配置80%，況且布局居中。為了看到結(jié)構(gòu)居中成就設(shè)置1px邊框。<br />
3、#mainContent設(shè)置padding擺布20px格式，讓形式隔絕距離最外層DIV的靠左與靠右有20px間距距離。</p>
<h3>H2 級此外標(biāo)題問題 </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,
justo convallis luctus rutrum, erat nulla fermentum diam, at nonu妹妹y quam ante ac quam.
Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.
Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
</div>
</body>
</html>

以上是“html如何實(shí)現(xiàn)百分比自適應(yīng)框架網(wǎng)頁模板”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手