Web全栈开发案例教程（AI辅助版）-实验大纲实验三 响应式布局网页的制作.docxVIP

实验三响应式布局网页的制作

实验目的：掌握媒体查询、flex布局，自适应图片的实现方法。能运用媒体查询为网页在不同分辨率下分别设置不同样式。

实验任务：完成响应式布局网页的布局代码和完整页面。

实验步骤：

1.用flex布局实现下图的布局

关键代码如下：

.main{

display:flex;flex-flow:row; /*设置main元素为弹性容器*/

min-height:200px;margin:0px;padding:0px;}

.mainarticle{

margin:4px; padding:5px;background:#719DCA;

flex:3;order:2;}

.mainnav{

margin:4px;padding:5px; background:#FFBA41;

flex:1; order:1;}

.mainaside{

margin:4px; padding:5px; background:#FFBA41;

flex:1; order:3;}

header,footer{

margin:4px; padding:5px; min-height:50px;

border:2pxsolid#FFBA41;}

@me