目前分類:Web Course (46)

瀏覽方式: 標題列表 簡短摘要
来源:NETWORK
 

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:network

在设计网站的时候,可能会有一些特效,而下面的40种特效,都是很不错的,既可以增加你的网站的特点,又可以带来一些回头客,下面的一些效果是包容了所有内容的Lightbox效果(比如MilkBox和LightWindow).希望大家可以用到.

lin ian 發表在 痞客邦 留言(0) 人氣()

honto提醒,这个方法已经不适用,因为Firefox3.5已经能解析这段代码。

Google于9月3号推出了浏览器Google Chrome,写前端效果的同志们又有得辛苦了,IE/FF/Opera/Safari/Google Chrome本来不太平的世界更混乱了。

所幸Google Chrome用的是与Safari一样的Webkit引擎,我们可以使用对safari相似的方式作css hack,写法为:

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:network

lin ian 發表在 痞客邦 留言(0) 人氣()

来自GOOGLE的图片预加载技术,也就是加载一个图片的时候,为了减轻网页的压力,将图片衰减后先显示出来,然后再慢慢加载,你就会看到一个图片由模糊突然变得清淅起来,这就是预加载的一种。这段代码就完成了图片的预加载功能,你可以点击一个小图然后看到大图慢慢变得清淅,直至加载完成。

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:network

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:百科
 

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:

如何让网页适应不同分辨率

lin ian 發表在 痞客邦 留言(0) 人氣()

CSS 命名规范

XHTML-CSS写作建议

  1. 所有的xhtml代码小写
  2. 属性的值一定要用双引号("")括起来,且一定要有值
  3. 每个标签都要有开始和结束,且要有正确的层次
  4. 空元素要有结束的tag或于开始的tag后加上"/"
  5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  6. <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  7. 给每一个表格和表单加上一个唯一的、结构标记id
  8. 给重要的区块加上注释,如:
  9. 给图片加上alt标签
  10. 所有的标签必须进行合理的嵌套
  11. 根元素前必须有元素,宣告使用那一种DTD
  12. 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace

CSS样式表规范:

  1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release)
  2. CSS样式表各区块用注释说明
  3. 尽量使用英文命名原则
  4. 尽量不加中杠和下划线
  5. 尽量不缩写,除非一看就明白的单词

CSS命名规范:

DIV CSS名称 说明
网站公用相关
Container div #container 容器
Layout
#layout 布局
Header or banner div #head, #header 页头部分
Footer div #foot, #footer 页脚部分
Navigation list #nav 主导航
Sub-navigation list #subNav 二级导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏
Main div #main 页面主体
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Search input #searchInput 搜索输入框
Search output #search_output 搜索输出和搜索结果相似
Search #search 搜索
Search bar #searchBar 搜索条
Search results #search_results 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #logo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Arrow arr/arrow 箭头
Little #little 标题
Website map

lin ian 發表在 痞客邦 留言(0) 人氣()

div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:network

一、网页的Grid(栅格、网格)的定义

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:http://homepage.yesky.com/364/2659364.shtml

三、flyout-竖向三级弹出菜单

lin ian 發表在 痞客邦 留言(0) 人氣()

一、最基本的:二级dropdown弹出菜单
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

lin ian 發表在 痞客邦 留言(0) 人氣()

<SCRIPT>
function CreateFlash(idad, swfurl, wad, had, vs){

lin ian 發表在 痞客邦 留言(0) 人氣()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

lin ian 發表在 痞客邦 留言(0) 人氣()

有时候我们会用半透明png格式的图片做为背景图,来达到一定的设计和视觉效果,但在IE6下是不支持透明png图片的。

可参阅http://www.alistapart.com/articles/pngopacity/

lin ian 發表在 痞客邦 留言(0) 人氣()

容 器:container/box

头 部:header

lin ian 發表在 痞客邦 留言(0) 人氣()

<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www1.xise.cn','免费建站代码大全')" title="免费建站代码大全">收藏本站</span>

lin ian 發表在 痞客邦 留言(0) 人氣()

来源:network
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

lin ian 發表在 痞客邦 留言(0) 人氣()

有两种方法:

lin ian 發表在 痞客邦 留言(0) 人氣()

1 23