1. 如何在任何页面,返回主页呢

很多网站都用点击左上角的名字来返回主页,并且左侧菜单有隐藏和出现的按钮设置。毕竟总这么显着也有点挡害。

增加按钮,打开welcome.html:在菜单的html代码块下 新增一个button按钮,文案为“隐藏”

接口测试平台-8:菜单页面升级

刷新页面,看不到按钮,被菜单挡住了,给button增加css属性,css属性都可以放在标签内的style属性中,用;隔开

<button style="margin-left: 220px">隐藏</button>

左边距:217px,差不多就是菜单的宽度,因为菜单的宽度是写死的。

 

2. 美化

背景色。要和菜单这个深蓝差不多,采用吸管可以直接吸取到屏幕上的任何颜色,然后点击chose确定。

新增的很多属性,大家有兴趣可以自己改一改看一看。字体颜色,圆角度。

<button style="margin-left: 217px; background-color: #353C48; color: white; border-radius: 0px 50px 50px 0px;">隐藏</button>

看看效果:

接口测试平台-8:菜单页面升级

 

3. 增加点击事件:

接口测试平台-8:菜单页面升级

id="menu_btn" οnclick="display_menu()"
<script>
    function display_menu() {
        menu = document.getElementById("navbar");
        menu.style.display = 'none';
        btn = document.getElementById("menu_btn");
        btn.style.marginLeft = '0px';
        btn.innerText = '显示';
    }
</script>

解析:当点击menu_btn,定位navbar,隐藏菜单,定位menu_btn,移动按钮至最左侧,并将文案修改为显示

 

接口测试平台-8:菜单页面升级

解析:当点击menu_btn

如果文案是隐藏,隐藏菜单,移动按钮至最左侧,并将文案修改为显示

如果文案是显示,隐藏菜单,移动按钮至217px(菜单的宽度),并将文案修改为隐藏

 

4. 增加主页按钮,悬浮在右上角

<button style="float: right; height: 35px; width: 100px; background-color: #353C48; color: white; border-radius: 0px 0px 0px 10px; font-size: large">主页</button>

看看效果:(font-size是文案大小,有多个值)

接口测试平台-8:菜单页面升级

 

5. 添加一个标志图案 来给人直接回主页的感觉:????

  • 加入i标签,来添加图标。
  • 网上复制一个文案图标粘贴进来,颜色啥的随意:http://www.fhdq.net/

接口测试平台-8:菜单页面升级

看看效果:

接口测试平台-8:菜单页面升级

 

将button用a标签包围,加上a标签 超链接,/home/,即可点击跳转home

 

今天所做的俩个按钮,都在welcome.html中。所以这俩个按钮会显示在任何子页面上,一劳永逸。

 

相关文章: