使用HTML和CSS构建响应式网站布局

大多数现代网站使用响应式网页设计，现在您必须考虑实际反应的意义，响应式网站可以适应不同的屏幕尺寸，并可以相应地调整其设计和布局。

在本教程中，我们将学习如何使用HTML和CSS进行响应式网站设计，但首先，我们将了解基本网站布局如何，请参见下图。

上述布局是一个简单的网站布局，我们将首先构建上述布局，然后我们将其转换为响应式布局。布局的HTML框如下所示

现在让我们来做设计部分，给我们无聊的HTML一些colours.So让我们制作一个名为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;}

现在我们已经成功构建了我们的布局，但它仍然没有响应，所以我们将使其做出响应，制作一个名为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;}

}

现在我们已经成功构建了响应式布局，上述布局将自动适应不同的屏幕尺寸。

谢谢你的阅读。

将您的查询和反馈发送在下面评论您的问题。

另外，别忘了订阅我们的简书。

如果你喜欢这篇文章，那么请分享一下，帮助我们成长。