お兄さん、お姉さん、div+css_html/css_WEB-ITnose の使い方を教えてください。

デザインのアイデアは何ですか?
これにはクリックして展開する効果があります。
選択したコートの上にある円形の √ をデザインする方法
上部コートと下部コートの間の接続をどのようにデザインするか?

ディスカッションへの返信 (解決策)

クリスマスイブ、残業している兄弟姉妹、来て手伝いましょう~~

書くのを手伝ってみませんか？ 。 。

1. 位置レイアウトが使いやすくなります。
2. 拡張効果は js で記述することも、jq の hide() または slideToggle() を使用して基本的な効果を実現することもできます。
3. 円形フックのクラス スタイルを事前に記述し、クリック イベントの対応する div にクラスを追加できます。
4. 接続は border, border-top: 1px Solid #000 を使用して記述できます。セマンティクスが標準化されている場合は、HTML5 キャンバスを使用して記述できます。

書いてみませんか? 。 。

いいえ、アイデアを教えてください。

マップを使用することはできますか?

理由 私の最初の反応はこうでした。 。フォームを使用します...

兄弟、私が今作成したエフェクトは次のとおりです:

基本的に、私は div を使用してたくさんのボックスを描画して配置します。これらを配置するには位置を使用します。
変更方法をマスターに尋ねます
1) 第 1 レベルのコートと第 2 レベルのコートの間の接続
2) コート全体を選択し、右側のスクロール バーを処理する方法以下は写真と同じです。
3) コートを選択した後、ボーダーの色は簡単に変更できますが、円形のチェック マークを追加するにはどうすればよいですか? (まだやってないので、やってみたらうまくいくと思います)

1. ポジションレイアウトが使いやすくなります。
2. 拡張効果は js で記述することも、jq の hide() または slideToggle() を使用して基本的な効果を実現することもできます。
3. 円形フックのクラス スタイルを事前に記述し、クリック イベントの対応する div にクラスを追加できます。
4. 接続は border, border-top: 1px Solid #000 を使用して記述できます。セマンティクスが標準化されている場合は、HTML5 キャンバスを使用して記述できます。

ありがとうございます

今作成したエフェクトは次のとおりです:

基本的には、div でフレームを大量に描画して配置しました。 ; いいえ これらを見つけるには位置を使用します。
修正方法を専門家に尋ねます
1) 第 1 レベルのコートと第 2 レベルのコートの間の接続
2) コート全体を選択し、スクロール バーを処理する方法右と下は写真と同じです。
3) コートを選択した後、ボーダーの色は簡単に変更できますが、円形のチェック マークを追加するにはどうすればよいですか? (まだやっていませんが、やってみたらうまくいくと思います)

1. 上の階で写真を使うと誰かが言っていました。使用できます。ただし、線の関連プロパティは変更できません。ブロックレベルの要素を追加します (例: div p )。次に、要素に border 属性を設定します。 border-top/left/right/bottom:1px Solid #000; ボックスの上に接続線が表示される場合、1 つは要素の順序を変更すること、もう 1 つは Z-index (位置が必要) を設定することです。
2. スクロールバーの目的がわかりません。
3. 簡単な方法:
各コートに円形のチェック マークを追加します (フロア 5 を参照)。次に、display:none; クリックして display:block;
複雑なメソッド:
js の appendChild() と RemoveChild() を使用して、対応するコートに要素を追加します。

統一返信では、すでに完了しました。ご協力とアイデアをありがとうございます。
フォーラムの兄弟姉妹の皆様に本当に感謝しています~~~~
現在の効果は次のとおりです。

アイデア:
1) マウスをボックス上に置き、選択の形状を変更します。
2) 相対位置を使用し、追加の円を描き、円の中に √ を書き込みます。中央に配置; 開始表示: なし;
3) jquery コントロールを使用し、クリックしてクラスを追加します。次に、円形のチェック マーク表示: ブロック
を使用してメイン コードを投稿します。

.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