现代 CSS

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

用JQ控制Drupal7 中block内容显示与隐藏

今天在drupal建站游逛时,发现其左边栏的JQ效果特吸引人,就拿其中的一个用户登录的block来说吧。一开始进入的时候如下图所示:

当你在标题处点击时就会把block中的内容隐藏起来,就成了下面这个样子:

在次点击时又会回到图一的效果。如想真实体会一下,你可以登录Drupal建站看看实际效果。看完初步效果后,我们在本地的drupal中来开始制作这样的效果。

如何覆写node中的submitted

        弄过drupal的,对blog中的submitted都不会太陌生吧,Submitted by admin on Tue, 04/12/2011 – 11:54这是其默认的一种风格,今天我们只要来看如何在drupal7中改写这种风格。

        首先我们来看看在drupal6中的实现方法:

        1、在相应的主题下,加上下面的代码

function yourthemename_node_submitted($node) {
  return t('Posted by !username on @datetime', array(
    '!username' => theme('username', $node),
    '@datetime' => format_date($node->created, 'custom', 'd M Y')
  ));
}

      

       2、然后在node.tpl.php文件中加入

Drupal主题的基础样式—reset、base、layout、print

        从事Drupal工作有一年多了,每每一个新项目开始时,都不免一些重复的样式工作设置,这次特意花了点时间总结了一下,贴出来与大家一起分享。当然这里虽然说是在Drupal中应用,我们也可以应用在不是Drupal的项目中。今天我们主要从以下几个方面来讲述,第一是重置样式reset.css;第二是基本样式base.css;第三是网格布局样式layout.css;最后是打印样式print.css。这里需要注意的一点是,在Drupal中的一般项目中很少应用grid布局,这里特意把这一块放进来是为了方便其它项目的布局设置。

我们费话少说,现在就请大家跟我一起进入今天的主题吧

一、重置样式:reset.css

Drupal7基础教程--用户(三)

        前面在Drupal7基础教程─用户,第一,第二篇我们介绍了如何在Drupal注册用户,管理员管理用户,设置用户权限等,今天我们在花一节时间主要来介绍一下用户头像设置。

用户头像

        在我们Configuration > Aaccount settings(admin/config/people/accounts)中有一个用户的个性化设置(Personalization),在这里我们可以设置用户相关资料,比哪签名,用户头像等:

         现在我们先来讲一下上图的几个关键部位的设置

         1、首先需要开启上传用户头像的功能,也就是说在Personalization区域中的enable user pictures选项前的复选框打上√,这样我们就开启了上传用户头像的功能:

Drupal7基础教程--用户(二)

       前面我们在Drupal7基础教程--用户(一)中主要介绍了用户的注册、管理员如何增加、删除用户等内容,今天我们接着介绍第二部分:用户角色和用户权限。我们现在就开始进入正题吧。

用户角色(User Roles):

       用户角色是用来控制你的drupal网站中的用户,哪些是可以帮你建设网站,哪些是只能浏览网站,并确定哪些内容给哪些用户浏览等功能。

       用户角色控制是在用户角色设置页面完成的,具体位置就是:点击管理菜单中的people,选择Permissions中的roles(admin/people/permissions/roles)如下图所示:

Drupal7基础教程--用户(一)

用户注册(User Registration)

Drupal提供了几种注册用户的方法:

1、管理员的邀请

2、访客的注册,但需要管理员的审批

3、任何访客

访客可注册你的网站的会员,可以点击首页的"User Login”block中的"Create new account”,如下图所示:

input 按钮在IE下兼容问题

这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结。所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下。

Drupal7 的菜单管理栏

Drupal7的菜单管理栏(The administration menu bar ),此工具将带你到网站所有设置区域,如下图所示:

此菜单主要包括以下几个选项:

页面

返回顶部