居中五环:
z-index: 3;越大越靠上 HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div class="plat"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </body> </html>CSS:
*{ margin: 0; padding: 0; } .circle1, .circle2, .circle3, .circle4, .circle5{ position: absolute; width: 100px; height: 100px; border: 10px solid black; border-radius: 50% ; } .circle1{ border-color: red; left: 0; top: 0; } .circle2{ border-color: green; left: 130px; top: 0; z-index: 3; } .circle3{ border-color: yellow; left: 260px; top: 0; } .circle4{ border-color: blue; left: 65px; top: 70px; } .circle5{ border-color: purple; left: 195px; top: 70px; } .plat{ position: absolute; left: 50%; top: 50%; margin-left: -190px; margin-top: -93px; border: 0px solid black; height: 186px; width: 380px; }两栏布局:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div class="right"></div> <div class="left"></div> </body> </html>CSS:
*{ margin: 0; padding: 0; } .right{ position: absolute; right: 0; width: 100px; height: 100px; background-color: pink; } .left{ height: 100px; margin-right: 100px; background-color: blue; }两个bug： margin塌陷： 垂直方向的margin 父子是关联在一起取最大值 解决方法：让父级变成BFC BFC（块级格式化上下文） 触发BFC的三种方法
position: absolute; display: inline-block; overflow: hidden;包裹浮动元素
float
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div> </body> </html>CSS:
*{ margin: 0; padding: 0; } .wrapper{ width: 300px; height: 300px; border: 1px solid black; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; }没加float： 加上float :left： 加上float :right： 1.浮动元素产生了浮动流 所有产生了浮动流的元素，块级元素看不到他们 产生了bfc的元素和文本类属性的元素以及文本(inline)都能看到的浮动元素
clear: both;清除周围的浮动流
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <p></p> </div> </body> CSS: *{ margin: 0; padding: 0; } .wrapper{ border: 1px solid black; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; } p{ border-top: 0 solid black; clear: both; }伪元素 伪元素存在每个标签里. 一个标签在逻辑最前和最后有两个伪元素 条用前面的伪元素用 例如 span::before 条用后面的伪元素用 例如 span::after 在元素里加content:"输入"； 输入伪元素内容 伪元素是行级元素，给他定义其他属性需要加display: inline-block; 可以利用伪元素来清除浮动
span::after{ content: ""; clear: both; display: block; }设置position:abolute; float: left/right; 把内部元素自动转化成inline-block；
文字环绕图片
在图片的CSS里写一个 float: left; 变成文字环绕图片型
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <img class="img1" src="1.PNG"> 举个例子。。。。 </body> </html>CSS:
*{ margin: 0; padding: 0; } .img1{ float: left; }HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <ul class="nav"> <li class="list-item"> <a href="#">天猫</a> </li> <li class="list-item"> <a href="#">聚划算</a> </li> <li class="list-item"> <a href="#">天猫超市</a> </li> </ul> </body> </html>CSS:
*{ margin: 0; padding: 0; color: #424242; font-family: arial; } .nav{ list-style: none; /*控制圆点*/ } a{ text-decoration: none; } .nav::after{ content: ""; display: block; clear: both; } .nav .list-item{ float: left; margin: 0 10px; height: 30px; line-height: 30px; } .nav .list-item a{ color: #f40; font-weight: bold; height: 30px; padding: 0 5px; display: inline-block; border-radius: 15px; } .nav .list-item a:hover{ background-color: #f40; color: #fff; }