虚线样式的列表链接div

珍珠笔

我不知道确切该如何命名或如何解释,所以我将给您一些有关我拥有的东西以及我想要创造的东西的例子。

我有一个div列表,所有的div都有自己的样式,以它们看起来像论坛和子论坛的形式出现。在这里,我将展示我所拥有的照片:

是)我有的

代码很简单:

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

我当时正在考虑进行设计,因此类别,论坛和子论坛都以虚线样式的“列表”链接在一起...我不知道如何描述它,因此我制定了一个蓝图:

我想要的是

有可能获得这个吗?我该怎么做?

谢谢!

网络提基

仅动态CSS解决方案

首先,这涉及标记修改,原因有两个:

1. HTML语义

您的内容是按层级组织的category > forum > sub forum(如菜单),因此要遵循HTML语义,您需要使用嵌套列表ul > li > ul > li ...

2.样式

将标记更改为嵌套元素将使您能够使用:last-child:first-child伪选择器定位每个级别的最后一个和第一个元素,并相应地设置其样式。

演示

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>

CSS:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

DIV列表链接拒绝接触

从列表链接到实体

图片之间的列表链接

将样式表链接到Servlet

从gem添加样式表链接

检测最深列表链接单击

在Java中将列表链接到数组

将样式表链接到Django模板

哈希表链接列表中项目的删除时间

如何在Ruby on Rails中使用样式表链接标记链接scss文件

将样式表链接到C#WPF应用程序中的本地html页面

从wwwroot提供的index.html文件中的脚本/样式表链接返回404

如何在样式表链接标签中正确使用标题属性

如何将自定义样式表链接到页面模板?

具有标题属性的CSS样式表链接的优先级

将样式表链接到html-我在做什么错?

样式表链接中的href属性在节点中不起作用

AngularJS:动态样式表链接标记触发请求的时间过早

在 Django 中将 CSS 样式表链接到 HTML 时遇到问题

使用python从单个youtube播放列表链接中提取单个链接

单击列表链接中的链接时如何获取html页面中单元格的值?

使用CSS :: before在列表链接之前添加一个小图标

为什么Word在保存时将编号列表链接在一起?

Sonata管理员仪表板仅删除一个实体的列表链接

将文本视图与数组列表链接并在事件发生时更改文本

如何在Gatsby和React Bootstrap中使用无序列表链接呈现导航?

如何在Bootstrap4中单行显示多个列表链接以切换导航?

将 jQuery Deferred 列表链接在一起的问题

调试:链表链接问题

TOP 榜单

热门标签

归档