纯CSS构造树状结构图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS构造树状结构图</title>
</head>

<body>
    <div style="width:380px; height:600px; border:1px dashed gray; margin:30px auto; text-align:center;">
        <h3>2%加息从何而来？</h3>

        <div style="margin:2px auto;">
            <div style="width:40px; height:40px; background:blue; border-radius:40px;margin:0 auto; "></div>
            <span>投资人</span>
        </div>
        <!--画竖线-->
        <div style="width:0px; height:30px; border-left:1px solid gray; margin:0 auto;"></div>
        <!--画一个无底边部的边框-->
        <div style="width:255px; height:37px; border:1px solid gray; border-bottom:none; margin:0 auto;"></div>

        <div style="width:380px; height:72px margin:3px auto;">
            <div style="float:left; margin-left:40px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>投资大于1K</span>
            </div>
            <div style="float:right; margin-right:3px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>投资小于1K</span>
            </div>
        </div>
        <!--清除浮动-->
        <div style="clear:both;"></div>

        <div style="width:255px; height:37px; border:1px solid gray; border-bottom:none;border-top:none; margin:3px auto 3px auto;"></div>

        <div style="width:380px; height:72px margin:3px auto;">
            <div style="float:left; margin-left:40px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>发表加息口号呼朋唤友捧场</span>
            </div>
            <div style="float:right; margin-right:3px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>无加息机会</span>
            </div>
        </div>
        <div style="clear:both;"></div>

        <div style="width:0px; height:37px; border-left:1px solid gray; margin-left:60px;"></div>
        <div style="width:257px; height:37px; border:1px solid gray; border-bottom:none; margin:0 auto;"></div>

        <div style="width:380px; height:72px margin:3px auto;">
            <div style="float:left; margin-left:40px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>获得点赞</span>
            </div>
            <div style="float:right; margin-right:16px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>未获点赞</span>
            </div>
        </div>
        <div style="clear:both;"></div>

        <div style="width:0px; height:37px; border-left:1px solid gray; margin-left:60px;"></div>

        <div style="width:380px; height:72px margin:3px auto;">
            <div style="float:left; margin-left:40px;">
                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>
                <span>获得最高加息2%加息</span>
            </div>
        </div>
        <!--清除浮动-->
        <div style="clear:both;"></div> 

    </div>
</body>
</html>

时间： 2024-11-05 13:41:28

纯CSS构造树状结构图的相关文章

纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

在对网站进行mip改造的时候,使用百度的导航组件,很难有较好的展现形式. 百度又不允许自定义JS,所以,考虑增加CSS(是在百度组件的基础上增加JS),用css补充实现点击功能,实现精美的导航. 最终结果是为了实现以下三个样式 1.未展开状态 2.展开状态,有二级导航的,要出现+号 3.点击+号能展开二级菜单参考以下树状CSS的设计思路,主要是使用 html5的 details summary标签,注意看注释演示图如下代码如下 <!DOCTYPE html> <html xmln

JAVA File类打印目录树状结构图递归算法

要实现把制定目录下的所有文件,按照树状结构打印出来的目的. 代码如下: package cn.bjsxt.io; import java.io.File; public class FileTree { public static void main(String[] args) { File f=new File("E:/有用的文档"); //假设打印这个目录下的所有文件 printTree(f, 0);

Apple Tree POJ - 3321 dfs序列构造树状数组（好题）

There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow in the tree. Kaka likes apple very much, so he has been carefully nurturing the big apple tree. The tree has N forks which are connected by branches. Kaka numbers

纯css 构造的tip

css部分: <style> .abc{ margin-top:20px; } span{ position:relative; display: inline-block; background: red; } span:hover{ cursor:pointer; } span:hover:before{content:attr(data-abc); border-radius: 3px; color:#fff; padding: 10px; position:absolute; le

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q

1.树状目录结构图 2./目录目录描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/usr/bin类似. /boot/ 引导程序文件,例如:kernel.initrd:时常是一个单独的分区[6] /dev/ 必要设备, 例如:, /dev/null. /etc/ 特定主机,系统范围内的配置文件. 关于这个名称目前有争议.在贝尔实验室关于UNIX实现文档的早期版本中,/etc 被称为

HDU1166 敌兵布阵树状数组|线段树-构造完全二叉树（理解）

敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 57787 Accepted Submission(s): 24420 Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这

五中常用简洁后台导航菜单（一级导航，二级导航，手风琴式导航，左或右悬浮式导航，树状导航）

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

关于纯css布局的概况

用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织.下面就是信息组织形式与元素的对应列表. img 作为内容的图片是一定要放到img里面的,这没有更好的选择了.然而如果图片不是作为内容,而是作为修饰性的,则千万不要用img.对于非内容的图片,应该在CSS中引用,而不在XHTML中出现.例如每一个导航链接有一个前导的箭头指示,那么这些箭头就应该通过CSS的background-image属性加上去,而不是直接作为img出现. a 这也是一个非常准确定义