DEDECMS的JS+CSS导航条下拉菜单(完美解决)

使用DEDECMS做网站的时候,有时候需要制作下拉菜单。dede5.5有下拉菜单,比较不错,有需要的可以直接到5.5的模板里面去借鉴。这里我分享一下个人的DEDECMS制作js+css下拉菜单的经验,此菜单兼容5.5到5.7版本的dedeCMS。

DEDECMS导航下拉菜单的调用DEDECMS下拉菜单实际上就是顶级栏目和每个栏目的子栏目的一个循环调用,我使用了以下代码,实现了这种调用。

<ul id="mainnav">
<li class="home"><a href="/">主页</a></li>
{dede:channelartlist typeid='top'}
<li>{dede:type}<a href="[field:typeurl/]">[field:typename/]</a>{/dede:type}
<ul>
{dede:channel type='son'}
<li><a href="[field:typeurl/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>

这种调用方法无法实现当前页 Continue reading "DEDECMS的JS+CSS导航条下拉菜单(完美解决)"

Apple官方网站因DNS加载CSS/JS等文件无法打开正常显示的解决办法

为什么我访问访问苹果官方(http://www.apple.com/cn/itunes/download/)下载itunes,总是卡在左边这个“下载 iTunes”这里无法打开加载完全?

【问题解决分析】

左边这个“下载 iTunes”的DIV无法打开CSS文件,就无法正常显示提交“选择版本”的按钮,也就不会获取到下载地址了

经过分析,“下载 iTunes”的真实地址是:https://swdlp.apple.com/iframes/82/zh_cn/82_zh_cn.html

查看这个页面的源代码,然后搜索 exe 就能获取到真实最终文件下载地址了。

注:如果你只想下载一下itunes,这里就可以解决问题了

【进一步的分析】

通过对82_zh_cn.html这个页面源代码的分析,发现源代码 Continue reading "Apple官方网站因DNS加载CSS/JS等文件无法打开正常显示的解决办法"

Jquery实现“返回浏览器顶部”特效代码

Jquery实现非常实用的置顶特效使用简单,步骤如下:

1、引用插件js和css文件
2、设置默认参数(showHeight :设置滚动高度时显示、speed :返回顶部的速度以毫秒为单位)

JavaScript代码:

$(function() {
$.fn.manhuatoTop = function(options) {
var defaults = {
showHeight : 150,
speed : 1000 Continue reading "Jquery实现“返回浏览器顶部”特效代码"

CSS+JavaScript实现图片轮播的插件:AnythingSlider

新版的AnythingSlider是在汇集所有那些以前滑块的功能和增加新的功能的尝试。换句话说,建立一个真正是广泛的用途的“全功能”滑块。

AnythingSlider(含CSS、JS等文件)下 Continue reading "CSS+JavaScript实现图片轮播的插件:AnythingSlider"

利用CSS控制文本的显示方向

无意之间发现可以通过一段代码把 abcdefg 显示成 gfedcba ,也就是将文字的方向倒过来。

效果如图:

CSS属性:unicode-bidi 设置文本的方向。

尽管 CSS 试图处理书写方向,但 Unicode 有一种更健壮的方式来处理方向性。利用属性 unicode-bidi,CSS 创作 Continue reading "利用CSS控制文本的显示方向"

CSS定义HR和DIV成一条水平虚线

线条的CSS的两个样式:
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
水平线条,我们可以用hr来实现,也可以定义一个div,将它的高度设为1px或其它你想要的高度。

1、CSS定义一条水平虚线hr的方 Continue reading "CSS定义HR和DIV成一条水平虚线"

免费DIV+CSS视频教程下载

DIV+CSS当今WEB开发流行前台页面布局方式。 完整的代码演示,细致的讲解,高胖胖老师带你迅速掌握DIV+CSS应用技巧。

DIV+CSS视频教程(一)下载地址:
http://www.phpchina.com/download/vido/div.css1/div.css1.rar
DIV+CSS视频教程(二)下载地址:
http://www.phpchina.com/download/vido/div.css2/div.css2.rar
DIV+CSS视频教程(三)下载地址:
http://www.phpchina.com/download/vido/div.css3/div.css3.rar
DIV+CSS视频教程(四)下载地址:
http://www.phpchina.com/download/vido/div.css4/div.css4.rar
DIV+CSS视频教程(五)下载地址:
http://www.phpchina.com/download/vido/div.css5/div.css5.rar

注意:视频资料来源于http://www.phpchina.com,只供大家学习交流之用,请勿用于商业用途!

在线观看DIV+CSS视频教程地址:

1、CSS基本概念
CSS初探 - CSS基本知识 - 第1课http://learning.artech.cn/uploads/2007/05/30/20070530.html

CSS基本语法与核心概念 - CSS基本知识 - 第2课http://learning.artech.cn/uploads/2007/05/31/20070531.html

设置丰富的文字效果 - CSS基本知识 - 第3课http://learning.artech.cn/uploads/2007/06/01/20070601.html

2、CSS/DIV布局专题讲解

设置图片效果 - CSS/DIV专题讲解 - 第1课http://learning.artech.cn/uploads/2007/06/04/20070604.html

设置网页背景 - CSS/DIV布局专题讲解 - 第2课http://learning.artech.cn/uploads/2007/06/05/20070605.html

设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课http://learning.artech.cn/uploads/2007/06/06/20070606.html

设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课http://learning.artech.cn/uploads/2007/06/07/20070607.html

用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 http://learning.artech.cn/uploads/2007/06/08/20070608.html

CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课http://learning.artech.cn/uploads/2007/06/11/20070611.html

理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课http://learning.artech.cn/uploads/2007/06/12/20070612.html

CSS排版 - CSS/DIV布局专题讲解 - 第8课http://learning.artech.cn/uploads/2007/06/13/20070613.html

网页变幻 - CSS/DIV布局专题讲解 - 第9课http://learning.artech.cn/uploads/2007/06/14/20070614.html

3、CSS与其他技术

CSS与javascript的综合应用 - CSS与其他技术 - 第1课http://learning.artech.cn/uploads/2007/06/15/20070615.html

CSS与XML的综合运用 - CSS与其他技术 - 第2课http://learning.artech.cn/uploads/2007/06/18/20070618.html

CSS与AJAX的综合应用 - CSS与其他技术 - 第3课http://learning.artech.cn/uploads/2007/06/19/20070619.html

4、CSS/DIV综合实践

博客设计DIY - CSS/DIV综合实践 - 第1课 http://learning.artech.cn/uploads/2007/06/20/20070620.html

小型工作室 - CSS/DIV综合实践 - 第2课 http://learning.artech.cn/uploads/2007/06/21/20070621.html

公司网站 - CSS/DIV综合实践 - 第3课http://learning.artech.cn/uploads/2007/06/22/20070622.html

SEO优化中的div&css命名规则

SEO(搜索引擎优化)对代码的优化是一个很关键的步骤。为了更加符合SEO的规范,下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下:

页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.CSS ID 的命名
外 套:  wrap
主导航:  mainNav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainNav(globalNav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsideBar
右导航:  rightsideBar
旗 志:  logo
标 语:  banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadCrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写:
内容区

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

CSS定义某一DIV的链接字体颜色和大小

默认网页的连接文本是蓝色的,已访问的连接是紫色的。如果使用CSS的话就可以改变这些默认的定义,首先我们要知道这些代码如何的定义

a: link 用在为访问的连接上。
a :visited 用在已经访问过的连接上。
a :hover 用于鼠标光标置于其上的连接。
a :active 用于获得焦点(比如,被点击)的连接上。

如果给特定的DIV设定与其他DIV不一样的链接样式,就必须单独的定义

如:

.tab {
padding-left: 16px;
font-size: 16px;
font-weight: bold;
}
.tab a{
color: #000;
}
.tab active{
color:#000
}

或者是:

#news{font-size:14px; color:#CC3300; margin-left:20px; line-height:22px;}
#news a{font-size:14px; color:#CC3300; text-decoration:none; line-height:22px;}
#news a:hover{color:#000000; font-size:14px;}
#news a:visited{ color:#999999;}
#news a:active{font-size:20px;color:#333333;text-decoration:underline;}