实例
下代码为外边距的三个特征: 同级塌陷,嵌套传递,自动挤压 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/qsb.css"> <title>外边距的三个特征</title> </head> <body> <h3>同级塌陷</h3> <div class="box1"></div> <div class="box2"></div> <h3>嵌套传递</h3> <div class="box3"> <div class="box4"></div> </div> <h3>自动挤压</h3> <div class="box5"></div> <div class="box6"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1 { width: 300px; height: 150px; background-color: yellow; } .box2 { width:200px; height:200px; background-color: red; } .box1 { margin-bottom: 30px; } .box2 { margin-top: 50px; } .box3 { width: 200px; height: 200px; background-color:greenyellow; } .box4 { width:100px; height:100px; background-color: red; } .box4 { margin-top: 0; } .box3 { padding-top: 50px; height: 150px; } .box5 { width: 200px; height: 200px; background-color: blue; } .box { margin: auto; } .box6 { width:200px; height:200px; background-color: red; } .box5 { margin: auto; } .box6 { margin: 50px auto; } }
运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为清除浮动代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/bcs.css"> <title>浮动float</title> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1 { width: 150px; height: 150px; background-color: red; } .box2 { width: 200px; height: 200px; background-color: blue; } .box1 { float: left; } .box2 { float: left; } .box3 { width: 300px; height: 300px; background-color: green; } .box3 { float: right; } .box4 { width: 100%; height: 300px; background-color: black; } .box4 { clear: left; clear: right; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为想对定位代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <link rel="stylesheet" href="static/css/style5.css"> </head> <body> <h3>相对定位</h3> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <h3>绝对定位</h3> <div class="parent"> <div class="box6">1</div> <div class="box7">2</div> <div class="box8">3</div> <div class="box9">4</div> <div class="box10">5</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1 { width: 100px; height: 100px; background-color: green; } .box1 { position: relative; left: 100px; } .box2 { width: 100px; height: 100px; background-color: blue; } .box3 { width: 100px; height: 100px; background-color: red; } .box3 { position: relative; left: 100px; top: -100px; } .box4 { width: 100px; height: 100px; background-color: yellow; } .box4 { position: relative; left: 100px; top: -100px; } .box5 { width: 100px; height: 100px; background-color: darkorange; } .box5 { position: relative; left: 100px; top: -100px; } .box6 { width: 100px; height: 100px; background-color: green; } .box7 { width: 100px; height: 100px; background-color: blue; } .box8 { width: 100px; height: 100px; background-color: red; } .box9 { width: 100px; height: 100px; background-color: yellow; } .box10 { width: 100px; height: 100px; background-color: darkorange; } .parent { border: 1px dotted black; width: 400px; height: 400px; position: relative; } .box6 { position: absolute; left: 100px; } .box7 { position: absolute; top: 100px; } .box8 { position: absolute; top: 100px; left: 100px; } .box9 { position: absolute; top: 100px; left: 200px; } .box10 { position: absolute; top: 200px; left: 100px; } 以上代码执行结果截图
运行实例 »
点击 "运行实例" 按钮查看在线实例
模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style5.css"> <title>模拟登陆页面</title> </head> <body> <div class="mask"></div> <div class="login"> <img src="static/images/login.png" alt="login"> </div> <div class="adv"> <button>X</button> <h3>招生小广告</h3> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body{ margin: 0; height: 2000px; background-image: url("../images/phpweb.png"); background-size: cover; background-repeat: no-repeat; } .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.7; } .login img { width: 350px; height: 480px; position: absolute; left:50%; top:50%; margin-left: -175px; margin-top: -240px; } .adv{ width: 200px; height: 300px; background-color: lightblue; position: fixed; right: 0; bottom: 0; } .adv h3 { padding-top: 50%; padding-left: 30%; }
运行实例 »
点击 "运行实例" 按钮查看在线实例