1、制作三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div> </div> </body> </html>
2、制作圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 200px; height: 200px; background-color: red; /*制作圆角*/ /*border-radius: 3px;*/ /*border-radius: 100px;*/ border-radius: 50%; } </style> </head> <body> <div> </div> </body> </html>
3、clear清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .father{ width: 500px; /*height: 400px;*/ } .box1{ width: 100px; height: 100px; background-color:red; float: left; } .box2{ width: 100px; height: 300px; background-color:green; float: left; } .box3{ width: 100px; height: 100px; background-color:blue; float: left; } .father2{ width: 600px; height: 200px; background-color: yellow; } .clearfix{ clear:both; } </style> </head> <body> <div class="father"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <!-- 内墙法 --> <div class="clearfix"></div> </div> <div class="father2"></div> </body> </html>
4、伪元素清除法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="shortcut icon" href="./ico" type="image/x-icon"> <style> .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both } </style> </head> <body> <!-- <p> <span>aaaaa</span> </p> --> <div class="box"> <div class="father clearfix"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </div> <div class="father2"></div> </body> </html>
5、overflow清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .father{ width: 500px; /*height: 400px;*/ overflow: hidden; } .box1{ width: 100px; height: 100px; background-color:red; float: left; } .box2{ width: 100px; height: 300px; background-color:green; float: left; } .box3{ width: 100px; height: 100px; background-color:blue; float: left; } .father2{ width: 600px; height: 200px; background-color: yellow; } </style> </head> <body> <!-- <p> <span>aaaaa</span> </p> --> <div class="box"> <div class="father"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </div> <div class="father2"></div> </body> </html>
6、iconfont用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*第一步：拷贝项目下面生成的font-face*/ @font-face {font-family: 'iconfont'; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), url('./font/iconfont.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .aa{ font-size: 20px; } .tt{ font-size: 26px; } </style> </head> <body> <i class="iconfont aa"></i> <span class="iconfont tt"></span> </body> </html>