如何用html制作一号网点首页？

参考老师的教程一步一步来。

学习是循序渐进的，制作了这个首页目的不是为了完成这个首页，而是制作过程中对标签的嵌套组合和CSS的使用。这主要是靠题主自己的逻辑而不是复制现成的代码。

如果是想自己动手的话，第一步就是观察设计图或者是成品图，将首页的每一个组成都分别拆开，比如顶部导航，中间商品和底部版权。之后再一次分割，头部导航分为导航链接和登录注册区域，依次分割，分到自己觉得合适的大小即可，逐步完成。

不必设置为首页，只需要在连接到首页的连接href改为这个页面就可以了～

如果是浏览器打开的首页，那就是在浏览器设置中更改：(chrome)

（Firefox）

var homePage = {    

  is : function(url) { //IE判断当前页面是否主页   

    url = url || window.location.href    

    if (document.all) {    

      // http://msdn.microsoft.com/en-us/library/ms531394.aspx    

      document.body.style.behavior='url(#default#homepage)'    

      return document.body.isHomePage(url)    

    }    

    return false    

  },    

  set : function(url) {  //除了Chrome之外的FF和IE的设置方法  

    try {    

      url = url || window.location.href    

      if (document.all) {    

        if (!homePage.is(url)) {    

          document.body.style.behavior='url(#default#homepage)'    

          document.body.setHomePage(url)    

          return homePage.is(url)    

        }    

        return true    

      } else if (window.sidebar) {    

        if (window.netscape) {    

          try {    

            netscape.security.PrivilegeManager    

                    .enablePrivilege("UniversalXPConnect")    

          } catch(e) {      

             alert("请在浏览器地址栏输入“about:config”并回车" +    

               "然后将[signed.applets.codebase_principal_support]" +    

               "设置为“true”，点击“加入收藏”后忽略安全提示，即可设置成功。")    

          }    

        }    

        var prefs = Components.classes['@mozilla.org/preferences-service1']    

                      .getService(Components.interfaces.nsIPrefBranch)    

        prefs.setCharPref('browser.startup.homepage',url)    

        return true    

      }    

      // Not support exception    

      return false    

    } catch (e) {    

      return false    

    }    

  }    

}

对于Chrome暂时没有解决方案，上面的代码兼容IE和FF：

> homePage.set(window.location.href)

总体把页面一分为二，<header>是包含在<article>里面的，页脚部分是单独的一块儿。大致结构获悉了后再从局部入手，<header>部分，有主标题、副标题、还有作者署名，前面我们讲过，如果除了主标题，还有一个副标题，那可以把这两个标题写在一个<hgroup>元素中。如果除了主标题之外，还有其他内容，比如内容摘要、发表时间、作者、图片或者小标题链接等，那就应该把他们放在一个 <header>元素中。

<header>

<hgroup>

<h1>给个人博客增加色彩元素提升网站用户体验</h1>

<h2>网页的色彩——决定用户是否驻足停留的关键</h2>

</hgroup>

<p class="Byline">design by DanceSmile</p>

</header>

接下来是文章正文部分：

部分代码：

<div class="Content">

<p>第一眼看到杨青个人博客网站的时候，如果你喜欢...</p>

...

</div>

正文当中还有一幅插图，html5新增加了插图这个<figure>语义元素，<figcaption>不是只能包含文本，任何html元素都可以，比如链接、小图标。<figcaption>包含了对图片的完整说明，所以alt文本就显得多于了，这种情况下，可以把<img>元素中的alt属性删除：

<figure>

<img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">

<figcaption>图片来源：腾讯CDC《浅析网页色彩应用》</figcaption>

</figure>

最后在把上面的代码写在<article>里面。

<footer>部分只是一些简单的页脚信息。

---