1. 如何在任何页面,返回主页呢
很多网站都用点击左上角的名字来返回主页,并且左侧菜单有隐藏和出现的按钮设置。毕竟总这么显着也有点挡害。
增加按钮,打开welcome.html:在菜单的html代码块下 新增一个button按钮,文案为“隐藏”
刷新页面,看不到按钮,被菜单挡住了,给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>
看看效果:
3. 增加点击事件:
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,移动按钮至最左侧,并将文案修改为显示
解析:当点击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是文案大小,有多个值)
5. 添加一个标志图案 来给人直接回主页的感觉:????
- 加入i标签,来添加图标。
- 网上复制一个文案图标粘贴进来,颜色啥的随意:http://www.fhdq.net/
看看效果:
将button用a标签包围,加上a标签 超链接,/home/,即可点击跳转home
今天所做的俩个按钮,都在welcome.html中。所以这俩个按钮会显示在任何子页面上,一劳永逸。