如何組織我的div標籤？

所以我對我的div標籤有點問題（小提琴演示在這裏：http://jsfiddle.net/4ZQLq/）。如何組織我的div標籤？

我想做到的是：

當您點擊左側圖片上，整個div標籤（應用）應該向左移動和淡出。此外，（APP2）後面的div標籤應該爲FADE IN。

當我把它們放在同一個尺寸的時候，它就會如此。但是，當我讓他們不同的尺寸，這是我有問題（再次，檢查我的小提琴視覺演示：http://jsfiddle.net/4ZQLq/）。

我想他們是不同的大小。有前一個淡出，和一個後面淡入。

<!DOCTYPE html> 
<html> 

<head> 

<title>Forget Me Not</title> 

<style> 

body 
{ 
background-color:#66d9ff; 
} 

#app1{ 
position:absolute; 
width:250px; 
height:250px; 
z-index:1; 
top:50%; 
left:50%; 
margin:-150px 0 0 -150px; 
background:white; 
box-shadow: 0 0 1px 1px #888888; 
text-align:center 
} 

#app2{ 
position:absolute; 
width:300px; 
height:300px; 
z-index:0; 
top:50%; 
left:50%; 
margin:-150px 0 0 -150px; 
background:white; 
box-shadow: 0 0 1px 1px #888888; 
text-align:center; 
} 

img.appIMG1{ 
-webkit-box-shadow: 0 0 1px 1px #888888; 
box-shadow:0 0 1px 1px #888888; 
} 

img.appIMG2{ 
-webkit-box-shadow: 0 0 1px 1px #888888; 
box-shadow:0 0 1px 1px #888888; 
} 

</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 
    $(".appIMG1").click(function() { 
     $("#app1").animate({ 
      left: '250px', 
      opacity: 0 
     }); 
    $("#app2").fadeIn("slow"); 
     }); 
}); 
</script> 

</head> 

<body> 
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p> 
<br> 
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% > 
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%> 
</div> 

<div id="app2"> 
<form> 
Name for the reminder: <input type="text" name="firstname"><br> 
On what days would you like to be reminded on: <br> 
<input type="checkbox" name="day" value="Monday">Monday<br> 
<input type="checkbox" name="day" value="Tuesday">Tuesday<br> 
<input type="checkbox" name="day" value="Wednesday">Wednesday<br> 
<input type="checkbox" name="day" value="Thursday">Thursday<br> 
<input type="checkbox" name="day" value="Friday">Friday<br> 
<input type="checkbox" name="day" value="Saturday">Saturday<br> 
<input type="checkbox" name="day" value="Sunday">Sunday<br> 
</form> 
</div> 

</body> 

</html>

來源

2013-05-20 Ebadly

聽起來像是你希望你的app2 div來原本沒有顯示，然後淡出。這是否正確？如果你想後面的一個被隱藏，直到你點擊前面的一個，它是如添加display: none;到CSS的#app2容易

<div id="app2" style="display:none">

Fiddle

來源

2013-05-20 23:52:33

是的，這是我想要的，謝謝。 – Ebadly

@Ebadly沒問題 - 快樂編碼！ –

@Ebadly當你有機會時，你也可以接受這個答案嗎？ –

：在標記爲設置。

下面是更新小提琴：http://jsfiddle.net/jakelauer/4ZQLq/2/

來源

2013-05-20 23:53:27 Jake

由於良好的CSS實踐的問題，我建議將常用的CSS的任務，如到這個助手類簡單的重用：

.hidden{ 
    display: none; 
}

它使較小的CSS類通常會增加HTML代碼的可讀性，因爲您可以減少混亂並且可以給出常用功能的友好名稱。請記住，您可以向HTML添加多個類並使用良好的類名，它們可以變得非常具有描述性。

我重做先前的兩個答案與一些新的CSS，它允許：

去除< B的> <ü>標籤，現在由CSS處理。刪除標籤上的hspace屬性，HTML5中不再支持該標籤，並且不再支持該標籤。此外，修改演示文稿的許多HTML屬性標記現在都由CSS處理，並且可以在其他頁面上重複使用（如果您選擇）。

這一切後，該表之前，HTML是（在我看來）更容易閱讀，看起來像這樣：

<body> 
<!-- php stuff goes the body --> 
<div id="app1"><p class="reminderFont">Do you want to make a reminder?</p> 
<br> 
<img class="appIMG1 floatLeft" src="YES.png"> 
<img class="appIMG2 floatRight" src="NO.png"> 
</div> 

<div id="app2" class="hidden">

管理您的HTML與CSS的外觀會讓你的生活，從長遠來看更容易，使得代碼更易於閱讀，並且正在成爲Web標準，因爲某些HTML表示屬性（如hspace）已被刪除。我希望這有幫助！

http://jsfiddle.net/VPcJs/3/

來源

2013-05-21 01:05:42 JessieArr

如何組織我的div標籤？

回答

相關問題