五、理解页面重用机制

大量的内容可以分为几种模式，利用CSS的嵌套完成大部分的工作。

1）一些关于页面重用的理念

1.就像搭积木一下，用积木来比喻网页制作中的组件重用是再好不过的了。

2.都在容器里，之前讨论的article组建就是一个容器。组件就是容器的另一个叫法。

六、页面模版

1）配置模版选项

html5boilerplate是个知名的模版工具。

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

1.HTML元素周围的条件注释，“Conditional Stylesheets vs CSS Hacks”有更多介绍。

2.设置字符集

3.使用IE兼容模式，msdn上有详细介绍

4.为iPhone使用Viewport

5.加载jQuery

2）设置栅格

书里推荐的是1140px CSS Grid，但点击主页发现作者已经让它退役了。只能去其他地方下载。

PDF文档下载：

http://download.csdn.net/detail/loneleaf1/8425175

posted on 2015-02-06 13:15 咖啡机（K.F.J）阅读(440) 评论(0) 收藏举报

刷新页面返回顶部

五、理解页面重用机制

六、页面模版

公告