存档

‘页面设计’ 分类的存档

超炫的button按钮样式-赶上flash喽

2010年8月24日

超炫的button按钮效果,先看看效果吧
第一个效果是没有jquery的效果,只用了css
第二个是用jquery让北京图片从上往下出来的效果,图片做了特殊效果,很炫吧,高尚flash效果了。
第三个是背景图片左右移动的效果。
第四第五个是图片上下移动渐显渐隐效果。 阅读全文…

前端脚本, 页面设计 , , ,

等比例缩小图片方法总结

2010年2月21日

方法一:Max-width|Max-height
这是最简单的方法了,给图片一个最大的宽度和高度:

#Imgbox img {
max-width: 500px;
max-height: 300px;
border:0;
}

但它的效果并不怎么好,因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。

方法二:Max-width/height+Expression
先来了解下什么是CSS expression:

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里 的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于 Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

阅读全文…

页面设计 ,

网页设计师必用的11个SEO技巧

2010年2月10日

现在的网页设计师不仅设计网页的外观和风格。他们也常常负责主要前端代码的编写。换句话说,SEO(搜索引擎优化)的相当一部分责任落在设计师的肩上。然而大量网页设计师对这个领域的熟悉程度仍不足以让他们写出一个对搜索引擎充分优化的网页。

本文旨在为普通,甚至部分高级网页设计师提高SEO技巧提供一些重要的窍门。

1. 让代码比设计更美

搭建网页前端的时候,使用有语义的代码。用描述性的标签组织页面结构,可以提高内容对搜索引擎的可读性。这也会让修饰页面的工作变得更简单干净。

2. 使用关键字,但要把握分寸

关键字是指描述主要内容的词语。有策略地在页面中安放关键字是很重要的,例如在URL、标题标签(title tag)以及主要的抬头标签(heading tag)中。在正文中经常使用关键字也很重要,但是不能过度,否则你的文章可能因关键字堆砌遭到惩罚。

3. 避免使用Flash作导航栏

无论华丽的下拉列表效果如何诱人,不要使用它。搜索引擎不能顺利读取Flash文件中的内容,所以Flash导航栏中的链接将无法被跟踪。

4. 使用不同的页面标题

你的网站的每个页面都应该有标题属性,而每个页面的标题应该各不相同。如果每个页面的标题都一样的话,搜索引擎会理解为你的网站的每个页面都是相同的主题。

阅读全文…

搜索引擎, 页面设计

7种CSS圆角框解决方案

2010年1月5日

本文探讨的是前端设计种最常用的页面圆角框效果的7种不同方法实现解决方案,其核心关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都是收集目前网络上最流行的做法。纵观种种方法,各有其优势,请针对不同的环境分别使用。

圆角框,因为其样式比直角框漂亮,所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计,成为一道亮丽的风景线。

然而,就是这个圆角,却成为了网页前端人员心中永远抹之不去的阴影,对它,可以说是又痛又爱。爱的是它的漂亮,痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。

阅读全文…

页面设计 ,

22个不错的CSS技术

2009年12月29日

我们可以CSS 干很多很多相当不错的事情,你应该知道如何做这些事情。下面列出了一些你必需要知道的用CSS技术,点击链接,你可以看到相关教程。这个技术相当值得你去学习。

1. CSS 地图

image-maps

阅读全文…

页面设计 , ,

13个不错的Javascript和CSS的菜单

2009年12月29日

30种时尚的CSS网站导航条

2009年12月29日

我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计。这些导航条基本上来说都是用CSS来做的。这里,我们将向你介绍几种最不错的用CSS设计的网站导航条。希望你会喜欢。

1. The Menu menu

The Menu menu

这是一个非常不错的CSS菜单,相当的独特,每个图标都有鼠标感应,然后出现子菜单。如果你想知道怎么做的,你可以简单的看一下这个网页的源码。

阅读全文…

页面设计 ,

使用CSS为图片添加边框的五种方法

2009年12月27日

阴影效果

通过使用带有一些padding之的背景图来添加阴影效果。

效果预览

HTML

<img class=”shadow” src=”sample.jpg” alt=”” />

CSS

img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

阅读全文…

页面设计 , ,