B站高级简介适应方法

所需语言:HTML/CSS
编写难度:★★★☆☆
注意事项:不允许包含<style><script>标签,所以无法实现动画效果

①1193x300px
1.可以将主内容使用<div></div>包含,再给其赋值“width: 1193px;height px;overflow: hidden;”使整体的长宽确定大小,并规定超出部分隐藏。
2.此时可以发现显示结果并没有达到理想效果,我们需要再给其增加属性“position: absolute;”将其设置为固定位置状态,最后定位“top: -60px;left: -20px;”。
3.完成前两步后,我们还是不能达到想要效果,原因是简介区域的大小并没有到实际所需的宽度,而整个代码是漂浮状态,不能将简介区域扩展开。此时我们可以在代码的最后加一段<p style="width: 100%;height: 220px;visibility: collapse;"></p>使整个代码区域达到最大化。
4.这时再测试代码,已经达到想要效果。

②1153x220px
1.这个大小很容易实现,实际上就是简介处的最大长宽度,如果再大,那么就会出现滚动条。
2.只需要在最外面用<div style="width: 1153px;height: 220px;overflow: hidden;"></div>包裹代码,就可以实现超出部分隐藏,从而达到不显示滚动条。

posted on 2017-02-13 21:30  Jieck  阅读(1330)  评论(0编辑  收藏  举报

导航