2013年8月22日 星期四

css位置測試



example1_div_before
example1_div1
example1_div1a
example1_div1b
example1_div1_after
 #example1{
height:300px;
width:250px;
border:#000 thick solid;
}
#example1_div1_before, #example1_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example1_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example1_div1a {
position:absolute;
top:0;
right:0;
width:200px;
background-color:#F00;
}
#example1_div1b {
background-color:#3d3;
color:#fff;
}
#example1_div1c {
background-color:#33d;
color:#fff;
}
example2_div_before
example2_div1
example2_div1a
example2_div1b
example2_div1_after
 #example2{
height:300px;
width:300px;
border:#000 thick solid;
}
#example2_div1_before, #example2_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example2_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example2_div1a {
background-color:#F00;
}
#example2_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;
}
example3_div_before
example3_div1
example3_div1a
example3_div1b
example3_div1_after
 #example3{
height:300px;
width:300px;
border:#000 thick solid;
}
#example3_div1_before, #example3_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example3_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example3_div1a {
background-color:#F00;
}
#example3_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;

margin-top:10px;
}
example4_div_before
example4_div1
example4_div1a
example4_div1b
example4_div1_after
 #example4{
height:300px;
width:300px;
border:#000 thick solid;
}
#example4_div1_before, #example4_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example4_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}

 #example4_div1a {
background-color:#F00;
}
#example4_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;

position:absolute;
}
example5_div_before
example5_div1
example5_div1a
example5_div1b
example5_div1_after
 #example5{
height:300px;
width:300px;
border:#000 thick solid;
}
#example5_div1_before, #example5_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example5_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example5_div1a {
background-color:#F00;
}
#example5_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;

position:absolute;
top:10px;
}
example6_div_before
example6_div1
example6_div1a
example6_div1b
example6_div1_after
 #example6{
height:300px;
width:300px;
border:#000 thick solid;
}
#example6_div1_before, #example6_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example6_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example6_div1a {
background-color:#F00;
}
#example6_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;

position:absolute;
margin-top:10px;
 }
example7_div_before
example7_div1
example7_div1a
example7_div1b
example7_div1_after
 #example7{
height:300px;
width:300px;
border:#000 thick solid;
}
#example7_div1_before, #example7_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example7_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example7_div1a {
background-color:#F00;
}
#example7_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:200px;

position:absolute;
margin-top:10px;
top:10px;
}		 紅色區塊剛好被蓋住
example8_div_before
example8_div1
example8_div1a
example8_div1b
example8_div1_after
 #example8{
height:300px;
width:250px;
border:#000 thick solid;
}
#example8_div1_before, #example8_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example8_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example8_div1a {
background-color:#F00;
}
#example8_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:150px;

/*position:absolute;*/
margin: 0px auto;
}
example9_div_before
example9_div1...
example9_div1a
example9_div1b
example9_div1_after
 #example9{
height:300px;
width:250px;
border:#000 thick solid;
}
#example9_div1_before, #example9_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example9_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example9_div1a {
background-color:#F00;
}
#example9_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:150px;

position:absolute;
top:50%;
}		 整個黑色區塊的垂直中線，是綠色區塊上面的邊緣線。
example10_div_before
example10_div1...
example10_div1a
example10_div1b
example10_div1_after
 #example10{
height:300px;
width:250px;
border:#000 thick solid;
}
#example10_div1_before, #example10_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example10_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
}		 #example10_div1a {
background-color:#F00;
}
#example10_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:150px;

position:absolute;
bottom:50%;
}		 整個黑色區塊的垂直中線，是綠色區塊下面的邊緣線。
example11_div_before
example11_div1...
example11_div1a
example11_div1b
example11_div1_after
 #example11{
height:300px;
width:250px;
border:#000 thick solid;
}
#example11_div1_before, #example11_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example11_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
vertical-align:middle;
}		 #example11_div1a {
background-color:#F00;
height:20px;
width:130px;
}
#example11_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:150px;

position:absolute;
}		 沒效果。
畫紅線的部份：
把 vertical那一行拿掉，或是把absolute改成relative，內容一樣。
example12_div_before
example12_div1...
example12_div1a
example12_div1b
example12_div1_after
 #example12{
height:300px;
width:250px;
border:#000 thick solid;
}
#example12_div1_before, #example12_div1_after {
background-color:#88d;
height:40px;
color:#000;
}
#example12_div1 {
position:relative;
background-color:#000;
height:200px;
color:#FFF;
display:table-cell;
vertical-align:middle;
}		 #example12_div1a {
background-color:#F00;
height:40px;
width:130px;
}
#example12_div1b {
background-color:#3d3;
border:solid thick #FFF;
height:50px;
width:150px;

position:relative;
}		 div1, div1a, div1b，這 3 個區塊一起置中。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)