B站直播简介——今天教大家怎么去掉简介的简介二个字

野生技术 孤独木木 2年前 (2016-04-06) 2377次浏览 已收录 2个评论 扫描二维码

盖住简介二字

B 站直播简介——今天教大家怎么去掉简介的简介二个字
去掉简介的二个字的话实际不是直接去掉了它还在的
原理是这样的在 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>

这样简单的写就不会造成第一行代码过长了
教程到这里结束感谢各位大佬的支持

听下音乐舒缓一下心情

–:– / –:–
隐藏列表
(*+﹏+*)

喜欢 (3)
[15390816981]
分享 (0)

您必须 登录 才能发表评论!

(2)个小伙伴在吐槽
  1. 学习DW的我还是看不懂全部~ :mrgreen:
    s63494812016-08-25 21:57 Windows 7 | Chrome 47.0.2526.108