分享更有价值
被信任是一种快乐

HTML5+CSS3基础响应式页面布局实例分析

文章页正文上

这篇文章主要介绍了HTML5+CSS3基础响应式页面布局实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5+CSS3基础响应式页面布局实例分析文章都会有所收获,下面我们免费云主机、域名一起来看看吧。
  一、响应式页面布局的概念
  响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览器而诞生的。
  二、响应式布局的优势
  响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
  三、响应式布局网站案例(如下图所示):
  核心知识点
  v 弹性盒模型
  v 媒体查询
  四、弹性盒模型
  弹性盒布局模型是css3规范中提出的一种新的布局方式。
  目的:提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间
  优势:这种布局模式已被主流浏览器所支持,可以在web应用开发中使用。
  说明:
  1.flex是display的一个属性值。
  2.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:主轴(main axis)和交叉轴(cross axis)。
  Flex容器属性
  flex-direction: row | row-reverse | column | column-reverse;
  flex-direction:row;
  flex-direction:row-reverse;
  flex-direction:column;
  flex-direction:column-reverse;
  justify-content 定义了Flex项目在主轴方向上的对齐方式
  flex-start | flex-end | center | space-between | space-around;
  justify-content:flex-start;
  justify-content:flex-end;
  justify-content:flex-center;
  justify-content:space-between;
  justify-content:space-around;
  align-items:flex-start | flex-end | center | baseline | stretch; 定义项目在交叉轴上的对齐方式(适用于父类容器【弹性盒子】元素上)
  align-items:flex-start;
  align-items:flex-end;
  align-items:center;
  align-items:baseline;
  align-items:stretch;
  五、媒体查询
  1.什么是媒体查询
  使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
  @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
  当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
  2.媒体查询的作用
  可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果,是响应式布局实现的主要方式
  3.媒体查询的语法
  v 外联css语法:
     媒体类型:mediatype
  关键字:and|not|only
  媒体特征:media feature
  实例:
     v 内嵌样式的语法:
  @media mediatype and|not|only (media feature) { … }
  媒体类型:mediatype
  关键字:and|not|only
  媒体特征:media feature
  @ media screen and (max-width: 960px){
  body
  {
  @ media screen and (max-(min-width:960px) and (max-width:1200px){
  body{
  background:yellow;
  }
  四、课堂案例
  下面是一个响应式布局的简单案例
  导航部分:
  1) 导航部分由logo,导航和登录三部分组成,这三部分放置在一个header的父容器中,给header设置display:flex;使之成为弹性盒模型,并设置主轴方向为row,子元素在父容器中的对齐方式为两端对齐。
  2) 当窗口小于等于640px时,将导航隐藏,添加媒体查询
  图片列表部分
  1) 所有的图片都放置在一个class名为picture的父容器中,给父容器添加display:flex;使之成为弹性盒模型,并设置子元素的对齐方式为居中对齐(justify-content:center;),并设置每一个子元素占据父元素的25%,溢出换行显示。
  2) 添加媒体查询, 当窗口小于640px时,每行放置两张图片,即每个子元素占据50%;关于“HTML5+CSS3基础响应式页面布局实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“HTML5+CSS3基础响应式页面布局实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: CSS怎么实现网页背景半透明

这篇文章主要介绍“CSS怎么实现网页背景半透明”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS怎么实现网页背景半透明”文章能帮助大家解决问题。 设置装备摆设DIV半通明CSS代码: 阐明: 1、filter:对wi…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册