盖住简介二字
去掉简介的二个字的话实际不是直接去掉了它还在的
原理是这样的在css样式中有这样的属性就是绝对位置
正常的情况下每个东西都是相对的也就是按照你写的东西的先后顺序排列的
当你用绝对的位置就不同了
例如
在一个box中
一个div1块用的是一个相对的位置然后你另一个div2块用的是绝对的位置那么div2块他会覆盖第一个div1块的
正常的样子
<div style="width:400px; height:400px; position:relative; margin:0px auto;border:1px solid #CCC;"> <div style=" width:200px;height:200px; background:#F00; text-align:center; line-height:200px; font-size:20px; margin:0px auto;">这里是div1块</div> <div style=" width:200px;height:200px; background:#00F;text-align:center; line-height:200px; font-size:20px; margin:0px auto;">这里是div1块</div> </div>
这里是div1块
这里是div1块
用了绝对位置的样子position:absolute加距离box的边框的距离top:0px 左边距离left:0px;
<div style="width:400px; height:400px; position:relative; margin:0px auto;border:1px solid #CCC;"> <div style=" width:200px;height:200px; background:#F00; text-align:center; line-height:200px; font-size:20px; margin:0px auto;">这里是div1块</div> <div style=" width:200px;height:200px; background:#00F;text-align:center; line-height:200px; font-size:20px; margin:0px auto; position:absolute;top:0px;left:0px;">这里是div1块</div> </div>
这里是div1块
这里是div1块
你会发现2个div块叠在一起了
也就是说我们在写简介的时候想要盖住简二个字的话就要用到绝对位置
我在这里给大家提供一个写好的代码
<div style="width:1193px; height:300px; position:absolute;top:-80px;left:-20px; overflow:hidden;"> </div> <p style="width:1px; height:200px;">.</p>
这个的意思是由于你用了绝对位置也就等于你box已经飘起来了不会占据简介的box位置所以你的box不能完全展现出来所以就用这个来撑开主体
在这里特别提醒你的标签里面的某属性的代码过长会让你代码被B站过滤的然后你就失去了height高度了
在提供一个要用背景图的另一的写法
<div style="width:1193px; height:300px; position:absolute;top:-80px;left:-20px; overflow:hidden;"> <div style="width:1193px; height:300px; background:url(你的图片链接);"> </div> </div> <p style="width:1px; height:200px;">.</p>
这样简单的写就不会造成第一行代码过长了
教程到这里结束感谢各位大佬的支持
