使用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;}

}

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

谢谢你的阅读。

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 笔记参考自《响应式Web设计:HTML5和CSS3实践》,2013年出版内容说不上最新。如下是全书的章的目录:第 ...
    于晓鱼阅读 947评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,333评论 0 11
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,199评论 0 11
  • 我们都知道参可以补身体,也是名贵的药材。可是,你知道人参、红参、沙参、党参、西洋参、高丽参各有什么不同吗? 一、参...
    花小姐MissJamie阅读 3,395评论 0 2