HTML-W3school首页制作

链接：https://pan.baidu.com/s/1DFy4JmxakQ_jsnSeNqJ2dw
提取码：k76t

制作思路

1. 先分析网页，对网页进行划分，再对每个小区域填充内容

2. 建CSS、img文件夹分别存放所需要的css和图片

3. 清除系统标签默认样式

4. 建页面跳转文件

头部header

<div class="header">
    <h1 id="site-title" class="header-title">
        <a href="W3school.html" title="w3school 在线教程"></a>
    </h1>
    <form class='header-form' action="http://www.baidu.com">
        <input class='header-search' type="text" name="wd">
        <button class="header-search-btn">Go</button>
    </form>
</div>

导航栏nav

<ul class="nav">
    <li class="nav-li">
        <a href="html/h.html" class="nav-a nav-n1" title="HTML 系列教程"></a>
    </li>

    <li class="nav-li">
        <a href="html/j.html" class="nav-a nav-n2" title="浏览器脚本教程"></a>
    </li>

    <li class="nav-li">
        <a href="" class="nav-a nav-n3" title="服务器脚本教程"></a>
    </li>

    <li class="nav-li">
        <a href="" class="nav-a nav-n4" title="ASP.NET 教程"></a>
    </li>

    <li class="nav-li">
        <a href="" class="nav-a nav-n5" title="XML 系列教程"></a>
    </li>

    <li class="nav-li">
        <a href="" class="nav-a nav-n6" title="Web Services系列教程"></a>
    </li>

    <li class="nav-li">
        <a href="" class="nav-a nav-n7" title="建站手册"></a>
    </li>
</ul>

主体内容

<div class="main">
    <!--main左边栏-->
    <div class="main-left">
        <div class="main-col">
            <h3>HTML 教程</h3>
            <ul>
                <li>
                    <a href="" title="HTML 教程">HTML</a>
                </li>
                <li>
                    <a href="" title="HTML5 教程">HTML5</a>
                </li>
                <li>
                    <a href="" title="XHTML 教程">XHTML</a>
                </li>
                <li>
                    <a href="" title="CSS 教程">CSS</a>
                </li>
                <li>
                    <a href="" title="CSS3 教程">CSS3</a>
                </li>
                <li>
                    <a href="" title="TCP/IP 教程">TCP/IP</a>
                </li>
            </ul>
        </div>

        <div class="main-col">
            <h3>浏览器脚本</h3>
            <ul>
            <li>
                <a href="" title="JavaScript 教程">JavaScript</a>
            </li>
            <li>
                <a href="" title="HTML DOM 教程">HTML DOM</a>
            </li>

            <li>
                <a href="" title="jQuery 教程">jQuery</a>
            </li>

            <li>
                <a href="" title="jQuery Mobile 教程">jQuery Mobile</a>
            </li>
            <li>
                <a href="" title="AJAX 教程">AJAX</a>
            </li>
            <li>
                <a href="" title="JSON 教程">JSON</a>
            </li>
            <li>
                <a href="" title="DHTML 教程">DHTML</a>
            </li>
            <li>
                <a href="" title="E4X 教程">E4X</a>
            </li>
            <li>
                <a href="" title="WMLScript 教程">WMLScript</a>
            </li>
        </ul>
        </div>

        <div class="main-col">
            <h3>服务器脚本</h3>
            <ul>
            <li>
                <a href="" title="PHP 教程">PHP</a>
            </li>
            <li>
                <a href="" title="SQL 教程">SQL</a>
            </li>
            <li>
                <a href="" title="ASP 教程">ASP</a>
            </li>
            <li>
                <a href="" title="ADO 教程">ADO</a>
            </li>
            <li>
                <a href="" title="VBScript 教程">VBScript</a>
            </li>
        </ul>
        </div>

        <div class="main-col">
            <h3 class="main-m4-title">XML 教程</h3>
            <ul>
            <li>
                <a href="" title="XML 教程">XML</a>
            </li>
            <li>
                <a href="" title="DTD 教程">DTD</a>
            </li>
            <li>
                <a href="" title="XML DOM 教程">XML DOM</a>
            </li>
            <li>
                <a href="" title="XSL 教程">XSL</a>
            </li>
            <li>
                <a href="" title="XSLT 教程">XSLT</a>
            </li>
            <li>
                <a href="" title="XSL-FO 教程">XSL-FO</a>
            </li>
            <li>
                <a href="" title="XPath 教程">XPath</a>
            </li>
            <li>
                <a href="" title="XQuery 教程">XQuery</a>
            </li>
            <li>
                <a href="" title="XLink 教程">XLink</a>
            </li>
            <li>
                <a href="" title="XPointer 教程">XPointer</a>
            </li>
            <li>
                <a href="" title="Schema 教程">Schema</a>
            </li>
            <li>
                <a href="" title="XForms 教程">XForms</a>
            </li>
            <li>
                <a href="" title="WAP 教程">WAP</a>
            </li>
            <li>
                <a href="" title="SVG 教程">SVG</a>
            </li>
        </ul>
        </div>

        <div class="main-col">
            <h3 class="main-m5-title">Web Services</h3>
            <ul>
            <li>
                <a href="" title="Web Services 教程">Web Services</a>
            </li>
            <li>
                <a href="" title="WSDL 教程">WSDL</a>
            </li>
            <li>
                <a href="" title="SOAP 教程">SOAP</a>
            </li>
            <li>
                <a href="" title="RSS 教程">RSS</a>
            </li>
            <li>
                <a href="" title="RDF 教程">RDF</a>
            </li>
        </ul>
        </div>

        <div class="main-col">
            <h3 class="main-m6-title">.NET</h3>
            <ul>
            <li>
                <a href="" title="ASP.NET 教程">ASP.NET</a>
            </li>
            <li>
                <a href="" title="ASP.NET Web Pages - 教程">Web Pages</a>
            </li>
            <li>
                <a href="" title="ASP.NET Razor - 标记">Razor</a>
            </li>
            <li>
                <a href="" title="ASP.NET MAV - 教程">MAV</a>
            </li>
            <li>
                <a href="" title="ASP.NET Web Forms - 教程">Web Forms</a>
            </li>
        </ul>
        </div>

        <div class="main-col">
            <h3 class="main-m7-title">建站手册</h3>
            <ul>
            <li>
                <a href="" title="网站构建">网站构建</a>
            </li>
            <li>
                <a href="" title="万维网联盟(W3C)">万维网联盟(W3C)</a>
            </li>
            <li>
                <a href="" title="浏览器信息">浏览器信息</a>
            </li>
            <li>
                <a href="" title="网站品质">网站品质</a>
            </li>
            <li>
                <a href="" title="语义网">语义网</a>
            </li>
            <li>
                <a href="" title="职业规划">职业规划</a>
            </li>
            <li>
                <a href="" title="网站主机教程">网站主机</a>
            </li>
            <li>
                <a href="" title="网络媒体教程">网络媒体</a>
            </li>
        </ul>
        </div>

        <h2 class="main-col-title">
            <a href="" title="关于 W3School">关于 W3School</a>
        </h2>
        <h2 class="main-col-title">
            <a href="" title="帮助 W3School">帮助 W3School</a>
        </h2>

    </div>
    <!--main中间内容-->
    <div class="main-center">
        <div class="main-box main-b1">
            <h2>领先的 Web 技术教程 - 全部免费</h2>
            <p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
            <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
            <p><strong>从左侧的菜单选择你需要的教程！</strong></p>
        </div>
        <div class="main-box main-xbox b2">
            <h3>完整的网站技术参考手册</h3>
            <p>我们的参考手册涵盖了网站技术的方方面面。</p>
            <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
        </div>
        <div class="main-box main-xbox b3">
            <h3>在线实例测试工具</h3>
            <p>在 W3School，我们提供上千个实例。</p>
            <p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
        </div>
        <div class="main-box main-xbox b4">
            <h3>快捷易懂的学习方式</h3>
            <p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
            <p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>
        </div>
        <div class="main-box main-xbox b5">
            <h3>从何入手？</h3>
            <p>什么是一个 Web 建设者需要学习的知识呢？</p>
            <p>W3School 将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。</p>
            <p>如果您是初学者，请您阅读《<a href="">网站构建初级教程</a>》。</p>
            <p>如果您是开发者，请您阅读《<a href="">网站构建高级教程</a>》。</p>
        </div>
        <div class="main-box main-xbox b6">
            <h3>W3School 新闻</h3>
            <p><a href="">CSS3 参考手册</a> 已上线，敬请批评指正。</p>
        </div>
        <div class="main-box main-xbox b7">
            <h3>W3School 更新信息</h3>
            <p><a href="">2019 版 W3School JavaScript 教程全新上线！</a></p>
        </div>
        <div class="main-box main-xbox b8">
            <h3>W3School 友情链接</h3>
            <p><a href="">Firefox 中文社区</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">w3ctech</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">WeTest腾讯质量开放平台</a></p>
        </div>
        <div class="main-footer">
            <div class="weibo">
                <h5>新浪微博</h5>
                <a href="">W3School 官方微博</a>
            </div>
            <div class="weixin">
                <h5>微信公众号</h5>
                <p>W3School 官方服务号</p>
            </div>
        </div>
    </div>
    <!--main右边栏-->
    <div class="main-right">
        <div class="main-col-right">
            <h3>参考手册</h3>
            <ul>
            <li>
                <a href="" title="HTML参考手册">HTML/HTML5 标签</a>
            </li>
            <li>
                <a href="" title="HTML 颜色名">HTML 颜色</a>
            </li>
            <li>
                <a href="" title="CSS 参考手册">CSS 1,2,3</a>
            </li>
            <li>
                <a href="" title="JavaScript 参考手册">JavaScript</a>
            </li>
            <li>
                <a href="" title="HTML DOM 参考手册">HTML DOM</a>
            </li>
            <li>
                <a href="" title="jQuery 参考手册">jQuery</a>
            </li>
            <li>
                <a href="" title="jQuery Mobile 参考手册">jQuery Mobile</a>
            </li>
                <li>
                <a href="" title="VBScript 函数">VBScript</a>
            </li>
                <li>
                <a href="" title="ASP 参考手册">ASP</a>
            </li>
                <li>
                <a href="" title="ADO 参考手册">ADO</a>
            </li>
                <li>
                <a href="" title="ASP.NET 参考手册">ASP.NET</a>
            </li>
                <li>
                <a href="" title="PHP 参考手册">PHP 5.1</a>
            </li>
                <li>
                <a href="" title="XML DOM 参考手册">XML DOM</a>
            </li>
                <li>
                <a href="" title="XSLT 元素参考手册">XSLT 1.0</a>
            </li>
                <li>
                <a href="" title="XPath、XQuery 以及 XSLT 函数">XPath 2.0</a>
            </li>
                <li>
                <a href="" title="XSL-FO 参考手册">XSL-FO</a>
            </li>
                <li>
                <a href="" title="WML 参考手册">WML 1.1</a>
            </li>
                <li>
                <a href="" title="W3C 术语表和词典">W3C 术语表</a>
            </li>
        </ul>
        </div>

        <div class="main-col-right">
            <h3>字符集</h3>
        <ul>
            <li>
                <a href="" title="HTML 字符集">HTML 字符集</a>
            </li>
            <li>
                <a href="" title="HTML ASCII 参考手册">HTML ASCII</a>
            </li>
            <li>
                <a href="" title="HTML ISO-8859-1 参考手册">HTML ISO-8859-1</a>
            </li>
            <li>
                <a href="" title="HTML 4.01 符号实体">HTML 符号</a>
            </li>
        </ul>
        </div>

        <div class="main-col-right">
            <h3>实例/案例</h3>
        <ul>
            <li>
                <a href="">HTML 实例</a>
            </li>
            <li>
                <a href="">CSS 实例</a>
            </li>
            <li>
                <a href="">XML 实例</a>
            </li>
            <li>
                <a href="">JavaScript 实例</a>
            </li>
            <li >
                <a href="">JavaScript 对象实例</a>
            </li>
            <li>
                <a href="">HTML DOM 实例</a>
            </li>
            <li>
                <a href="">jQuery 实例</a>
            </li>
            <li>
                <a href="">jQuery Mobile 实例</a>
            </li>
            <li>
                <a href="">XML DOM 实例</a>
            </li>
            <li>
                <a href="">DHTML 实例</a>
            </li>
            <li >
                <a href="">AJAX 实例</a>
            </li>
            <li>
                <a href="">VBScript 实例</a>
            </li>
            <li>
                <a href="">ASP 实例</a>
            </li>
            <li>
                <a href="">ADO 实例</a>
            </li>
            <li>
                <a href="">SVG 实例</a>
            </li>
            <li>
                <a href="">WAP 实例</a>
            </li>

        </ul>
        </div>

        <div class="main-col-right">
            <h3>测验/考试</h3>
            <ul>
            <li>
                <a href="">HTML 测验</a>
            </li>
            <li>
                <a href="">HTML5 测验</a>
            </li>
            <li>
                <a href="">XHTML 测验</a>
            </li>
            <li>
                <a href="">CSS 测验</a>
            </li>
            <li>
                <a href="">XML 测验</a>
            </li>
            <li>
                <a href="">JavaScript 测验</a>
            </li>

            <li>
                <a href="">jQuery 测验</a>
            </li>
            <li>
                <a href="">SQL 测验</a>
            </li>
            <li>
                <a href="">ASP 测验</a>
            </li>
            <li>
                <a href="">PHP 测验</a>
            </li>

        </ul>
        </div>

        <div class="main-col-right">
            <h3>代码验证</h3>
        <ul>
            <li>
                <a href="" title="网页验证">验证HTML</a>
            </li>
            <li>
                <a href="" title="网页验证">验证CSS</a>
            </li>
            <li>
                <a href="" title="网页验证">验证XHTML</a>
            </li>
            <li>
                <a href="" title="网页验证">验证XML</a>
            </li>
            <li>
                <a href="" title="网页验证">验证WML</a>
            </li>
        </ul>
        </div>
    </div>
</div>

尾部footer

<div class="footer">
    <p class="footer-p">W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
    <p class="footer-p2"><a href="">使用条款</a>和<a href="">隐私条款</a>。版权所有，保留一切权利。 赞助商：<a href="">上海赢科投资有限公司</a>。 蒙ICP备06004630号
        <a href="">广告刊例</a></p>
</div>

css文件

根据对应的部分分别建立css文件，以免多、杂带来不好的效果