大多數(shù)現(xiàn)代網(wǎng)站使用響應(yīng)式網(wǎng)頁設(shè)計(jì)，現(xiàn)在您必須考慮實(shí)際反應(yīng)的意義，響應(yīng)式網(wǎng)站可以適應(yīng)不同的屏幕尺寸，并可以相應(yīng)地調(diào)整其設(shè)計(jì)和布局。

在本教程中，我們將學(xué)習(xí)如何使用HTML和CSS進(jìn)行響應(yīng)式網(wǎng)站設(shè)計(jì)，但首先，我們將了解基本網(wǎng)站布局如何，請(qǐng)參見下圖。

上述布局是一個(gè)簡(jiǎn)單的網(wǎng)站布局，我們將首先構(gòu)建上述布局，然后我們將其轉(zhuǎn)換為響應(yīng)式布局。布局的HTML框如下所示

現(xiàn)在讓我們來做設(shè)計(jì)部分，給我們無聊的HTML一些colours.So讓我們制作一個(gè)名為style.css的CSS文件，并在其中鍵入下面的代碼

body{margin:0;padding:0;}

.flt-left{float:left;}.flt-right{float:right;}

.clear{clear:both;}.header-wrap{width:100%;}

.header{padding:20px 0 20px 0;background:lightcoral;max-width:1000px;margin:auto;color:white;font-family:Verdana, Geneva, Tahoma, sans-serif;text-align:center;}

.main-wrap{width:100%;margin:0;}

.main-container{max-width:1000px;margin:auto;color:white;font-family:Verdana, Geneva, Tahoma, sans-serif;text-align:center;}

.main{width:73%;background:lightgreen;margin:0;}

.sidebar{width:20%;background:lightsalmon;margin:0;}

.footer-wrap{width:100%;margin:0;padding:0;}

.footer{padding:20px 0 20px 0;background:lightcoral;max-width:1000px;margin:auto;color:white;font-family:Verdana, Geneva, Tahoma, sans-serif;text-align:center;}

現(xiàn)在我們已經(jīng)成功構(gòu)建了我們的布局，但它仍然沒有響應(yīng)，所以我們將使其做出響應(yīng)，制作一個(gè)名為response.css的新的CSS文件，并在其中鍵入下面的代碼

@mediascreen and(max-width:700px){

body{margin:0;padding:0}

p{padding:0;margin:0;}

.header{margin:auto;width:100%;}

.main{float:none;margin:auto;width:100%;padding:20px 0 20px 0;}

.sidebar{float:none;margin:auto;width:100%;padding:20px 0 20px 0;}

}

現(xiàn)在我們已經(jīng)成功構(gòu)建了響應(yīng)式布局，上述布局將自動(dòng)適應(yīng)不同的屏幕尺寸。

謝謝你的閱讀。

將您的查詢和反饋發(fā)送在下面評(píng)論您的問題。

另外，別忘了訂閱我們的簡(jiǎn)書。

如果你喜歡這篇文章，那么請(qǐng)分享一下，幫助我們成長(zhǎng)。