界面小项目之W3C

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text8</title>
    <link rel="stylesheet" href="css/reset.css">
</head>
    <style>
    .header {
         1210px;
        height: 100px;
        background-color: #fdfcf8;
        margin: 0 auto;
        /*border: 1px solid black;*/
    }
    .header-h1 {
        float: left;
    }
    .header-h1 a {
         500px;
        height: 100px;
        /*border: 1px solid black;*/
        background-image: url("img/bg.png");
        display: block;
        background-position: 0 -150px;
    }
    .header-h1 a:hover {
        background-position-y: -250px;
    }
    .header-form {
        float: right;
        padding-top: 35px;
        padding-right: 20px;
    }
    .inp {
        height: 24px;
         240px;
        border: 1px solid #cccccc;
    }
    .btn {
         28px;
        height: 28px;
        border: none;
        background-color: red;
        color: white;
    }
</style>
    <style>
        .nav-ul {
             1210px;
            margin: 0 auto;
            background-image: url("img/bg.png");
        }
        .nav-ul:after {
            content: '';
            display: block;
            clear: both;
        }
        .nav-ul li {
            float: left;
        }
        .nav-a {
            display: block;
            height: 48px;
            background-image: url("img/bg.png");
        }
        .nav-a:hover {
            background-position-y: -48px;
        }
        .nav-a1 {
             155px;
        }
        .nav-a2 {
             157px;
            background-position-x: -155px;
        }
        .nav-a3 {
             167px;
            background-position-x: -312px;
        }
        .nav-a4 {
             158px;
            background-position-x: -479px;
        }
        .nav-a5 {
             101px;
            background-position-x: -637px;
        }
        .nav-a6 {
             185px;
            background-position-x: -738px;
        }
        .nav-a7 {
             177px;
            background-position-x: -923px;
        }
    </style>
    <style>
        .main {
             1210px;
            margin: 0 auto;
        }
        .main:after {
            content: '';
            display: block;
            clear: both;
        }
        .main-left, .main-center, .main-right {
            float: left;
        }
        .main-left, .main-right {
             178px;
            border-left: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
        }
        .main-center {
             850px;
        }
        .main-box {
            padding-top: 15px;
            user-select: none;
        }
        .main-box h4 {
            padding-left: 8px;
            line-height: 30px;
        }
        .main-box li {
            padding-left: 20px;
            line-height: 24px;
            font-size: 14px;
        }
        .main-box li:hover {
            color: white;
            background-color: #aaaaaa;
            cursor: pointer;
        }
        .main-right .main-box li {
            color: tomato;
        }
        .main-right .main-box li:hover {
            background-color: red;
        }
        .main-right .main-box li:hover {
            color: white;
        }
        .main-box h3 {
            padding-left: 10px;
            line-height: 40px;
            font-size: 18px;
            color: blue;
        }
        .main-box h3:hover {
            text-decoration: underline;
        }
    </style>
    <style>
        .main-center-box {
             calc(100% - 30px);
            margin: 0 auto;
            padding: 30px 0;
            border-bottom: 1px solid #cccccc;
        }
        .main-center-box.box1 {
            text-align: center;
            font-size: 18px;
        }
        .main-center-box h2 {
            line-height: 45px;
        }
        .main-center-box p {
            font-size: 16px;
            line-height: 35px;
        }
    </style>
    <style>
        .main-center-box.sbox div {
            margin-left: 120px;
        }
        .main-center-box.box2 {
            background-image: url("img/icon2.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
        .main-center-box.box3 {
            background-image: url("img/icon3.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
        .main-center-box.box4 {
            background-image: url("img/icon4.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
        .main-center-box.box5 {
            background-image: url("img/icon5.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
         .main-center-box.box6 {
            background-image: url("img/icon6.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
         .main-center-box.box6 a {
             color: brown;
             text-decoration: underline;
             line-height: 35px;
         }
         .main-center-box.box6 a:hover {
             color: red;
         }
         .main-center-box.box7 {
            background-image: url("img/icon7.png");
            background-repeat: no-repeat;
            background-position: 0 30px;
        }
         .main-center-box.box7 a {
             color: brown;
             text-decoration: underline;
             font-size: 18px;
             line-height: 35px;
         }
         .main-center-box.box7 a:hover {
             color: red;
         }

    </style>
    <style>
        .footer {
             1210px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
        }

    </style>
<body>
    <div class="header">
        <h1 class="header-h1">
            <a href=""></a>
        </h1>
        <form action="" class="header-form">
            <input type="text" class="inp">
            <input type="submit" class="btn" value="GO" title="搜索">
        </form>
    </div>
    <div class="nav">
        <ul class="nav-ul">
            <li><a href="" class="nav-a nav-a1"></a></li>
            <li><a href="" class="nav-a nav-a2"></a></li>
            <li><a href="" class="nav-a nav-a3"></a></li>
            <li><a href="" class="nav-a nav-a4"></a></li>
            <li><a href="" class="nav-a nav-a5"></a></li>
            <li><a href="" class="nav-a nav-a6"></a></li>
            <li><a href="" class="nav-a nav-a7"></a></li>
        </ul>
    </div>
    <div class="main">
        <div class="main-left">
            <div class="main-box">
                <h4>HTML.教程</h4>
                <ul>
                    <li>
                        HTML
                    </li>
                    <li>HTML5</li>
                    <li>XHTML</li>
                    <li>CSS</li>
                    <li>CSS3</li>
                    <li>TCP/IP</li>
                </ul>
                <h4>浏览器版本</h4>
                <ul>
                    <li>JavaScript</li>
                    <li>HTML DOM</li>
                    <li>jQuery</li>
                    <li>AJAX</li>
                    <li>JSON</li>
                    <li>DHTML</li>
                    <li>E4X</li>
                    <li>WMLScript</li>
                </ul>
                <h4>服务器脚本</h4>
                <ul>
                    <li>PHP</li>
                    <li>SQL</li>
                    <li>ASP</li>
                    <li>ADO</li>
                    <li>VBScript</li>
                </ul>
                <h4>XML 教程</h4>
                <ul>
                    <li>XML</li>
                    <li>DTD</li>
                    <li>XML DOM</li>
                    <li>XSL</li>
                    <li>XSLT</li>
                    <li>XSL-FO</li>
                    <li>XPath</li>
                    <li>XQuery</li>
                    <li>XLink</li>
                    <li>XPointer</li>
                    <li>Schema</li>
                    <li>XForms</li>
                    <li>WAP</li>
                    <li>SVG</li>
                </ul>
                <h4>Web Services</h4>
                <ul>
                    <li>Web Services</li>
                    <li>WSDL</li>
                    <li>SOAP</li>
                    <li>RSS</li>
                    <li>RDF</li>
                </ul>
                <h4>.NET</h4>
                <ul>
                    <li>ASP.NET</li>
                    <li>Web Pages</li>
                    <li>Razor</li>
                    <li>MVC</li>
                    <li>Web Forms</li>
                </ul>
                <h4>建站手册</h4>
                <ul>
                    <li>网站构建</li>
                    <li>万维网联盟</li>
                    <li>浏览器信息</li>
                    <li>网站品质</li>
                    <li>语义网</li>
                    <li>职业规划</li>
                    <li>网站主机</li>
                    <li>网络媒体</li>
                </ul>
                <h3>关于 W3School</h3>
                <h3>帮助 W3School</h3>
            </div>
        </div>
        <div class="main-center">
            <div class="main-center-box box1">
                <h2>领先的 Web 技术教程 - 全部免费</h2>
                <p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
                <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
                <p>
                    <b>从左侧的菜单选择你需要的教程！</b>
                </p>
            </div>
            <div class="main-center-box sbox box2">
                <div>
                <h2>完整的网站技术参考手册</h2>
                <p>我们的参考手册涵盖了网站技术的方方面面</p>
                <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
                </div>
            </div>
            <div class="main-center-box sbox box3">
                <div>
                <h2>在线实例测试工具</h2>
                <p>在 W3School，我们提供上千个实例。</p>
                <p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
                </div>
            </div>
            <div class="main-center-box sbox box4">
                <div>
                <h2>快捷易懂的学习方式</h2>
                <p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
                <p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>
                </div>
            </div>
            <div class="main-center-box sbox box5">
                <div>
                <h2>从何入手？</h2>
                <p>什么是一个 Web 建设者需要学习的知识呢？</p>
                <p>W3School 将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。</p>
                <p>如果您是初学者，请您阅读 《网站构建初级教程》。</p>
                <p>如果您是开学者，请您阅读 《网站构建高级教程》。</p>
                </div>
            </div>
            <div class="main-center-box sbox box6">
                <div>
                <h2>W3School 新闻</h2>
                <p><a href="http://www.w3school.com.cn/cssref/index.asp">CSS3 参考手册</a>已上线，敬请批评指正。</p>
                </div>
            </div>
            <div class="main-center-box sbox box7">
                <div>
                <h2>W3School 更新信息</h2>
                    <a href="http://www.w3school.com.cn/js/index.asp">2019 版 W3School JavaScript 教程全新上线！</a>
                </div>
            </div>
            <div class="main-center-box sbox box8">
                <div class="box8-title">
                <h2>W3School 友情链接</h2>
                    <p>
                        <a href="">Firefox 中文社区</a>
                        <a href="">w3ctech</a>
                        <a href="">WeTest腾讯质量开放平台</a>
                    </p>
                </div>
                <div class="box8-body">
                    <h4>新浪微博</h4>
                    <p>
                        <a href="">3School 官方微博</a>
                    </p>
                </div>
                <div class="">
                    <h4>微信公众号</h4>
                    <p><a href="">W3School 官方服务号</a></p>
                </div>
            </div>
        </div>
        <div class="main-right">
            <div class="main-box">
                <h4>HTML.教程</h4>
                <ul>
                    <li>
                        HTML
                    </li>
                    <li>HTML5</li>
                    <li>XHTML</li>
                    <li>CSS</li>
                    <li>CSS3</li>
                    <li>TCP/IP</li>
                </ul>
                <h4>浏览器版本</h4>
                <ul>
                    <li>JavaScript</li>
                    <li>HTML DOM</li>
                    <li>jQuery</li>
                    <li>AJAX</li>
                    <li>JSON</li>
                    <li>DHTML</li>
                    <li>E4X</li>
                    <li>WMLScript</li>
                </ul>
                <h4>服务器脚本</h4>
                <ul>
                    <li>PHP</li>
                    <li>SQL</li>
                    <li>ASP</li>
                    <li>ADO</li>
                    <li>VBScript</li>
                </ul>
                <h4>XML 教程</h4>
                <ul>
                    <li>XML</li>
                    <li>DTD</li>
                    <li>XML DOM</li>
                    <li>XSL</li>
                    <li>XSLT</li>
                    <li>XSL-FO</li>
                    <li>XPath</li>
                    <li>XQuery</li>
                    <li>XLink</li>
                    <li>XPointer</li>
                    <li>Schema</li>
                    <li>XForms</li>
                    <li>WAP</li>
                    <li>SVG</li>
                </ul>
                <h4>Web Services</h4>
                <ul>
                    <li>Web Services</li>
                    <li>WSDL</li>
                    <li>SOAP</li>
                    <li>RSS</li>
                    <li>RDF</li>
                </ul>
                <h4>.NET</h4>
                <ul>
                    <li>ASP.NET</li>
                    <li>Web Pages</li>
                    <li>Razor</li>
                    <li>MVC</li>
                    <li>Web Forms</li>
                </ul>
                <h4>建站手册</h4>
                <ul>
                    <li>网站构建</li>
                    <li>万维网联盟</li>
                    <li>浏览器信息</li>
                    <li>网站品质</li>
                    <li>语义网</li>
                    <li>职业规划</li>
                    <li>网站主机</li>
                    <li>网络媒体</li>
                </ul>

            </div>
        </div>
    </div>
    <div class="footer">

        <p>W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>

    </div>
</body>
</html>
相关阅读:
事务四大特征：原子性，一致性，隔离性和持久性(ACID)
解决“要登录到这台远程计算机,你必须被授予”
SqlServer_查看SQLServer版本信息
 sed 查找文件的某一行内容
 linux echo命令的-n、-e两个参数
 在.Net中进行跨线程的控件操作（上篇：Control.Invoke）
.NET性能优化方面的总结
 SQLSERVER2008 显示列信息，包含扩展属性
 C#4.0新特性:可选参数,命名参数,Dynamic
浅谈.net中的params关键字
原文地址：https://www.cnblogs.com/huanghongzheng/p/11151971.html