HTML-腾讯软件中心

1.图文解析 https://pc.qq.com/

效果图：

代码块

<!--别人的-->
    <!--在设置下边框的时候给他一个box-shadow (box-shadow: 0 1px 0 0 rgba(0,0,0,.05);)-->
    <div class="header bottom-shadow">
        <!--设置版心为960px-->
        <div class="container_12 clearfix">
            <div class="grid_12">
                <!--a标签设置为块标签，然后(margin-right:40px)-->
                <a href="logn">腾讯软件中心-海量软件，轻松下载</a>
                <div class="nav-wrap">
                    <ul class="nav">
                        <li class="nav-link">
                            <a href="#" class="nav-a">首页</a>
                        </li>
                        <li class="nav-link">
                            <!--给a设置宽高padding左右-->
                            <a href="#" class="nav-a multi">分类
                                <!--给i设置绝对定位相对于a-->
                                <i class="sprite sprite-nav"></i>
                            </a>
                        </li>
                        <li class="nav-link">
                            <a href="#" class="nav-a">游戏中心</a>
                        </li>
                    </ul>
                </div>
                <!--给form设置一个margin-top-->
                <form action="" class="J_search_form search">
                    <label for="keyword">
                        <!--给input设置padding，设置相对定位-->
                        <input type="text" class="input-search" placeholder="请输入你要找的软件" maxlength="20">
                        <!--给提交按钮设置绝对定位，相对于input-search-->
                        <input type="submit" class="btn-search">
                    </label>
                </form>
                <div id="J_old_version" class="back" style="display: block;">
                    <!--给a设置绝对定位，相对于header-->
                    <a href="#" class="btn-back">返回旧部</a>
                </div>
            </div>
        </div>
    </div>

    <!--自己的-->
    <div class="header">
        <div class="m">
            <a href="#" class="logo"></a>
            <ul class="nav">
                <li class="item">
                    <a href="#" class="a-nav"></a>
                </li>
                <li class="item">
                    <a href="#" class="a-nav">
                        <i class="icon"></i>
                    </a>
                </li>
                <li class="item">
                    <a href="#" class="a-nav"></a>
                </li>
            </ul>
            <form action="" class="search-form">
                <input type="text" class="search" placeholder="请输入">
                <input type="submit" value="提交">
            </form>
        </div>
        <div class="back">
            <a href="#" class="a-back">返回旧版</a>
        </div>
    </div>