网页设计如何设计导航条(导航条设计制作思路)
【一、项目背景】
让更多的人去学习html,以广东科技学院的导航栏为例, 教大家怎么去做一个横向的导航栏。
点击确定之后,会弹出下图。
注:
- ) 和无序列表 (
- ) 中。
2. 写完运行(运行:右下角点击f12运行)看到效果,如下图所示:
3.2 去除li带来的小黑点:
li{ list-style: none; }
4. 基于上述步骤,运行一下 如下图所示:
5. 设置一下导航栏的样式。
1) 设置一下列表ul 的宽度 ,高度,背景颜色,文字位置居中(margin:0 auto)。
Li 同样的设置高度 。
2) 去掉小黑点 ,再设置文字的颜色 ,高度 ,内边距 ,(个人喜好 看着舒服就行)
3) 设置文字的大小,去掉下划线(text-decoration:none;)。
【四、总结】
1. Html能做的效果非常多,希望你耐心的去学习,同时希望碰到问题主动搜索,尝试一下总会有解决方法。
2. 如果需要本文源码,请在公众号后台回复“导航栏”三个字获取。
以上就是爱惜日网»导航条设计制作思路(网页设计如何设计导航条)的相关内容了,更多精彩请关注作者:爱惜日号SEO专员
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 203304862@qq.com
本文链接:https://jinnalai.com/jiaodian/32414.html