CSS练习题（一）https://developer.aliyun.com/article/1383124
4、相对定位、绝对定位、浮动定位、页面效果如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置网页元素叠加显示</title> <link href="style/2-10.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"><img src="images/21003.jpg" width="575" height="359" alt=""/> <div id="pic01"> <img src="images/21004.png" alt="" /> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { font-family: 微软雅黑; font-size: 14px; color: #FFF; line-height: 30px; background-image: url(../images/21001.jpg); background-repeat: no-repeat; background-position: center -100px; } #box { width: 575px; height: 359px; margin: 90px auto 0px auto; background-image: url(../images/21002.png); background-repeat: no-repeat; padding: 28px 92px 128px 92px; } #pic01 { position:relative; top:-235px; left:265px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置网页元素固定在右侧显示</title> <link href="style/2-11.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box">我们的作品<br> <img src="images/21102.png" width="600" height="400" alt=""/> </div> <div id="pic"> <img src="images/21103.png" alt="" /> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置网页元素固定在右侧显示</title> <link href="style/2-11.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box">我们的作品<br> <img src="images/21102.png" width="600" height="400" alt=""/> </div> <div id="pic"> <img src="images/21103.png" alt="" /> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>制作作品列表</title> <link href="style/2-13.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"> <div id="menu"><img src="images/21303.png" width="124" height="50" alt="" /><img src="images/21304.png" width="124" height="50" alt="" /><img src="images/21305.png" width="124" height="50" alt="" /><img src="images/21306.png" width="124" height="50" alt="" /><img src="images/21307.png" width="124" height="50" alt="" /></div> <div id="bottom"> <div id="pic"><img src="images/21309.jpg" width="180" height="96" alt="" /></div> <div id="pic01"><img src="images/21310.jpg" width="180" height="96" alt="" /></div> <div id="pic02"><img src="images/21311.jpg" width="180" height="96" alt="" /></div> <div id="pic"><img src="images/21312.jpg" width="180" height="96" alt="" /></div> <div id="pic01"><img src="images/21313.jpg" width="180" height="96" alt="" /></div> <div id="pic02"><img src="images/21314.jpg" width="180" height="96" alt="" /></div> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; } body{ background-color:#dde1e4; background-image:url(../images/21301.jpg); background-repeat:no-repeat; background-position:center top; } #box{ width:1100px; height:auto; overflow:hidden; margin:0px auto; } #menu{ width:100%; height:270px; background-image:url(../images/21302.png); background-repeat:no-repeat; background-position:30px 30px; text-align:right; } #bottom{ width:616px; height:340px; background-image:url(../images/21308.jpg); background-repeat:no-repeat; padding:10px; margin-left:20px; margin-bottom:20px; } #pic{ width: 180px; height: 96px; margin: 4px; background-color: #CCC; padding: 8px; float:left; } #pic01{ width: 180px; height: 96px; margin: 4px; background-color: #CCC; padding: 8px; float:left; } #pic02{ width: 180px; height: 96px; margin: 4px; background-color: #CCC; padding: 8px; float:left; }
