大哥大姐，麻烦帮忙小弟看下这个使用div+css应该怎么做_html/css_WEB-ITnose



设计思路是什么样的呢？
这个有点击展开的效果；
选中的上面的圆形√怎么设计呢
上下级之间的连线怎么设计呢？

回复讨论(解决方案)

平安夜，加班的兄弟姐妹们来帮小弟看看~~

要帮你写出来么。。

1.用position布局容易点。
2.展开效果可以用js写，或者用jq的hide()或slideToggle()等都能达到基本的效果。
3.圆形勾可以事先写一个class样式，然后click事件对相应的div添加class。
4.连线可以用border来写，border-top:1px solid #000，规范语意化的话，可以用html5的canvas写。

要帮你写出来么。。

不是啊，说下思路就行了啊

用map来做行不行，点击的时候先清除以前画的框和对号，再绘制新的蓝框和对号？

为啥 我的第一反应是。用个表格...

小弟我现在做出来的效果如下：

基本就是用div画了很多框，然后摆放好；没用到position定位这些；
问下各位大神应该怎么修改下呢
1)一二级之间的连线
2）选择整体，右边和下边的滚动条怎么处理下，和图片一样；
3）选择某个后，边框颜色好改，但是怎么附加一个圆形的对号呢？（这个我还没做，试试应该可以）

1.用position布局容易点。
2.展开效果可以用js写，或者用jq的hide()或slideToggle()等都能达到基本的效果。
3.圆形勾可以事先写一个class样式，然后click事件对相应的div添加class。
4.连线可以用border来写，border-top:1px solid #000，规范语意化的话，可以用html5的canvas写。

谢谢哦

小弟我现在做出来的效果如下：

基本就是用div画了很多框，然后摆放好；没用到position定位这些；
问下各位大神应该怎么修改下呢
1)一二级之间的连线
2）选择整体，右边和下边的滚动条怎么处理下，和图片一样；
3）选择某个后，边框颜色好改，但是怎么附加一个圆形的对号呢？（这个我还没做，试试应该可以）

1.楼上有说用图片的。可以用。不过不能改变线的相关属性。添加一个块级元素（eg: div p ）。然后对该元素设置边框属性。border-top/left/right/bottom:1px solid #000;如果出现连线在框上面，一种是改变元素的顺序，一种是设置z-index（需要position）。
2.我也不知道那滚动条有什么用。
3.简单的方法：
为每一个都添加一个圆形对号（参考5楼）。然后display:none;单击触发display:block;
复杂方法：
用js的appendChild()和removeChild()，添加元素到相应的里。

统一回复下，小弟我已经做好了，谢谢各位大神的帮忙和提供思路；
真的很感谢论坛里的各位大哥大姐~~~~
现在效果如下：

思路：
1）鼠标放在框上变选择形状；
2）用相对定位，多画一个圆形，圆形里面写个√，居中；开始display：none；
3）用jquery控制，点击添加一个class，控制边框变为蓝色；然后圆形对号display：block
把主要代码贴出来：

.fayuan_xuanwu1 {	width:197px;	height:35px;	line-height: 35px;	border:2px solid $blackColor;	background-color: darken($whiteColor, 5%);	color: $blackColor;	text-align: center;	@include font(22); 	margin-top: 20px;	cursor: pointer;	/* 圆形对号 */	.correct {	width:30px;	height:30px;	border-radius:15px;	background-color:$blueColor;	position: relative;	left: 181px;	 top: -51px;	 color: white;	 text-align: center;	 line-height: 30px;	 display: none;	}	}	.fayuan_select {	border:2px solid $blueColor;	}

jquery代码：

前端吗。做的兄弟辛苦啊

前端吗。做的兄弟辛苦啊

公司需要，本来是做java的，现在做前端；这个问题您帮我看下勒 怎们做？
http://bbs.csdn.net/topics/391883713?page=1#post-400705423