页面顶部简介

桃扇骨 2022-01-21 08:35 185阅读 0赞

页面顶部简介

作者：吱韩菌  
开发工具：Visual Studio 2015  
撰写时间：2019-6-9

在很多页面当中都会出现顶部简介，而它的作用仅仅给用户做一些简单的提示，下面我们来简单的介绍一下。  
![在这里插入图片描述][20190609114212730.png]  
整个HTML布局用的是bootstrap4，使用container-fuid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）,在包裹的div中添加container和row，它的作用可以是页面两边宽度减少10%左右，这样可以使整个页面更加美观。Col类的使用必须要在有row类的盒子中，否则没有效果，row类的栅格可以分为十二份，下面HTML代码部分中，p标签中放置文字所使用的是col-11，理解为占11个栅格，而button标签用的是col-  
1，也就是占1个栅格。

P标签的作用是将字体整齐的排成一排，button就是一个普通按钮，鼠标移入是没有任何效果的，如果想要鼠标移入后有手掌效果，可以给它的css样式中添加cursor: pointer; 它可以是鼠标移入指定区域内时出现手掌效果，也可以在button中添加a标签，但a标签会产生下划线，还需要给它设置text-decoration: none;作用是清除a标签带来的下滑线。 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190609114346893.png) 最后就是js部分，也就两句代码的事儿。首先要给按钮绑定点击事件，在button按钮中随便给一个ID（这里我给的id是“ok”）,$(“\#ok”).click(function( )\{ \})获取到这个ID，用aliert（）测试是否获取成功，点击“同意”按钮，看是否有提示框出现，获取成功后，还需要做的是点击同意按钮后收起简介栏，这里我给它一个hide隐藏效果，点击“同意”后隐藏简介栏，要在包裹简介栏的最外层盒子中添加ID(“oking”) ，$(“\#oking”).hide();点击事件触发时就执行这段隐藏效果。 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190609114358938.png) !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190609114404802.png)

[20190609114212730.png]: /images/20220121/cebbd78736bb4643a408ff429deac8c4.png