响应式web设计-第一章 HTML5、CSS3及响应式设计入门

1.手机上浏览的网页越多，需要优化的东西越多。放大缩小页面，然后为了看到视口外的文字，再左右拖动

大多数情况，根据视口大小为用户提供与之匹配的视觉效果还是优先选择。（字体大小要调整）

一句话概括响应式：针对任意设备对网页内容进行完美布局的一种显示机制

2.大多数情况不使用像素px，而会用em或%（相对度量单位）

Internet Explorer用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址如下：http://www.microsoft.com/download/en/details.aspx?id=18359
如果你在使用Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）。

Firefox用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome请下载Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdan- hinjdeammmilcgefonfh）。

3.HTML5新增了语义化标签元素

<header><nav><ul id="nav-list"><li>Home</li><li>About</li></ul></nav>
</header>

页面中的一些通用结构体如头部和导航等有了独立的标签，使用nav会使代码更有语义化。搜索引擎能比以前更好地理解我们的网页，相应地评定网页内容。

4.css3为响应式设计和更多创新奠定基础

①为了给<a>元素添加圆角背景方法一：需要两张图片（滑动门）

a{display: block;height: 40px;float: left;font-size: 1.2em;padding-right: 0.8em;background: url("images/huadong-left.png") no-repeat scroll top left;
}
a span{background: url("images/huadong-right.png") no-repeat;display: block;line-height: 40px;padding-left: 0.8em;padding-right: 0.8em;
}

<a href="#"><span>Box Title</span></a>

图片：

滑动门还要了解可以看我的 https://blog.csdn.net/weixin_41056807/article/details/81201648

为了给<a>元素添加圆角背景方法二：css“雪碧”（Sprite）技术，将两张图片合成一张，然后用background-position属性来调整定位，虽然节省一点带宽，但是不是一个灵活的方案.

上面方法一用了a和span标签，增加一个多余标签（例子中为span）和两次额外的服务器端HTTP请求（两张图片）较为繁琐。所以出现css3，代码简化为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/**{*//*margin: 0;*//*padding: 0;*//*}*/a{display: block;height: 40px;float: left;line-height: 40px;font-size: 1.2em;padding-left: 0.8em;padding-right: 0.8em;border-top-left-radius: 8px;border-top-right-radius: 8px;background: url("images/huadong-right.png") no-repeat;background-repeat: repeat-x;}</style>
</head>
<body><a href="#">Box Title</a>
</body>
</html>

效果：

注意：在使用图片作为背景时，一定要对其高度注意，以防内容溢出（缺点会产生更大的图片，需要更多带宽）

css3提供border-radius及相关属性帮助设置圆角

css3进一步不再需要渐变背景图片而是使用浏览器渲染的效果

有关渐变的文章：https://www.cnblogs.com/xiaohuochai/archive/2016/04/12/5370446.html

5.css代码可以给不支持渐变的浏览器提供一个纯色背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">a{display: block;height: 40px;float: left;line-height: 40px;font-size: 1.2em;padding-left: 0.8em;padding-right: 0.8em;border-top-left-radius: 8px;border-top-right-radius: 8px;background-color: #42c264;}</style>
</head>
<body><a href="#">Box Title</a>
</body>
</html>

还有

background-image: -webkit-linear-gradient(#4fec50,#42c264);

background-image: -moz-linear-gradient(#4fec50,#42c264);
background-image: -o-linear-gradient(#4fec50,#42c264);
background-image: -ms-linear-gradient(#4fec50,#42c264);
background-image: -chrome-linear-gradient(#4fec50,#42c264);
background-image: linear-gradient(#4fec50,#42c264);

linear-gradient属性是指示浏览器从第一个颜色值渐变到另一个颜色，不同的前缀适合不同浏览器（包括 -moz- 代表的
Mozilla Firefox， -ms- 代表的 Microsoft Internet Explorer等）

6.网站不必在所有浏览器中表现一致。应该支持现代浏览器，通过响应式网页设计，响应不同设备的不同浏览器视口

例子

http://demo.marcofolio.net/3d_animation_css3

http://designlovr.com/ examples/dynamic_stack_of_index_cards/

响应式web设计-第一章 HTML5、CSS3及响应式设计入门相关推荐

HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
原链接:https://www.cnblogs.com/libaoli/p/5779629.html 作者:请叫我阿力这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方, ...
html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片带进度条图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4 　真正的HTML5
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第1章,第1.4节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)（第4版）（微课版）
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑锁定讨论上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...
第一章 HTML5基础
第一章 HTML5基础什么是前端开发? 以一个网站为例包括网站设计.前端开发.程序开发等.网站设计就是网站的外观,平面的东西.程序开发也好理解就是功能实现.而前端开发,简单来说,就是把平面效果 ...
《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.5　RDFa
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第2章,第2.5节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
框架设计--第一章 Spring的基本应用--习题答案
摘要:微信搜索[三桥君] 课程介绍:"框架技术"是软件工程专业的核心课程,是本专业限选课,是Java 应用开发课程,是本专业学生就业的主要方向. 说明:框架设计其他章节的习题答案也 ...
走向ASP.NET架构设计--第一章：走向设计
走向ASP.NET架构设计--第一章:走向设计前言:很多做开发的人都在不断的摸索着,积极的学习,试图找出一条走向架构设计的成功法则.每当有人问起我们的职业,我们也常常在说:"软件设计&qu ...
c语言程序第一章编程,c语言程序的设计第一章 C语言编程入门.ppt
c语言程序的设计第一章 C语言编程入门第1章 C语言编程入门本章是本书的入门篇,专为初学者熟悉编程过程.掌握程序结构而准备的. 本章学习目标 ? 1)? 能够通过模仿与改变来构造带有测试函数的C语 ...

响应式web设计-第一章 HTML5、CSS3及响应式设计入门

响应式web设计-第一章 HTML5、CSS3及响应式设计入门相关推荐

最新文章

热门文章