zoukankan      html  css  js  c++  java
  • 小结:响应式Web设计(HTML5和CSS3实战)

    作者主要传达的思想是:  利用HTML5更富有语义的标签和CSS3优秀的新特性,通过媒体查询与流式布局相结合, 实现精简的响应式网站

    第一章, 讲述了HTML5和CSS3带来的便利, 使开发者更高效的开发和维护网站,同时作者也传达着“渐进增强”的理念,这个在整本书中都可以体会到。

    第二章,这一章主要介绍CSS3媒体查询模块,列举一个简单的媒体查询:

    @media screen and (max-960px){
        body{
            background-color: orange;
        }
    }
    
    @media screen and (max-768px){
        body{
            background-color: green;
        }
    }
    
    //代码的意思是:对于视口大小在960px之内的时候背景显示为橘黄色, 如果小于768px的时候新的样式(绿色背景)会覆盖前面的样式。

    例外讨论到,编写页面标签是应该遵守“内容优先”的原则。

    第三章,介绍了将固定布局转换为流式布局的公式:目标元素宽度÷上下文元素宽度 = 目标比宽度(结果尽量多保留几位小数),设置弹性图片:

    img{
        max-width: 100%;
        height: auto;
    }

    还可以利用PHP脚本生成不同尺寸的图片,详情猛戳:Adaptive-images

    第四章,简要的介绍的一些比较常用的HTML5标签,  推荐了一款polyfill--Modernizr, 使不支持HTML5的浏览器兼容。

    第五章,介绍了CSS3中一些新的属性选择器,还有颜色模式和透明通道,略过。。

    第六章,讲了CSS3中的一些新的属性,像box-shadow, text-shadow以及 gradient(渐变)。

    第七章,CSS3过渡变形和强大的动画:

      过渡具有四个属性:  transition-property(要过渡的CSS属性名称), transition-duration(效果持续的时间), transition-timing-function(速度如何变化:ease, linear or cubic-bezier), transition-delay(可选, 过渡开始时的延迟时间)

      变形包括:scale(缩放), translate(移动), rotate(旋转), skew(沿X和Y轴对元素进行斜切), matrix(以像素精度来控制变形效果)

      CSS3动画由两部分组成: 关键帧的声明 + 动画属性中使用声明。例如:

    @keyframe warning{
        0%{
            text-shadow: 0 0 5px #000;
        }
        50%{
            text-shadow: 0 0 5px #999;
        }
        100%{
            text-shadow: 0 0 5px #FFF;
        }
    }
    h5{
        animation: warning 1.5s infinite ease;
    }

    第八章, 介绍HTML5中强大的表单, 这个基本跟w3school上的教程类似。

    第九章, 跨浏览器解决方案-采用Mondernizr

    总体来说, 这本书对响应式网站的建设简单的介绍了下, 对HTML5和CSS3中一些比较常用的标签讲解了一番, 内容看起来不难,  语言还是挺有趣的

  • 相关阅读:
    Java——Math,Set,List,map相关练习
    Java——单例模式、多线程
    Java——I/O入门相关练习代码
    Java——I/O相关练习代码
    Java——序列化与反序列化
    python-selenium-粘贴,删除,复制和悬停
    Typora图床设置(阿里云版,图片自动上传)
    图书管理系统(Java实现,十个数据表,含源码、ER图,超详细报告解释,2020.7.11更新)
    openresty的安装和使用
    工具丨超好用的免费AWR分析工具
  • 原文地址:https://www.cnblogs.com/MockingBirdHome/p/3135743.html
Copyright © 2011-2022 走看看