2021.5.28.21:07
作者:互联网
今天是第五天 今天学的比较少 不过今天讲了怎么使用阿里巴巴图标库,
阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
下面照常记录今天所学;
清除浮动的方式<style> *{ margin: 0; padding: 0; } /* 清除浮动的方式: 1. 给父元素加高度 2. 隔墙法:在浮动元素的末尾,添加一个【块元素】,给这个块元素设置 clear属性。 clear:left(清除左浮动) clear:right(清除右浮动) clear:both(清除左右浮动) 3. 给父元素设置 overflow:hidden(overflow:溢出 hidden:隐藏) 。 注意:谨慎使用 4. 给父元素添加后缀(伪元素) ::after 5. 给父元素添加前缀及后缀(双伪元素) ::before ::after */ ul{ list-style: none; background-color: aqua; /* 方式1 */ /* height: 60px; */ /* 方式3 */ /* overflow: hidden; */ } /* 方式4 */ /* 伪元素: 伪标签,可以把它当成标签使用 */ /* .clearfix::after{ content: ""; display: block; height: 0; visibility: hidden; clear: both; } */ /* .clearfix{ *zoom: 1; } */ /* 方式5 */ .clearfix::before, .clearfix::after{ content: ""; display: table; } .clearfix::after{ clear: both; } .clearfix{ /* IE6 IE7 专有*/ *zoom: 1; } ul li:not(.clear){ float: left; width: 100px; height: 60px; text-align: center; line-height: 60px; margin: 0 10px; background-color: antiquewhite; } .con{ height: 200px; background-color: pink; } </style> </head> <body> <ul class="list clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <!-- 方式2 --> <!-- <li class="clear" style="clear: both;"></li> --> </ul> <div class="con clearfix"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>overflow属性
<style> .box{ width: 500px; height: 300px; border: 1px solid #333; /* overflow :溢出 1> hidden:隐藏【溢出的内容】 2> scroll:滚动, 显示滚动条,无论是否有内容溢出,都会存在滚动条 3> auto: 自动, 4> visible: 可见 */ overflow: hidden; } </style> </head> <body> <div class="box"> <p> 很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字 </p> </div> </body>visibility属性
<style> .header{ height: 60px; } .item{ float: left; height: 60px; width: 80px; background-color: skyblue; margin: 0 10px; } .list{ width: 80px; height: 150px; border: 1px solid red; visibility: hidden; } .header .item:nth-child(2):hover .list{ visibility: visible; } .box{ height: 60px; background-color: blue; visibility: hidden; } /* visibility: 设置元素的显示和隐藏 1> hidden 隐藏 2> visible 显示 注意: 该属性实现元素隐藏时, 元素依然占据原来的空间 */ </style> </head> <body> <div class="header"> <div class="item">1</div> <div class="item"> <a href="#">2</a> <div class="list"></div> </div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div class="box"></div> <div class="banner" style="height: 200px; background-color: pink;"> </div> </body>display实现显示和隐藏
<style> .header{ height: 60px; } .item{ float: left; height: 60px; width: 80px; background-color: skyblue; margin: 0 10px; } .list{ width: 80px; height: 150px; border: 1px solid red; display: none; } .header .item:nth-child(2):hover .list{ display: block; } .box{ height: 60px; background-color: blue; display: none; } /* display: 设置元素的显示和隐藏 1> none 隐藏 2> block 以块的形式显示 3> inline 以行的形式显示 4> inline-block 以行内块的形式显示 与 visibility 实现元素隐藏 的区别: display:none 元素隐藏时,不再占据原来的空间。 */ </style> </head> <body> <div class="header"> <div class="item">1</div> <div class="item"> <a href="#">2</a> <div class="list"></div> </div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div class="box"></div> <div class="banner" style="height: 200px; background-color: pink;"> </div> </body>
伪元素选择器
<style> /* 伪元素: 伪标签,它可以当成行标签使用 ::before 表示前缀 ::after 表示后缀 content属性: 设置伪元素的内容 注意:content属性 在任何情况下都不能省去。 使用场景:清除浮动 添加字体图标等 */ #txt::before{ content: "hello"; color: red; font-size: 18px; width: 200px; height: 300px; background-color: cornflowerblue; display: inline-block; } #txt::after{ content: '!'; } </style> </head> <body> <div id="txt">world </div> </body>
今日练习:土巴兔网页导航
end
明天是周六,虽然不上课,但是要自习,所以明天应该不会发了,后天是星期天,休息,应该也不会发,就这样吧。
标签:文字,很多,2021.5,07,元素,28.21,height,60px,hidden 来源: https://www.cnblogs.com/wangjie677/p/14823845.html