虚线样式列表链接div [英] Dashed-styled list linking divs

问题描述

我不知道如何命名这个或如何解释它，所以我会给你一些例子，我有什么，我想创建...

I don't know exactly how to name this or how to explain it, so I'll give you some examples of what I have and what I want to create...

我有一个divs列表，所有的都有自己的风格，在一个方式，他们看起来像论坛和子论坛...在这里，我会显示一个我拥有的图片：

I have a list of divs, all of them with an own style, in a way that they look as Forums and sub-forums... Here I'll show a picture of what I have:

代码很简单：

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
</div>

css也很容易：

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}

我在想设计一个类别，论坛与虚线样式的列表链接...我不知道如何描述它，所以我制定了一个蓝图：

I was thinking of making a design so the categories, the forums and sub-forums are linked with a dashed-styled "list"... I don't know how to describe it, so I've made a blueprint:

是否可以获得这个？

谢谢！

推荐答案

只有解决方案

首先，这涉及标记修改，有两个原因：

Dynamic CSS only solution

First, this involves markup modifications for two reasons :

1。 HTML语义

您的内容以herachy， category>论坛>子论坛（像一个菜单），所以遵循HTML semanitcs你需要使用嵌套列表 ul> li> ul> li ...

Your content is organized in herachy, category > forum > sub forum (like a menu) so to follow HTML semanitcs you need to use nested lists ul > li > ul > li ...

2。样式

将标记更改为嵌套元素将会使您使用：last-child定位每个级别的最后和第一个元素

Changing the markup to nested elements will alow you to target last and first elements of each level with the :last-child and :first-child pseudo selectors and style them accordingly.

HTML：

HTML :

<ul id="Forums">
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div></li>
        </ul>
    </li>
    <li class="category"><div>Category</div>
    </li>
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
             <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ul, li{
    list-style-type:none;
    margin:0; padding:0;
    position:relative;
}
.category > div{
    width: 95%; height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
}
.forum {
    margin-left: 2em;
}
.forum > div, .sub-forum{
    height: 3em;
    border: dotted;
}
.forum > div{    
    background-color: rgba(30, 101, 141, 0.67);
}
.sub-forum {
    margin-left: 3em;
    background-color: rgba(12, 50, 69, 0.67);
}
.category li:before, .forum:after{
    content:'';
    position:absolute;
    right:100%;
    border-bottom: 0.2em dotted;
}
.category .forum:before{
    top:-1.5em; 
    height:100%; width:1em;
    border-left: 0.2em dotted;
    border-bottom-color: transparent;
}
.forum:last-child:before{
    height:3em;    
}
.forum:first-child:before{
    top:0;
    bottom:1.5em;    
}
.forum:after{
    top:1.5em;
    width:1.2em;
}
.sub-forum:before{
    bottom:50%;
    width:3.5em; height: 100%;
    border-left: 0.2em dotted;
}

这篇关于虚线样式列表链接div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！