学习基地

?找回密码
?加入基地
搜索
热搜: discuz 网站
打印 上一主题 下一主题

[从HTML开始制作DZ模板] 第十四课 导航制作

[复制链接]
跳转到指定楼层
楼主
发表于 2019-4-13 21:21:21 | 只看该作者 回帖奖励 |倒序崖柏造假过程 |阅读模式
学习基地在这节课为大家提供的教程是 导航制作




制作 jquery 导航滑动效果
discuz导航实现JQUERY滑动效果下载链接:https://pan.baidu.com/s/1LYxA8aCdasYlmd01Vgkz9Q 密码:
游客,如果您要查看本帖隐藏内容请回复


第一步,把 jquery.plugins.js 、jquery-1.4.2.min.js 这两个文件复制到我们模板的图片文件 images 里面。

第二步,在 header.htm 模板中引入??jquery.plugins.js 、jquery-1.4.2.min.js 这两个文件。
在 前面加入:



这两段代码。如图:


第三步,在 extend_common.css 样式文件里添加 CSS 样式。
加入这段代码:
#anv{background:#56667F;}
#nav{position:relative;height:75px;width:1000px;padding-left:13px;overflow:hidden;margin:0 auto;}
#nav li{float:left;list-style: none;}
#nav li.back{background: #24ade8;border-bottom: 4px solid #076D97;padding-left:8px;height:71px;overflow:hidden;z-index:8;position:absolute;}
#nav li.back.left{background:url(images/main-bg.png)repeat-x;height:68px;float:right;width:8px}
#nav li a{text-decoration:none;color:#fff;font-size: 22px;z-index:10;display:block;float:left;position:relative;overflow:hidden;padding:7px 33px 0;height:75px;line-height: 75px;}
#nav li a span{cursor:pointer;display:block;}
#qmenu{font-size: 16px;background: #183A49;border-bottom: 4px solid #F1EDEA;line-height: 60px;border-top-right-radius: 0.4em;font-weight: 400;color: #FFF;height: 60px;


然后在 header.htm模板中找到:

? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? {lang my_nav}
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?

    ? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?
    ? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???

  • ? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?
    ? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?

? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???



删除,在
加:


? ?? ?? ?? ?? ?? ?? ?? ?
? ?? ?? ?? ?? ?


这段代码就OK。
如果要改变导航背景颜色 在 extend_common.css 刚才填加的那段里面 #anv{background:#56667F;}??改 #56667F颜色代码。




本节课的视频教程地址链接:https://pan.baidu.com/s/1rIAypi6BAE-Mg1XZ8iXItA 密码:ptbm




学习基地本节课为大家介绍了即将开始的第一章介绍,若有不懂可加学习基地QQ交流群:735979492 一起研究探讨
















本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入基地

x
您需要登录后才可以回帖 登录 | 加入基地

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|手机版|学习基地 ( 赣ICP备17008572号 )

GMT+8, 2019-8-20 16:42 , Processed in 1.106528 second(s), 20 queries .

Powered by Discuz! X3.4 Licensed

? 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表