网站搜索查询,友博国际个人中心登录,wordpress加入移动端导航栏,腾讯的网站建设用了多少钱W3Schools教学系列 W3Schools是知名的网页设计#xff0f;前端开发教学网站#xff0c;不仅提供HTML、CSS、JavaScript等的详尽教学#xff0c;还可以把它当作说明文件#xff08;Documents#xff09;。有经验的前端或多或少已经接触过这个网站#xff0c;因为它经常出现… W3Schools教学系列 W3Schools是知名的网页设计前端开发教学网站不仅提供HTML、CSS、JavaScript等的详尽教学还可以把它当作说明文件Documents。有经验的前端或多或少已经接触过这个网站因为它经常出现在搜索结果的前几项。其中它的How To部分更是包含了大量非常实用的例子例如如何制作SlideShow图片轮播、Lightbox、Parallax视差效果等等。因此我想做一系列的影片专门介绍这些How To。 视频连结 B站YouTube响应式网页布局 今天已经是2019年基本上所有新建的网页都会是响应式(Responsive)以适应在手机显示。而实现响应式网页布局主要有3种方法 FloatFlexboxCSS Grid当然以上三者都需要搭配Media Query使用。 其中CSS Grid是最新也是我最推崇的但由于太新较旧的浏览器并不支持。不过大部分的浏览器其实都已经支持了我个人不会太担心。要想知道哪些浏览器支持CSS Grid或其他新功能可以前往Can I Use查询。CSS Grid完全就是为了网页布局及其他二维横向加纵向布局而设计的相信未来的网页都会采用这一设计。 Flexbox也算新但浏览器支持的情况比CSS Grid要好点。基本上目前主流已经转向FlexboxBootstrap就是很好的例子。但其实Flexbox是为一维布局设计的横向或纵向而网页布局往往是二维的Flexbox并非最佳选择但由于CSS Grid来得太迟Flexbox又能完成任务现在不少新的网页以及前端框架采用Flexbox。 Float原来是设计来处虑理文绕图之类的问题后来被用于布局设计。Float布局有著各种各样的问题已经在逐渐淘汰中但由于过去应用太普遍相信短时间内并不会消失因此也有必要瞭解。 这三种设计W3Schools都有介绍。我会分成三篇来讲今天先从最古老的Float开始。 Float网页布局 Float布局的重点是 让元素靠向同一个方向左或右用百分比控制每一个元素的宽度透过Media Query改变元素宽度以适应不同屏幕尺寸W3Schools的例子 这个例子的重点有两处一是设定左右两栅都向左float宽度分别为75%和25% /* Left column */
.leftcolumn { float: left;width: 75%;
}/* Right column */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
} 二是Media Query设定当屏幕尺寸小于800px时让左右两栅的宽度都变成100%以实现响应式设计Responsive Design media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;}
} 或许你会注意到导航栏.topnav也进行了类似的处理由于原理一样就不多说了。 改进移动优先原则Mobile First 之前介绍过移动优先原则即先设计小屏幕版再透过Media Query设定桌面版。W3Schools的这个例子并没有采取这一原则我们可以自行修改使之符合。方法很简单只要将Median Query里的内容和外面相应的内容反过来即可不要忘了把Media Query从max-width改为min-width。 /* Left column */
.leftcolumn { float: left;width: 100%;
}/* Right column */
.rightcolumn {float: left;width: 100%;background-color: #f1f1f1;padding: 0;
} media screen and (min-width: 800px) {.leftcolumn { width: 75%;}.rightcolumn {width: 25%;padding-left: 20px;}
} 你可以试著自行将.topnav也修改一下要注意width如果没有特别指定便是auto另外我发现原本例子采用的400px作为断点换成min-width之后没有反应需要改为500px。具体原因我也不太确定如果你知道的话欢迎告知。 我开了一个GitHub的仓库专门放W3Schools系列的代码要查看Mobile First版的代码请移步W3Schools GitHub
