search
HomeWeb Front-endHTML Tutorial大哥大姐,麻烦帮忙小弟看下这个使用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代码:
<script type="text/javascript">$(function(){	$(".fayuan_xuanwu1").click(function(){		$(".fayuan_xuanwu1").each(function(){			$(this).removeClass("fayuan_select");			$(this).children(".correct").css('display','none')		});		$(this).addClass("fayuan_select");		/*显示圆形对号*/		$(this).children(".correct").css('display','block')	});});


前端吗。做法院的兄弟辛苦啊

前端吗。做法院的兄弟辛苦啊


公司需要,本来是做java的,现在做前端;这个问题您帮我看下勒 怎们做?
http://bbs.csdn.net/topics/391883713?page=1#post-400705423
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.