HTML-W3school首页制作

最新推荐文章于 2024-08-09 18:00:00 发布

weixin_30387339

最新推荐文章于 2024-08-09 18:00:00 发布

阅读量3.4k

点赞数 3

文章标签： php javascript 网络 ViewUI

原文链接：http://www.cnblogs.com/863652104kai/p/11295698.html

版权

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

制作思路

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

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

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

4. 建页面跳转文件

<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>
            <