HTML5+CSS3小实例:全屏导航栏菜单

html-css032

HTML5+CSS3小实例:全屏导航栏菜单,第1张

HTML5+CSS3实现全屏导航栏菜单,悬停在右上角的小图标,点击以圆形扩散的方式绽开全屏导航栏,这种方式的导航栏很吸睛,运用也越来越广,赶紧学起来呀!

效果:

源码:

两侧的是通过页头背景来更换,请参考如下教程http://www.42zy.com/forum.php?mod=viewthread&tid=45

图片的制作可以是,任意宽度,高度等于你的导航加上店招的高,如你的白色店招高为120px,导航高为30px,则,制作一个高为150PX的图片(宽任意)底部30像素填充你的导航颜色即可,望采纳

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。

2、在index.html中的<style>标签中,输入css代码:table{width:85%}。

3、浏览器运行index.html页面,此时通过表格的宽度会随着屏幕的变化而变化,并且固定占用85%。