DIV是给弱者准备的_最新动态

您所在的位置：程序员俱乐部 > 新闻资讯 > 最新动态 > DIV是给弱者准备的

DIV是给弱者准备的

2015/4/8 19:10:22 程序员俱乐部我要评论(0)

摘要：英文原文：Divisfortheweak译者注：当我向作者TimSluis征询翻译许可时，他的答复里提到了“你注意到了这是个玩笑的事实，对吧？”。我们非常高兴地宣布，我们，StudioWolf的狼群中队，将要在前端web开发中设定一种新趋势。我们是第一家在代码里完全转向列表元素的公司，专门使用<ul>和<li>，不再使用<div>、<h1>、<p>等元素。<ul><li>
标签：

class="topic_img" alt=""/>

　　英文原文：Div is for the weak

译者注：当我向作者 Tim Sluis 征询翻译许可时，他的答复里提到了“你注意到了这是个玩笑的事实，对吧？”。

　　我们非常高兴地宣布，我们，Studio Wolf 的狼群中队，将要在前端 web 开发中设定一种新趋势。我们是第一家在代码里完全转向列表元素的公司，专门使用<ul>和<li>，不再使用<div>、<h1>、<p>等元素。

<ul> 
　　<li>
　　Hello world!
　　</li> 
</ul>

　　为什么？原因很简单：

老实讲，网页除了列表嵌套列表，就没有什么了；
我们有 CSS 和 class。它们按你想要的方式为每个列表项设置样式。不需要额外的标签；
Google 钟情于列表；
真的太简单了。

　　让我们向你展示一个不错的清晰例子：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>We love UL</title>
        <meta name="description" content="">
        <meta name="author" content="">
    </head>

    <body>

        <ul class="wrappers">

            <li>
                <ul class="containers">
                    <li>
                        <ul class="grid">
                            <li class="navigation">
                                <ul class="items">
                                    <li href="#">Home</li>
                                    <li href="#">Products</li>
                                    <li href="#">About us</li>
                                    <li href="#">Contact</li>
                                </ul>
                            </li>

                            <li class="header">
                                <ul class="slides">
                                    <li>We love lists.</li>
                                    <li>W3C is shitty.</li>
                                    <li>Div is for the weak.</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li>
                <ul class="containers">
                    <li>
                        <ul class="grid">

                            <li class="aside">

                                <ul class="content">
                                    <li class="h2">This is my sidebar.</li>
                                    <li class="p">Aliquam et rutrum tortor, nec pellentesque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec bibendum dui dui, in feugiat nibh posuere ut. Phasellus vel imperdiet sapien.</li>
                                </ul>

                            </li>

                            <li class="article">

                                <ul class="content">
                                    <li class="h2">This is my content.</li>
                                    <li class="p">Aliquam et rutrum tortor, nec pellentesque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec bibendum dui dui, in feugiat nibh posuere ut. Phasellus vel imperdiet sapien.</li>
                                </ul>
                            </li>

                        </ul>
                    </li>
                </ul>
            </li>

        </ul>

    </body>

</html>