W3Schools教学系列W3Schools是知名的网页设计/前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详细教学，还可以用作描述文件（文档）。有经验的前端都或多或少接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的HowTo部分包含了很多非常实用的例子，例如如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。所以我想制作一系列专门介绍这些操作方法的视频。视频链接哔哩哔哩YouTube响应式网页布局2019年的今天，基本上所有的新网页都会响应式（Responsive）来适应手机端的显示。响应式网页布局的实现方式主要有以下三种：FloatFlexboxCSSGrid当然以上三种都需要配合MediaQuery使用。其中CSSGrid是最新的，也是我最佩服的，但是因为太新，旧的浏览器都不支持。然而，大多数浏览器已经支持它，我个人不会太担心它。要了解哪些浏览器支持CSS网格（或其他新功能），请转到我可以使用吗。CSSGrid完全是为网页布局和其他二维（水平加垂直）布局而设计的。相信以后的网页也会采用这种设计。Flexbox也是新的，但浏览器支持比CSSGrid更好。基本上，目前的主流已经转向了Flexbox，Bootstrap就是一个很好的例子。但事实上，Flexbox是为一维布局（水平或垂直）设计的，而网页布局往往是二维的，Flexbox并不是最好的选择，但由于CSSGrid来得太晚，Flexbox可以完成任务，并且现在很多新的网页和前端框架都使用了Flexbox。float最初是为了处理文本换行等问题而设计的，后来被用于布局设计。float布局存在各种问题，正在逐渐被淘汰，但是因为过去太普遍了，相信短时间内不会消失，所以也很有必要去了解一下。W3Schools介绍了这三种设计。分三篇，先从今天最老的Float说起。Float网页布局Float布局的重点是让元素向同一个方向倾斜（向左或向右）用百分比控制每个元素的宽度通过MediaQuery改变元素的宽度以适应不同的屏幕尺寸W3Schools的例子有本例中有两个关键点，一是设置左右两列向左浮动，宽度分别为75%和25%：/*Leftcolumn*/.leftcolumn{float:left;width:75%;}/*右列*/.rightcolumn{float:left;宽度：25%；背景色：#f1f1f1；padding-left:20px;}其次是MediaQuery设置，当屏幕尺寸小于800px时，让左右条的宽度变为100%，以实现响应式设计：@mediascreenand(max-宽度：800像素）{.leftcolumn，.rightcolumn{宽度：100%；填充：0；}}或许你会注意到，导航栏（.topnav）也做了类似的处理，既然原理一样，就不多说了。改进：之前介绍过移动优先原则（MobileFirst），即先设计小屏版，然后通过MediaQuery设置桌面版。W3School的这个例子没有采用这个原则，我们可以修改它以符合它。方法很简单，把MediaQuery里面的内容和外面对应的内容倒过来就行了，别忘了把MediaQuery从max-width改成min-width。/*左列*/.leftcolumn{float:left;width:100%;}/*右列*/.rightcolumn{float:left;宽度：100%；背景色：#f1f1f1；padding:0;}@mediascreenand(min-width:800px){.leftcolumn{width:75%;}.rightcolumn{宽度：25%；左填充：20px；}}可以自己修改.topnav试试，注意，不指定宽度是auto。另外，我发现原来的例子是以400px为断点的。改成min-width后没有反应，需要改成500px。具体原因我不太清楚，如果你知道，请告诉我。本人开通了W3Schools系列代码专用的GitHub仓库，查看MobileFirst版本代码请移步：W3SchoolsGitHub
