专栏首页快乐八哥Web Fundamentsals学习1-Multiple-Screen-Site

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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Docker-Docker for Web Developers(2)

    1. 使用镜像 1.1 在Docker Hub上查找镜像 我们查找一下之前博客里面,推送到Docker Hub里面的bage88/docker-demo,能看到...

    八哥
  • 掌握Docker命令-Docker for Web Developers(4)

    1.管理镜像命令 获取镜像 docker push ubuntu:14:04 查看镜像列表 docker images 重命名image docker tag ...

    八哥
  • 如何高效进行公众号/博客写作

    支持Markdown的编辑器有很多,比如前端开发者经常写代码的Visual Studio Code、印象笔记,有道云笔记等。

    八哥
  • linux学习第三十九篇:Apache用户认证,域名跳转,Apache访问日志

    Apache用户认证 虚拟主机的配置文件: vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf ...

    用户1215343
  • cURL-7.72.0初体验(参数写法)

    这个东西其实就是我现在的写法就是最正宗的写法,就是小写C,大写URL,一定要写对,显得你专业不说,其实更是对软件的一种敬意吧。

    云深无际
  • 干货:4个小技巧助你搞定缺失、混乱的数据(附实例代码)

    导读:数据工作者经常会遇到各种状况,比如你收集到的数据并不像你期待的那样完整、干净。此前我们讲解了用OpenRefine搞定数据清洗,本文进一步探讨用panda...

    华章科技
  • WP_Widget_PostViews has a deprecated constructor 报错解决

    今天在调试 WordPress 的时候,打开了 DEBUG 信息,结果额外出现了如下报错信息: Deprecated: Methods with the sam...

    张戈
  • spring mvc注入配置文件里的属性

    后来想了下,我项目是用spring mvc的,主要是controller需要读取这些配置信息, 而spring mvc的配置文件和spring的配置文件非同一...

    試毅-思伟
  • springboot-配置文件的注入

    使用@ConfigurationProperties注解批量注入配置文件中的多个值

    DataScience
  • php实现分页代码

    $page = empty($_GET['p'])?1:($_GET['p']);

    思梦php

扫码关注云+社区

领取腾讯云代金券