DIV+CSS布局属性
div和span
盒模型:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> *{margin: 0;} .d1{ width:500px; height: 500px; background: #666; margin: 100px; border: red; padding: 40px; } </style> </head> <body> <div class="d1"> <img src="timg.jpg" width="300" height="400"/></div> </body> </html>
运行结果:
布局相关的属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> .img1{position: absolute; left: 100px; top:160px; border: red solid 2px; z-index: 2; display: none;} .img2{position: absolute; left: 100px; top:160px; border: yellow solid 2px; z-index: 1; display: block; float: right; } </style> </head> <body> <img src="timg.jpg" width="300" height="400"class="img1"/> <img src="timg.jpg" width="300" height="400"class="img2"/> <h1 style="position: absolute;left: 0; top:0;z-index: 1;color: red;">好好学习,天天向上</h1> <h1 style="position: absolute;left: 2px; top:2px;z-index: 2;color: blue;">好好学习,天天向上</h1> <h1 style="position: absolute;left: 4px; top:4px;z-index: 3;color: purple;">好好学习,天天向上</h1> <h1 style="position: absolute;left: 6px; top:6px;z-index: 4;color: gold;">好好学习,天天向上</h1> <h1 style="position: absolute;left: 8px; top:8px;z-index: 5;color: green;">好好学习,天天向上</h1> </body> </html>运行结果:
DIV+CSS布局属性
DIV+CSS布局属性