html - Css(树连接器)-6ren

html - Css(树连接器)

转载作者：行者123 更新时间：2023-11-28 07:48:19

我在一个网络站点工作，但树连接器有问题所以这是我的 CSS :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor:pointer
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;  
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h4 {
    color: #fff;
    position: relative;
    font-size: 12px;
    alignment-adjust:central;
    padding: 30px 0 0 0;
    height: 55px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 10px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: #333;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 10;
    font-size: 9px;
    padding-top: 5px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;

    -webkit-transition: 
        -webkit-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -moz-transition: 
        -moz-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -o-transition: 
        -o-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -ms-transition: 
        -ms-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;

    -webkit-transform: translateX(60px) rotate(90deg);
    -moz-transform: translateX(60px) rotate(90deg);
    -o-transform: translateX(60px) rotate(90deg);
    -ms-transform: translateX(60px) rotate(90deg);
    transform: translateX(60px) rotate(90deg);

    -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-140deg);
    -moz-transform: rotate(-140deg);
    -o-transform: rotate(-140deg);
    -ms-transform: rotate(-140deg);
    transform: rotate(-140deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 110px;
    height: 110px;
    display: inline-block;
    margin: 20px;
}

.ch-name li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.ch-name li a:hover+ul li::after, 
.ch-name li a:hover+ul li::before, 
.ch-name li a:hover+ul::before, 
.ch-name li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

这里是 html :

<!-- /////////////////////////////////////////// 
                        Parent Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid">
        <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->
        </div>
    <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
        </li>
                <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->
        </div>
    <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
        </li>
    </ul>


    <!-- /////////////////////////////////////////// 
                        Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    </ul>

        <!-- /////////////////////////////////////////// 
                        Grand Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li></ul>

        <!-- /////////////////////////////////////////// 
                        Great Grand Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>

    </ul>

现在我想将此连接器制作成此示例 (demo) 中显示的此代码，但我的问题是当我尝试放置 Php 代码时我无法创建许多 ul 和 li 之类的这个:

<a href="#">Child</a>
                    <ul>
                        <li><a href="#">Grand Child</a></li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Grand Child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

那么该怎么做...还有一种方法可以在 div 中创建一个类并让 css 样式自行决定连接器向左或向右的位置 :$

或者我只是在做梦:D

最佳答案

我只是用了一些边框来连接它们——

https://jsfiddle.net/jadeallencook/xqtt02jc/

.connector {
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    width: 25%;
    height: 25px;
}

关于html - Css(树连接器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30584591/

文章推荐： css - Firefox 中的 Polymer 1.0 样式

文章推荐： jquery Accordion 菜单，制作标题超链接

文章推荐： javascript - 如何在显示元素之前从 .load() 获取新高度

tomcat - 连接器 [连接器 [HTTP/1.1 - TomEE 启动
我们被要求从 Tomcat 1.6 迁移到 TomEE。在我们的应用程序中，我们使用 tomcat 作为嵌入式服务器。当我们尝试根据以下教程“http://www.copperykeenclaws.c
mysql - 如何在不安装 mysql 连接器 msi 的情况下引用 nhibernate 中的 mysql 连接器？
我需要一些有关配置文件的帮助。我已经在我的项目中包含了MySql.Data.dll，但是我如何告诉配置文件这个dll包含MySQL连接器？ NHibernate.Connection.Dr
mysql - CodeIgniter 连接器
我花了几个小时盯着这段代码。请新鲜的眼睛! 这是查询的简化版本: You have an error in your SQL syntax; check the manual that corresp
安卓 JDBC 连接器
我正在开发一个应用程序，它可以在不使用任何网络服务的情况下将数据插入数据库。我用 MySQL Workbench 在我的笔记本上创建了一个数据库。我可以使用模拟器将数据插入数据库，但我无法使用手机将数
java - Zimbra 连接器
我刚刚发现了 Zimbra，并且有一个用 Java 编写的连接器。我一直在网上寻找其他人的一些文档或经验，但找不到任何东西。是否有任何关于 API 的良好文档，以便我可以开始并检查可以用它做什么？谢
C++ - Mysql 连接器
我正在使用 C++ mysql 连接器在我的 mysql 数据库中执行操作。我的 C++ 程序是一个实时应用程序(rest api)，它始终在云端运行，始终等待用户请求。当我启动第一种类型的程序时
MYSQL C 连接器
我有一个 C 进程正在快速写入 mysql 数据库~每秒 10 次。此过程使用 MySql C 连接器。运行约2分钟后，进程挂起，系统监视器显示 "futex_wait_queue_me" ，还有
MySQL 连接器/网络跟踪
有谁知道使用 TraceListener 为 MySQL 连接器/网络启用跟踪的方法我希望它记录实际针对数据库运行的 SQL 查询，即查看参数值被替换的 SQL。最佳答案从 mysql 5.1.2
C# MySQL 连接器
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
MySql 连接器 EF6
作为 EF 菜鸟，我正在尝试将 Entity Framework 6 Code First 与我安装在我的开发计算机上的 MySql Server 5.6 结合使用。我做了一个非常小的测试控制台项目
jdbc - 谷歌电子表格 jdbc 连接器
我需要将 Google Spreadsheet 与 JasperReports Server 一起使用，为此我需要一个用于 Google Spreadsheet 的 JDBC 连接器。我找到了这个
eclipse - 如何查看安装的 m2e 连接器？
我已经安装了 Tycho m2e 连接器，如下所述:http://codeandme.blogspot.ru/2012/12/tycho-build-1-building-plug-ins.html
.net - SAP .NET 连接器
我被要求使用 SAP .NET 连接器。我目前使用 .NET 4.0 和 VS2010。有什么我需要降级的吗？另外，有没有人知道有关如何使用它的任何当前在线教程？我所拥有的只是来自 SAP 的信息，
maven - 什么是 m2e 连接器？
我想知道什么是 m2e 连接器。除了这个页面，我在互联网上没有找到太多描述它们的内容: http://objectledge.org/confluence/display/TOOLS/M2E+Conn
iPad VGA 连接器 - 在自己的应用程序中镜像屏幕？
是否可以通过 VGA 连接器镜像屏幕？找不到任何关于此的内容。最佳答案我一直在寻找和你一样的东西。上周末我写了一个小的 UIApplication 类别来添加镜像支持。我在 Google Code
Azure 逻辑应用程序 Sql 连接器
我正在开发从 SQL Server Db 提取 CDC 数据的逻辑应用程序。我正在使用“获取行”操作，但当我尝试使用过滤查询参数时，问题就出现了。代码 eq '793'(有效) __$operati
elasticsearch - SPARK的 Elasticsearch 连接器
用例: 应用程序使用spark处理数据5分钟，要处理的数据可能是数据存储中数十万条记录的数据。数据存储的选择是Elastic Search。问题: 我们在Elasticsearch中是否有用于 S
hadoop - 非云环境中的 GCS 连接器
我已经安装了 hadoop 3 版本的 GCS 连接器，并将以下配置添加到 core-site.xml，如 Install.md 中所述.目的是将数据从本地集群中的 hdfs 迁移到云存储。核心站点
debezium - 如何删除 debezium 连接器
如何删除 debezium 连接器。我正在关注本教程 https://debezium.io/documentation/reference/tutorial.html我看到了注册连接器的方法，但不知
debezium - 如何删除 debezium 连接器
如何删除 debezium 连接器。我正在关注本教程 https://debezium.io/documentation/reference/tutorial.html我看到了注册连接器的方法，但不知

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Css(树连接器)