国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初體驗 項目1-1 三欄布局頁面

2年前作者：m0_73657966分類：Toy博客閱讀(36)違法舉報

這篇具有很好參考價值的文章主要介紹了響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初體驗 項目1-1 三欄布局頁面。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

項目展示

三欄布局是一種常用的網(wǎng)頁布局結(jié)構(gòu)。
除了頭部區(qū)域、底部區(qū)域外，中間的區(qū)域（主體區(qū)域）劃分成了三個欄目，分別是左側(cè)邊欄、內(nèi)容區(qū)域和右側(cè)邊欄，這三個欄目就構(gòu)成了三欄布局。當(dāng)瀏覽器的寬度發(fā)聲變化時，頁面中左側(cè)邊欄和右側(cè)邊欄的寬度固定不變，而內(nèi)容區(qū)域的寬度會隨著瀏覽器窗口寬度大小的變化而變化。

項目目錄結(jié)構(gòu)

在進(jìn)行項目開發(fā)之前，首先需要完成項目目錄結(jié)構(gòu)的搭建。
響應(yīng)式web開發(fā)項目教程(html5+css3+bootstrap),前端,html5,css3響應(yīng)式web開發(fā)項目教程(html5+css3+bootstrap),前端,html5,css3
index.html文件用于實現(xiàn)項目的頁面結(jié)構(gòu)，CSS目錄下的style.css文件用來實現(xiàn)項目的頁面結(jié)構(gòu)。

index.html具體代碼

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>三欄布局頁面</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<!--頭部區(qū)域-->
<header>
  <h4>頭部區(qū)域</h4>
</header>
<!-- 主體區(qū)域-->
<div class="main"> 
  <!--左側(cè)邊欄-->
  <aside class="left">
    <p>左側(cè)邊欄</p>
  </aside>
   <!--右側(cè)邊欄-->
  <aside class="right">
    <p>右側(cè)邊欄</p>
  </aside>
  <!--中間內(nèi)容-->
  <section class="middle">
    <p>內(nèi)容區(qū)域</p>
  </section>
</div>
<!--底部區(qū)域-->
<footer>
  <p>底部區(qū)域</p>
</footer>
</body>
</html>

style.css具體代碼

@charset "utf-8";
/* CSS Document */
/*初始化默認(rèn)樣式*/
html,body,h4,p{
	padding:0;
	margin:0;
	text-align:center;
	font-size:16px;
	}
/*設(shè)置頭部和底部區(qū)域的高度*/
header,footer{
	height:25px;
	}
/*設(shè)置主體區(qū)域的樣式*/
.main{
	boder-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
    /*內(nèi)邊距：上下邊距為0，左右邊距為100px*/
	padding:0 100px;
	}
.left{
	background:#eee;
	width:100px;
    /*定位方式:絕對定位*/
	position:absolute;
    /*左側(cè)邊距為0*/
	left:0;
	}
.middle{
	background:#ddd;
	}
.right{
	background:#eee;
	width:100px;
    /*定位方式:絕對定位*/
	position:absolute;
    /*右側(cè)邊距為0*/
	right:0;
	}
/*設(shè)置左側(cè)邊欄、右側(cè)邊欄和內(nèi)容區(qū)域高度為199px*/
.left, .right, .middle{
	height:199px;
	}

建議

在編碼時按照項目分析中的需求，先編寫HTML5文件中的整體結(jié)構(gòu)，主要包括< header > 、< footer >、< div >、< aside >和< section >標(biāo)簽，然后使用CSS定位實現(xiàn)三欄布局結(jié)構(gòu)。編寫完成后保存文件，用瀏覽器打開index.html頁面，即可出現(xiàn)三欄布局頁面效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-796339.html

到了這里，關(guān)于響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初體驗 項目1-1 三欄布局頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包