前端之css笔记3
一 display屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style><!--.c1{--><!--width:100px;--><!--height:200px;--><!--background-color:darkorange;--><!--}--><!--.c2{--><!--width:100px;--><!--height:200px;--><!--background-color:green;--><!--<!–display:none;–>--><!--}--><!--.c3{--><!--width:100px;--><!--height:200px;--><!--background-color:rebeccapurple;--><!--}--><!--.outer:hover .c2{--><!--display:none;--><!--}-->div{width:200px;height:200px;bockground-color:green;display:inline;}span{width:200px;height:200px;background-color:wheat;display:block;}</style> </head> <body><div>DIV</div><span>span</span><!--<div class="c1"></div>--><!--<div class="outer">--><!--<div class="c2"></div>--><!--<div class="c3"></div>--> <!--</div>--></body> </html> View Code二 inline-block屬性值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}.c1{width:100px;height:200px;background-color:darkorange;display:inline-block;}.c2{width:200px;height:200px;background-color:green;display:none;margin-lift:-4px;}.c3{width:300px;height:200px;background-color:rebeccapurple;display:inline-block;margin-left:-5px;}ul li{list-style:none;}ul li a{width:20px;height:20px;float:left;padding:20px;margin-left:5px;background-color:wheat;}</style> </head> <body><a class="c1"></a><div class="c2"></div> <div class="c3"></div><ul><li class="item"><a href="">1</a> </li><li class="item"><a href="">2</a> </li><li class="item"><a href="">3</a> </li><li class="item"><a href="">4</a> </li><li class="item"><a href="">5</a> </li><li class="item"><a href="">6</a> </li><li class="item"><a href="">7</a> </li><li class="item"><a href="">8</a> </li> </ul></body> </html> View Code三float 父級塌陷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}.box1,.box2{float:left;width:50%;height:60px;}.box1{background-color:wheat;}.box2{background-color:green;}.content{width:100%;height:60px;background-color:greenyellow;}.header{border:red 1px solid;}.clearfix:after{content:"";display:block;clear:both;}</style> </head> <body><div class="header clearfix"><div class="box1"></div><div class="box2"></div></div><div class="content"></div></body> </html> View Code四 清除浮動
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin :0px;}.div1{background-color:rebeccapurple;width:200px;height:100px;float:left;}.div2{background-color:teal;width:200px;height:200px;float:left;clear:left;}.div3{background-color:green;width:100px;height:300px;float:left;clear:right;}</style> </head> <body><div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html> View Code五 a標簽錨
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.fang1{width:100%;height:1000px;background-color:wheat;}.fang2{width:100%;height:1000px;background-color:red;}.fang3{width:100%;height:1000px;background-color:green;}</style> </head> <body><ul><li><a href="#c1">第一章</a></li><li><a href="#c2">第二章</a></li><li><a href="#c3">第三章</a></li> </ul><div class="fang1" id="c1">第一章</div> <a href="#">返回頂端</a> <div class="fang2" id="c2">第二章</div> <a href="#">返回頂端</a> <div class="fang3" id="c3">第三章</div> <a href="#">返回頂端</a> </body> </html> View Code六 position定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0px;}.div1{background-color:rebeccapurple;width:200px;height:200px;}.div2{background-color:green;width:200px;height:200px;position:absolute;left:200px;top:200px;<!--position:relatinve--------;1, 參照物是以自己原來在文檔流的位置 --><!--2 物理位置依然存在-->}.div3{background-color:teal;width:200px;height:200px;}.father_box{position:relative;border: 2px solid red;}</style> </head> <body><div class="div1"></div><div class="father_box"><div class="div2"></div><div class="div3"></div> </div></body> </html> View Code七fix定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1{width:100%;height:2000px;background-color:wheat;}.returnTop{width:90px;height:35px;text-indent:10px;background-color:grey;color:white;tsxt-align:center;line-height:35px;position:fixed;right:20px;bottom:20px;}</style> </head> <body><div class="c1"></div><div class="returnTop">返回頂部</div></body> </html> View Code八 marging塌陷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0px;}.div1{background-color:rebeccapurple;width:300px;height:300px;overflow:hidden;<!--border:1px solid rebeccapurple;--><!--padding:1px;-->}.div2{background-color:green;width:100px;height:100px;margin-top:20px;}.div3{background-color:teal;width:100px;height:100px;}</style> </head> <body><div style="background-color: bisque;width: 300px;height: 300px"></div> <div class="div1"><div class="div2"></div><div class="div3"></div> </div></body> </html> View Code九 txet
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}ul li{list-style:none;}</style> </head> <body><ul><li>11</li><li>11</li><li>11</li> </ul> </body> </html> View Code?
轉載于:https://www.cnblogs.com/fangjie0410/p/7281698.html
總結
- 上一篇： JVM内存计算问题
- 下一篇： HTML——CSS的基础语法2