<!-- 页面头部开始 -->

<!-- shortcut login_info -->

        <!-- mod1 -->

        <div class="login_info">

                <a href="" class="login"></a>

                <a href="" class="register"></a>

        </div>

        <!-- mod2 -->

        <div class="login_info">

                <ul>

                        <li>其它描述</li>

                        <li>

                                <a href="" class="login"></a>

                                <a href="" class="register"></a>

                        </li>

                </ul>

        </div>

<!--

shortcut login_info分析：

        首先看有多少列，有几个列就用几个div，如果只有两个且之间又有距离，通常采用左右浮动

        1：子模块1（登录注册）

                （1）如果只有两个登录注册按钮，可在div里直接放两个a

                        代码：

                                shortcut login_info

                                mod1

                                <div class="login_info">

                                        <a href="" class="login"></a>

                                        <a href="" class="register"></a>

                                </div>

                （2）如果除登录注册按钮之外还包含其它描述性内容，采用ul>li结构

                        代码：

                                mod2        

                                <div class="login_info">

                                        <ul>

                                                <li>其它描述</li>

                                                <li>

                                                        <a href="" class="login"></a>

                                                        <a href="" class="register"></a>

                                                </li>

                                        </ul>

                                </div>

-->

<!-- soortcut quick_menu -->

        <!-- mod1 -->

        <div class="quick_menu">

                <ul>

                        <li><a href="#"></a></li>

                        <li class="separator"></li>

                </ul>

        </div>

<!--

shortcut quick_menu分析：

        2：子模块2（quick_menu）

                （1）直接采用ul>li布局（items之间通常会用小竖线隔开，小竖线用li.separatop做）

                        mod1

                        <div class="quick_menu">

                                <ul>

                                        <li><a href="#"></a></li>

                                        <li class="separator"></li>

                                </ul>

                        </div>

-->

<!-- head logo -->

        <!-- mod1 -->

        <div class="logo">

                <h1><a href="index.html">logo</a></h1>

        </div>

<!--

head logo分析：

        1:子模块1（logo）

                （1）- logo  里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要

                         - h1里面在放一个连接，可以返回首页的，   给连接一个 大小 和  logo 的背景图片

                         - 连接 里面要放文字（网站名称），为了搜索引擎收录我们。  但是文字不要显示出来

                                   - 要用 text-indent  移到盒子外面 （text-indent: -9999px)   然后overflow:hidden  淘宝的做法

                                 - 直接给font-size: 0;  就看不到文字了，  京东的做法。

                         - 最后给 连接一个 title  这样鼠标放到logo 上，  就可以看到提示文字了

-->

<!-- main nav -->

        <!-- mod 1 -->

        <div class="main_nav">

                <ul>

                        <li><a href="#"></a></li>

                </ul>

        </div>

<!--

main nav分析：

        1：子模块1（main_nav）

          （1）main_nav直接使用ul>li做，唯一要注意的是，a有没有点击区域

                代码：

                        <div class="main_nav">

                                <ul>

                                        <li><a href="#"></a></li>

                                </ul>

                        </div>

-->

<!-- secrch -->

<div class="search">

        <input type="text"></input>

        <button class="btn"></button>

</div>

<!--

search分析:

        注意：表单元素之间会有间隙，所以要浮动或者写在同一行上，对齐属性设置为vertical-align: middle;

-->

<!-- hotwords -->

<div class="hotwords">

        <a href="#"></a>

</div>

<!--

hotwords分析：

        为防止有堆砌关键字的嫌疑，这种并不重要的结构无需用列表做，直接用a

-->

<!-- shopcar -->

<div class="shopcar">

        <a href="#">购物车</a>

</div>

<!--

shopcar分析：

        里面的小图标啥的加个i之类的看情况

-->

<!-- dropdown -->

<div class="dropdown">

        <!-- title -->

        <div class="dt"></div>

        <!-- description -->

        <div class="dd">

                <ul>

                        <li></li>

                </ul>

        </div>

</div>

<!-- nav_items -->

<div class="nav_items">

        <ul>

                <li><a href="#"></a></li>

        </ul>

</div>

<!-- 页面头部结束 -->

到此一游。