pabout float left width 180 px padding 10
p#about {float: left; width: 180 px; padding: 10 px; margin: 10 px; color: green; border: 2 px solid blue; } <p id="about"> About DLNA 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: 180 px; padding: 10 px; margin: 10 px; color: green; border: 2 px solid blue; }
p#about { float: left; width: 180 px; padding: 10 px; margin: 10 px; color: green; border: 2 px solid blue; } p#intro { float: right; width: 180 px; padding: 10 px; margin: 10 px; color: green; border: 2 px solid blue; }
設定元素位置 ß ß top right bottom left <img src="lily. jpg" alt="" style="position: fixed; right: 50 px; top: 100 px; "
relative <img … style="position: relative; left: 100 px; top: 50 px; "/>
absolute <img … style="position: absolute; left: 100 px; top: 50 px; " />
<div style="position: absolute; left: 50 px; top: 100 px; "> … <img … style="position: absolute; left: 100 px; top: 50 px; " /> … </div>
fixed <div style="position: absolute; left: 50 px; top: 100 px; "> … <img … style="position: fixed; left: 100 px; top: 50 px; " /> … </div>
http: //ycchen. im. ncnu. edu. tw/www 2011/lab/position. zip <div id="content"> <img id="tbg" src="tbg. png" /> <h 1>日劇:來自北國</h 1> <img id="north" src="north. jpg" /> <p> 倉本聰一起筆就是乾淨俐落。<br/> … </div> #tbg { position: absolute; top: 0 px; left: 0 px; z-index: -1; } #north { width: 150 px; position: absolute; bottom: 20 px; right: 20 px; }
overflow: visible; overflow: scroll; overflow: hidden; overflow: auto;
顯示與隱藏元素 ß visibility: visible | hidden | collapse <span style="visibility: hidden; ">visibility</span> 適用於表格
display屬性 ß display: inline | block | list-item | none | run-in | compact | marker | table | inline-block | inlinetable | table-row-group | table-header-group | table-footer-group | table-row | tablecolumn-group | table-column | table-cell | table-caption
a {width: 120 px; text-align: right; margin: 4 px; padding: 2 px 4 px 2 px; text-decoration: none; border: #f 90 solid 1 px; border-left-width: 10 px; background-color: #fc 0; }. menu a { display: block; } <p> <a href="http: //www. ncnu. edu. tw/">NCNU</a> <a href="https: //webmail. ncnu. edu. tw/">暨大 Web Mail</a> <a href="http: //www. im. ncnu. edu. tw/">暨大資管系</a> </p> <div class="menu"> <a href="http: //www. ncnu. edu. tw/">NCNU</a> <a href="https: //webmail. ncnu. edu. tw/">暨大 Web Mail</a> <a href="http: //www. im. ncnu. edu. tw/">暨大資管系</a> </div>
User Name: <input type="text" id="uid" name="uid" size="10" maxlength="20" placeholder="Your id" /> Password: <input type="password" id="pwd" name="pwd" size="12" maxlength="20" /> <span class="frm. Txt">User Name: </span> <input type="text" id="uid" name="uid" size="10" maxlength="20" placeholder="Your id" /> <span class="frm. Txt">Password: </span> <input type="password" id="pwd" name="pwd" size="12" maxlength="20" /> . frm. Txt { display: inline-block; width: 120 px; text-align: right; }
設定元素堆疊順序 ß ß z-index屬性 z-index值越高者,堆疊越上面 p { border: 2 px solid blue; color: red; font-size: 36 px; position: absolute; height: 120 px; } <p style="z-index: 1; top: 20 px; left: 20 px; background-color: yellow; "> 元素 1 : z-index = 1 </p>
- Slides: 24