CSS练习题
1、margin——控制网页元素的位置，页面效果如下：
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>控制网页元素的位置</title> <link href="style/2-7.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"> <div id="pic"><img class="pic1" src="images/2702.jpg" alt="" /></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; } body{ background-color:#917e67; } #box{ width:820px; height:687px; background-image:url(../images/2701.jpg); background-repeat:no-repeat; background-position: left 20px; margin:0px auto; padding-top: 20px; } .box{ background-image: url(images/2701.jpg) } .pic1{ margin:180px 80px 30px 80px; }
2、border——为网页元素添加边框，页面效果如下：
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>为网页元素添加边框</title> <link href="style/2-8.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"> <div id="logo"><img src="images/2803.png" width="269" height="37" alt="" /></div> <div id="main"> <img class="pic1" src="images/2804.jpg" alt="" width="210" height="190" /> <img class="pic2" src="images/2805.jpg" alt="" width="210" height="190" /> <img class="pic3" src="images/2806.jpg" alt="" width="210" height="190" /> <img class="pic4" src="images/2807.jpg" alt="" width="210" height="190" /> <img class="pic1" src="images/2808.jpg" alt="" width="210" height="190" /> <img class="pic2" src="images/2809.jpg" alt="" width="210" height="190" /> <img class="pic3" src="images/2810.jpg" alt="" width="210" height="190" /> <img class="pic4" src="images/2811.jpg" alt="" width="210" height="190" /> </div> </div> <p> </p> </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:250px; }
3、padding——控制Div中内容的位置，页面效果如下：
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>控制Div中内容的位置</title> <link href="style/2-9.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"> <img src="images/2902.png" alt="" /> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; } body{ background-image:url(../images/2901.gif); background-repeat:repeat-x; } #box{ width: 917px; height: 552px; margin: 0px auto; } #box { padding-top: 60px; }
