Web Fundamentsals学习1-Multiple-Screen-Site

你的一个运行于多设备网站(Your First Multi-device Site)

遵循的步骤:

1.定义信息架构(information architecture)和页面结构(structure of the pages)。

2.添加设计元素,并且使它是响应式的,而且在各个设备看起来都不错

指南:

01 创建你的页面内容和结构 https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/content

02: 使它变成自适应 https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

 

 

01-Create Your Content and Structure

  • 创建页面结构
  • 添加内容到页面上

用户在form表单输入手机号码,应该调用出数字键,方便用户输入。

网站使用的图片分为2种类型:

1.内容图片

2.样式图片

img标签必须保证有alt属性,这样屏幕阅读器才能更好识别这是一张图片,而且读出来。

 

 

02-Make it Responsive

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

开发理念:Mobile First.首先开发基于手机屏幕的页面,然后我们扩展到大屏幕尺寸。

 

总结:

在新项目开发中,移动优先考虑,在涉及到使用百分比布局时,特别是在处理表单的情况下,可以考虑使用box-sizing:border-box,这个属性非常好用,很容易处理input等相关元素的宽度一致问题。下一篇分析使用box-sizing。

Web Fundamentsals学习1-Multiple-Screen-Site,布布扣,bubuko.com

时间: 2024-10-30 16:30:20

Web Fundamentsals学习1-Multiple-Screen-Site的相关文章

What technical details should a programmer of a web application consider before making the site public?

What things should a programmer implementing the technical details of a web application consider before making the site public? If Jeff Atwood can forget about HttpOnly cookies, sitemaps, and cross-site request forgeries all in the same site, what im

Web安全学习计划

http://cisps.org/bbs/viewtopic.php?f=71&t=26125 标题为Web安全学习计划,实属我的愿望:将下面这份Web学习清单完善成为一个Web安全,学习计划指导性帖子. 说明:本来打算给自己设计一个详细的学习计划,但是发现这些学习内容罗列出来后,发现这是个很庞大的系统,一时不知该如何来安排时间(自已把自己杯具了~~).那就暂时成了如下的一个学习清单列表.发表出来,希望看看大家的建议.想成学习计划虽为私心,但如果修改得好也是一个福利大多想学习Web安全的朋友的一

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

【web前端学习部落22群】分享 碰撞的小球开源小案例

对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家答疑解惑呢! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>碰撞的小球</title> <style type="text/cs

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

Android Web Service学习总结(一)

最近学习android平台调用webWebService,学习了一篇不错的博客(http://blog.csdn.net/lyq8479/article/details/6428288),可惜是2011年时的方法,而不适合现在android4.0之后的android版本,所以通过一番学习和研究,总结如下. web Service简介 通俗的理解:通过使用WebService,我们能够像调用本地方法一样去调用远程服务器上的方法.我们并不需要关心远程的那个方法是Java写的,还是PHP或C#写的:我

【web开发学习笔记】Structs2 Action学习笔记(一)

1.org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter准备和执行 2. <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> url-pattern约定熟成只写/*,没必要写*.action 3. <

Web 开发者学习路线图

2017 Web 开发者学习路线图(头图源自谷歌) 本文是源自 Github 上 Kamran Ahmed 建立的一个仓库.在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops 人员需要掌握的学习路线图,以便与他的学生们分享他们的观点. 同时,有任何改进的建议或意见也欢迎给作者提 PR .那么,我们一起来看看需要 Get 哪些技能? 介绍 前端开发学习路线图 对于后端,作者更喜欢使用 Node JS 和 PHP-7,同时最近他也在研究 GO 语言.除了学习上述所说的,如果还可

Android Web Service学习总结(二)

上篇文章做好了准备工作,现在就实践(android平台调用web service实现号码归属地查询) 1.    Ksoap2-android简介 在Android平台调用web service需要依赖于第三方类库ksoap2,它是一个SOAP Web service客户端开发包,主要用于资源受限制的Java环境如Applets或J2ME应用程序(CLDC/ CDC/MIDP).在Android平台中我们并不会直接使用ksoap2,而是使用ksoap2 android.KSoap2 Androi