定位的CSS样式.pptVIP

a {width:120px; text-align:right; margin:4px; padding: 2px 4px 2px; text-decoration: none; border: #f90 solid 1px; border-left-width: 10px; background-color: #fc0; } .menu a { display: block; } p a href=.tw/NCNU/a a href=.tw/暨大 Web Mail/a a href=.tw/暨大資管系/a /p div class=menu a href=.tw/NCNU/a a href=.tw/暨大 Web Mail/a a href=.tw/暨大資管系/a /div User Name: input type=text id=uid name=uid size=10 maxlength=20 placeholder=Your id /br / Password: input type=password id=pwd name=pwd size=12 maxlength=20 /br / span class=frmTxtUser Name:/span input type=text id=uid name=uid size=10 maxlength=20 placeholder=Your id /br / span class=frmTxtPassword:/span input type=password id=pwd name=pwd size=12 maxlength=20 /br / .frmTxt { display: inline-block; width:120px; text-align: right; } 設定元素堆疊順序 z-index屬性 z-index值越高者，堆疊越上面 p { border: 2px solid blue; color: red; font-size: 36px; position: absolute; height: 120px; } p style=z-index: 1; top: 20px; left: 20px; background-color: yellow;元素 1 : z-index = 1 /p * 定位的CSS樣式 CSS之正常排版 文字與Inline元素由上而下、由左而右依序排列 區塊元素由上而下排列，左右空間被區塊元素整個佔住 每個元素位置變動，將影響周遭元素位置 以上可使用CSS定位相關屬性加以控制改變 float屬性 float屬性用來設定元素浮動的位置 left | right | none p#about {float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; } p id=about About DLNAbr / The Digital Living Network Alliance (DLNA) … /p p id=intro Digital Living Network Alliance began in 2003 when a collection of companies from around the world agreed that they all made better products when those products were compatible. /p p id=overview Today, more than 245 companies comprise DLNA, all brands that you know. They include consumer electronics, computer … /p p#about, p#intro { float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; } p#about { float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; } p#intro { float:right; width:180px; padding: 10px; margin: 10px;