1

关于 Jeet 的一般起始问题，仅用于学习系统：如何在 Jeet 框架中的嵌套块中均匀排列块？

在浮动宽度上如何制作这样的东西max-width: 1450px？在 Jeet 哲学中，尽可能少的 id 和类？在我的实际站点上，我必须至少使用一些课程才能到达那里。

<html>
    <head>
      <style>
        #container { width: 950px; margin:0 auto; padding:30px; }
        #leftblock { float:left; width:610px; }
        .fullwidthleft { clear:both; }
        .fullwidthleft-inner { padding:30px; background:#999; }
        .left { float:left; padding:30px; width:245px; background:#aaa; }
        .right { float:right; padding:30px; width:245px; background:#bbb; }
        #sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
        .fullwidth { clear:both; padding:30px; background:#ddd; }
      </style>
    </head>
    <body>
        <div id="container">
            <div id="leftblock">
                <div class="fullwidthleft">
                    <div class="left">
                        Leftside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                    <div class="right">
                        Rightside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
                <div class="fullwidthleft">
                    <div class="fullwidthleft-inner">
                        Fullwidth leftblock
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
            </div>
            <div id="sidebar">
                Sidebar 1
                <p>
                    lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
                </p>
                <p>
                    Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
                </p>
                <p>
                    Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
                </p>
            </div>
            <div id="leftblock">
                <div class="fullwidthleft">
                    <div class="left">
                        Leftside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                    <div class="right">
                        Rightside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
                <div class="fullwidthleft">
                    <div class="fullwidthleft-inner">
                        Fullwidth leftblock
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
            </div>
            <div class="fullwidth">
                Fullwidth
                <p>
                    libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                </p>
            </div>
        </div>
    </body>
</html>

见http://botanisk-hage-tromso.net/jeet-test.html

4

1 回答 1

2

Jeet作者在这里。我不反对类，但我认为它们不需要用于所有事情。

我在大约 2 分钟内用更小的 HTML/CSS 占用空间重新创建了您的示例。让我知道它是否有帮助或者您对此还有任何疑问，但希望它能让您更好地了解 Jeet。

如果你学习 nth-child，你会过得更好：http ://css-tricks.com/how-nth-child-works/

HTML：http ://pastie.org/7949​​308

手写笔：

div
    center()
.left_side
    span(2,3)
aside
    span(1,3)
    padding 15px 30px
    background rgba(0,0,0,.25) 
article
    span(1,2)
    padding 15px 30px
    background rgba(0,0,0,.1)
    &:nth-child(3n+2)
        background rgba(0,0,0,.2) 
    &:nth-child(3n+3)
        span(1,1)
        background rgba(0,0,0,.15) 
.full_width
    span(1,1)
    padding 15px 30px
    background rgba(0,0,0,.3) 
h1
    margin 0 0 10px

结果：http: //jeetframework.com/examples/1/

于 2013-05-23T18:50:48.473 回答