子網頁實戰練習
阿新 • • 發佈：2019-03-21
line repeat padding charset content ebp otto www vertical
來自為知筆記(Wiz)
定位
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子絕夫相</title> <style> *{ margin: 0px; padding: 0px; } ul{ list-style: none; width: 800px; height: 50px; margin: 0 auto; margin-top: 100px; background: #ccc; } ul li{ float:right; width: 100px; line-height: 50px; text-align: center; } ul li:nth-of-type(3){ background: yellow; } </style> </head> <body> <ul> <li>服裝城</li> <li>美妝館</li> <li>京東</li> <li>超市</li> <li>全球網購</li> <li>閃購</li> <li>團購</li> <li>拍賣金融</li> </ul> </body> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位水平居中</title> <style> .box{ width: 300px; height: 50px; background: red; position: absolute; left:50%; margin-left:-150px; } </style> </head> <body> <div class="box"></div> </body> </html> --> 1 <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位練習</title> <style> *{ margin: 0px; padding: 0px; } div{ width: 300px; height: 300px; border: 1px solid #ccc; margin: 0 auto; margin-top:100px; position: relative; } div img{ width: 300px; height: 200px; } /*目前沒有精靈圖*/ div .hot{ width: 45px; height: 44px; /*display: inline-block;*/ background: url("img/tuangou.png") no-repeat 0px -280px; position: absolute; top: 0px; right: 0px; } div .price{ /*display: inline-block;*/ width: 134px; height: 42px; background: url("img/tuangou.png") no-repeat 0px -362px; position: absolute; left:-7px; top:163px; } </style> </head> <body> <div> <img src="t01aaddc9d9b0d1e45d.jpg" > <span class="hot"></span> <span class="price"></span> <p>是你的夫君外後浮動那你就</p> </div> </body> </html> --> 2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位練習2</title> <style> *{ margin: 0px; padding:0px; } div{ width: 520px; height: 280px; border: 2px solid #000; margin: 0 auto; margin-top:100px; position: relative; } div span{ display: block; width: 40px; height: 80px; background-color: rgba(0,0,0,0.3); margin-top: 10px; font-size:50px; color: white; text-align: center; line-height: 80px; } div .leftArrow{ position: absolute; left:0px; top:69px; } div .rightArrow{ position: absolute; right:116px; top:69px; } ol{ list-style: none; width: 200px; height: 40px; background:rgba(255,255,255,0.7); position: absolute; right: 8px; bottom: 10px; } ol li{ width: 40px; /*height: 40px;*/ border: 1px solid gold; /*讓li水平排版*/ float: left; /*加邊框使得元素空間變大，讓防止*/ box-sizing: border-box; /*水平垂直居中*/ text-align: center; line-height: 40px; /*定位 沒有方向時候脫離標準流層疊在一起*/ } </style> </head> <body> <div> <img src="TB1EMhjIpXXXXaPXVXXXXXXXXXX.jpg_.webp" > <span class="leftArrow"><</span> <span class="rightArrow">></span> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
來自為知筆記(Wiz)
子網頁實戰練習