愛算牌的部落格 | 電玩動漫分享 | 痞客邦 | PIXNET

Dec 25 Mon 2017 12:45
對齊 align

<style>
div {border:1px solid;}
.align_left{text-align:left;}
.align_center{text-align:center;}
.align_right{text-right;}
valign_top{vertical-align:top;}
valign_middle{vertical-align:middle;}
valign_buttom{vertical-buttom:buttom;}
</style>
<div class="aling_left">靠左</div>
<div class="align_center">置中</div>
<div class="align_right">靠右</div>
<div class="valign_top">垂直靠上</div>
<div class="valign_middle">垂直置中</div>
<div class="valign_buttom">垂直靠底</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 25 Mon 2017 12:45
對齊 align

<style>
div {border:1px solid;}
.align_left{text-align:left;}
.align_center{text-align:center;}
.align_right{text-right;}
valign_top{vertical-align:top;}
valign_middle{vertical-align:middle;}
valign_buttom{vertical-buttom:buttom;}
</style>
<div class="aling_left">靠左</div>
<div class="align_center">置中</div>
<div class="align_right">靠右</div>
<div class="valign_top">垂直靠上</div>
<div class="valign_middle">垂直置中</div>
<div class="valign_buttom">垂直靠底</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:37
不用clear的浮動 inline-block

<style>
.inline_block {
display:inline-block;
width:50px;
height:50px;
border:1px solid;
}
.w300 {
width:300px;
height:300px;
border:1px solid;
position:relative;
top:50px;
left:150px;
}
</style>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:37
不用clear的浮動 inline-block

<style>
.inline_block {
display:inline-block;
width:50px;
height:50px;
border:1px solid;
}
.w300 {
width:300px;
height:300px;
border:1px solid;
position:relative;
top:50px;
left:150px;
}
</style>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>
<div class="inline_block">A</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:29
浮動 float

<style>
.float_left {float:left}
.float_clear {clear:both}
</style>
<div class="float_left">1</div>
<div class="float_left">2</div>
<div class="float_clear"></div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:29
浮動 float

<style>
.float_left {float:left}
.float_clear {clear:both}
</style>
<div class="float_left">1</div>
<div class="float_left">2</div>
<div class="float_clear"></div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:13
超出範圍 overflow

<style>
.overflow_hidden {
width:50px;
height:50px;
border:1px solid;
overflow:hidden;
}
.overflow_auto {
width:50px;
height:50px;
border:1px solid;
overflow:auto;
}
</style>
<div class="overflow_hidden">
超出範圍，就不顯示。123456789123456789132456789123456789112345678913456789146456789123456789132456789123456789
</div>
<div class="overflow_auto">
超出範圍，就自動用移動軸。123456789123456789132456789123456789112345678913456789146456789123456789132456789123456789
</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 20 Wed 2017 14:13
超出範圍 overflow

<style>
.overflow_hidden {
width:50px;
height:50px;
border:1px solid;
overflow:hidden;
}
.overflow_auto {
width:50px;
height:50px;
border:1px solid;
overflow:auto;
}
</style>
<div class="overflow_hidden">
超出範圍，就不顯示。123456789123456789132456789123456789112345678913456789146456789123456789132456789123456789
</div>
<div class="overflow_auto">
超出範圍，就自動用移動軸。123456789123456789132456789123456789112345678913456789146456789123456789132456789123456789
</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 19 Tue 2017 13:24
位置 position

<style>
.position_static {border:1px solid;}
.position_relative {
position:relative;
border:1px solid;
top:50px;
left:150px;
}
.position_fixed {
position:fixed;
border:1px solid;
}
.position_absolute {
position:absolute;
border:1px solid;
top:0px;
right:0px;
}
.position_sticky {
position:sticky;
border:1px solid;
top:0px;
}
</style>
<div class="position_static">static 預設值靜態不受top、left、right、mottom等位移影響</div>
<div class="position_relative">relative 相對位置可位移</div>
<div class="position_fixed">fixed 即使頁面滾動依舊固定不動</div>
<div class="position_absolute">absolute 絕對位置可以到處跑參考點是整個頁面</div>
<div class="position_sticky">sticky 黏貼會隨頁面滾動但不會消失於視野</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 19 Tue 2017 13:24
位置 position

<style>
.position_static {border:1px solid;}
.position_relative {
position:relative;
border:1px solid;
top:50px;
left:150px;
}
.position_fixed {
position:fixed;
border:1px solid;
}
.position_absolute {
position:absolute;
border:1px solid;
top:0px;
right:0px;
}
.position_sticky {
position:sticky;
border:1px solid;
top:0px;
}
</style>
<div class="position_static">static 預設值靜態不受top、left、right、mottom等位移影響</div>
<div class="position_relative">relative 相對位置可位移</div>
<div class="position_fixed">fixed 即使頁面滾動依舊固定不動</div>
<div class="position_absolute">absolute 絕對位置可以到處跑參考點是整個頁面</div>
<div class="position_sticky">sticky 黏貼會隨頁面滾動但不會消失於視野</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 19 Tue 2017 13:19
伸縮的寬 max-width

<style>
max-width:600px;
margin:auto;
border:1px solid;
</style>
<div>可隨網頁寬縮小，最大到600px</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

Dec 19 Tue 2017 13:19
伸縮的寬 max-width

<style>
max-width:600px;
margin:auto;
border:1px solid;
</style>
<div>可隨網頁寬縮小，最大到600px</div>

(繼續閱讀...)

kiri 發表在痞客邦留言(0) 人氣()

個人分類： CSS

▲top

1 2 3 4 »

參觀人氣

本日人氣：
累積人氣：

參觀人氣

本日人氣：
累積人氣：