一亩三分地 - 网站设计http://www.dlong.net.cn/网站运营_网站设计_网站开发 - RainbowSoft Studio Z-Blog 1.8 Walle Build 91204zh-CNCopyright © Dlong Thu, 09 Sep 2010 16:45:45 +0800css 经典笔记a@b.com (dlong)http://www.dlong.net.cn/post/148.htmlFri, 25 Dec 2009 22:30:41 +0800http://www.dlong.net.cn/post/148.html1、自动换行

word-break:break-all 截断换行 （OPERA FIREFOX 浏览器不支持，且无法通过w3c认证）

word-wrap:break-word;  完整换行

white-space:normal; 自动换行 （所有浏览器通用，单词间的空格不能用 来代替，不然不能正确换行。）

2、display:inline； 强制转换为内联元素

display:block；强制转换为块级元素

块级元素：div,ul,h1

内联元素：span，a

3、float 浮动，用在块级元素上，内联元素无效；

4、clear:both; 清除前面浮动 float 的影响；

5、margin:0px auto; 外边距 上下0 左右自动，也就是是元素居中；

6、background:repeat-x; 用在背景图片上，横向平铺；

background:no-repeat;不平铺独立显示，例如：background: url(bg.png) no-repeat -300px -91px;

 

 

 

]]>网站设计http://www.dlong.net.cn/post/148.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=148http://www.dlong.net.cn/cmd.asp?act=tb&id=148&key=c23b82efcss显示属性(display)block和inline的区别a@b.com (dlong)http://www.dlong.net.cn/post/147.htmlFri, 25 Dec 2009 22:27:30 +0800http://www.dlong.net.cn/post/147.htmlcss display inline block                                           

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P。"form"这个块元素比较特殊，它只能用来容纳其他块元素。

　　如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的

css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。

　　你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.

　　内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。

　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上

display:block这样的属性，让他也有每次都从新行开始的属性。

　　可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。


块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

注释：关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎

么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

如果你还没有明白区别的话，请运行以下范例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>block--inline</title>
</head>
<body>
<!--注意换行的问题-->
<div style="background-color:red">hello</div>
<span style="background-color:red">hello</span>
<h2>使用css来控制</h2>
<!--换行的改变-->
<div style="background-color:red; display:inline">hello</div>
<span style="background-color:red; display:block">hello</span>
</body>
</html>

]]>网站设计http://www.dlong.net.cn/post/147.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=147http://www.dlong.net.cn/cmd.asp?act=tb&id=147&key=c2f9a2d7使li标记列表水平显示。a@b.com (dlong)http://www.dlong.net.cn/post/95.htmlFri, 27 Mar 2009 14:19:57 +0800http://www.dlong.net.cn/post/95.html通过将<li>标记中的display属性改为inline的方法可以使列表水平显示。

]]>网站设计http://www.dlong.net.cn/post/95.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=95http://www.dlong.net.cn/cmd.asp?act=tb&id=95&key=cd83337eDIV+Css 笔记（一）a@b.com (dlong)http://www.dlong.net.cn/post/DIV-CSS.htmlFri, 13 Mar 2009 16:11:27 +0800http://www.dlong.net.cn/post/DIV-CSS.htmlhtml页及css文件 注意注释尽量少用 一定要用的话最好用英文 中文注释多了页面表现会出错 （禁忌）

少用padding 最好不用 浏览器兼容问题

]]>网站设计http://www.dlong.net.cn/post/DIV-CSS.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=92http://www.dlong.net.cn/cmd.asp?act=tb&id=92&key=281959eb99个Web2.0设计相关网站介绍a@b.com (dlong)http://www.dlong.net.cn/post/Web2.0-99.htmlWed, 10 Dec 2008 12:00:07 +0800http://www.dlong.net.cn/post/Web2.0-99.html风格的徽章制作
Web 2.0 Badges
一套可以自己选择风格的网站免费下载
Fresh Badge
快速生成自己的徽章
adClustr
光芒四射的徽章
Deziner Folio
集合不同的类型的肩章。
BittBox
免费矢量肩章
Official Seal Generator
官方印章制作。
Photoshop Tutorial
一种快速制作自己的徽章，Photoshop教程
Glossy Photoshop Tutorial
创建一个漂亮的徽章教程
风格的按钮制作
My Cool Button
将帮助您快速创建按钮
Adam Kalsey’s Button Maker
按钮制造商-简单的工具，让您自己设计的按钮
Button Maker from Blog Flux
创建自己的自定义按钮
Brilliant Button Maker
按钮制造
CSS Buttons

CSS的按钮
Buttonator
付费创建按钮
RSS Button Maker
RSS按钮制造
Button Boost
-一点点不同，比其他一些按钮
ButtonGenerator.com
-创建导航菜单按钮
Crystal Button
水晶按钮
Chicklet Creator
-文章订阅按钮制作
风格的圆角制作
圆角是在Web 2.0设计上体现最广的一种特效。这里有一些工具和脚本，这将帮助您迅速创建自己的圆角。
RoundedCornr
Corner Shop
Spiffy Box
Canvas Corner
Spanky Corners
Sliding Doors Text Box

Smart Rounded Corners
Rounded Corners in CSS
News List
风格的LOGO
这些工具将创建一个简单的Web 2.0风格的标志
Web 2.0 Logo Creator
Web 2.0 Logo Creatr
Web 2.0 Logo Creator
Web 2.0 Stylr
风格的图标
一个Web 2.0网站不能忽视图标。这里有一些收藏品图标
UtomBox
一个超多收集W eb2 .0的图标的站点
Feed Icons
标准的R SS图标
Map Icon Factory
创建自己的地图图标
Perishable Press
收集的R SS图标
Glass Style RSS Icons
玻璃风格的RSS图标
Snap2Objects
R SS图标
渐变效果图像
另一个常见的元素， Web 2.0是渐变效果图像。这里有一些工具来帮助您
Gradient Image Maker
Gradient Generator
Online Gradient Image Maker (OGIM)

泡沫对话框
效果见图：
Will Mayo
Bubblesnaps
CSS Play
XHTML Speech Bubbles
WigFlip
Fluid CSS Speech Bubbles
MySpace Speech Bubble Generator
Photoshop Tutorial
背景图片制作：
Background Image Maker
- 创建背景图根据你选择透明度和渐变效果
Stripe Generator 2.0
如果您正在寻找条纹背景元素在你的网页上，您可以使用这个工具
Stripe Designer
-轻松地创建条纹图像
Tartan Maker
创建一个布纹背景图像
Texture Generator
创建纹理图像
All Free Backgrounds
选择您想要的背景-全部免费

web2.0调色板
The Colors of Web 2.0
您是否正在寻找相匹配的颜色到W eb2 .0网站？ 那么快看看它吧
Web 2.0 Color Pallete
流行的W eb2 .o颜色
Color Schemer Gallery
COLOURlovers
更多的样本的颜色组合
Website Color Picker
测试的颜色组合效果
Like Your Colors 获取由某个特定网站的颜色
导航菜单
CSS Menu Generator
创建有吸引力的
CSS菜单
Listamatic
收集的
CSS菜单
List-O-Matic
创建自己的
CSS菜单
List-U-Like
-另一种工具来建立自己的导航栏
Tabs Generator
- 创建标签式导航栏
Flash Buttons
-建导航菜单与Flash按钮
CSS Play
收集的的
CSS菜单
Exploding Boy
标签式的
cSS导航菜单
CSS Navigation Menu Generator
帮助您建立自己的菜单
网站图标
Favicon Generator
创建自己网站图标
Favicon from Pics
-创建一个图标从一张图片
Favicon Editor
- 上传照片图片，创建一个图标
Favicon.cc
-
Photoshop Tutorial
- Photoshop的教程-创建一个图标用Photoshop
图表制作
PHP/SWF Charts

amCharts
[/b]
[b]其他相关类型
Shrink Pictures
-收缩图片
ScaleNine
- 收集皮肤和主题
VectorMagic
- 转换位图为矢量图
Templatr
- 创建一个模板
PsycHo
-博客模板发生器
BlogPoll
- 建立一个免费的调查，为您的博客
Thumbnail Generator
创建缩略图
Drop Shadow
- 倒影制作
CSS Sprite Generator
-
Vecteezy
矢量图
Brusheezy
Photoshop的画笔
PSBrushes.net
Photoshop笔刷
deviantART
Web 2.0 Generator
Typetester
-
Reflection.js
-
RSSxl
Meta Tag Generator
URL Rewrite
htacces generator
Avatar Maker
转载自：
精华之家

]]>网站设计http://www.dlong.net.cn/post/Web2.0-99.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=71http://www.dlong.net.cn/cmd.asp?act=tb&id=71&key=243a047bHTML 5 标准a@b.com (dlong)http://www.dlong.net.cn/post/HTML5.htmlSat, 06 Dec 2008 12:07:59 +0800http://www.dlong.net.cn/post/HTML5.htmlhttp://www.w3school.com.cn/html5/html5_nav.asp

]]>网站设计http://www.dlong.net.cn/post/HTML5.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=68http://www.dlong.net.cn/cmd.asp?act=tb&id=68&key=b5a37cc6体验HTML5新标签Canvasa@b.com (dlong)http://www.dlong.net.cn/post/HTML5-Canvas.htmlSat, 06 Dec 2008 12:04:34 +0800http://www.dlong.net.cn/post/HTML5-Canvas.html    HTML5草案里公布了很多激动人心的特性，比如已经在Firefox和Safari中支持的Canvas标签，Firefox3.1beta中支持的ogg直接由浏览器播放（不需要插件）。昨天偶然看到一个在线作画的网站，很神奇，FireBug看了一下，发现是一个以前没有见过的Canvas标签。立即上MDC(Mozilla Developer Center)查了一下，搜出来不少内容，做个笔记吧。
    Canvas的原意是帆布、画布的意思，这个标签在网页里就是一块可以自由创作的画布。可以使用JavaScript脚本操作Canvas，在上面绘图2d图形、3d图形（尚未支持）、图片处理等等，有点类似于GDI+这样的东西。
    要正确的的网页上添加一个有用的Canvas标签，首先是在html里面创建它：

            <canvas id="test" width="300" height="300">this is a canvas test</canvas>

    结束标签</canvas>是必须的，但是canvas里的文字不是必须的，这个是在canvas不被浏览器（比如IE）支持的时候显示的fallback文本（也可以使任意其他的html代码）。接下来的操作就是用JavaScript代码来画画了。

            function draw()
            {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (10, 10, 55, 50);

                ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                ctx.fillRect (30, 30, 55, 50);
            }

    第一步是从DOM里面得到canvas标签的引用，然后用getContext取得画布（我觉得好像类似GDI+里面的Graphics对象）。然后就是使用各种内置的方法进行绘制了，具体的方法可以去MDC上查看。还可以看看这篇Canvas的Toturial。上面的代码就来自这个教程，代码输出的图像是这样的：

 


    rgba颜色是支持透明的哦，很棒！

]]>网站设计http://www.dlong.net.cn/post/HTML5-Canvas.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=67http://www.dlong.net.cn/cmd.asp?act=tb&id=67&key=458c844adiv+css 制作符合W3C标准得兼容各种浏览器页面注意事项a@b.com (dlong)http://www.dlong.net.cn/post/div-css-W3C.htmlTue, 19 Aug 2008 17:26:31 +0800http://www.dlong.net.cn/post/div-css-W3C.html定位尽量不用padding(这个属性是要溢出的) 要用margin

]]>网站设计http://www.dlong.net.cn/post/div-css-W3C.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=51http://www.dlong.net.cn/cmd.asp?act=tb&id=51&key=1f035bc6【原创】gif动画秘籍个人经验！a@b.com (dlong)http://www.dlong.net.cn/post/gif.htmlMon, 17 Mar 2008 16:15:42 +0800http://www.dlong.net.cn/post/gif.html网页实际应用中总会遇到要制作gif动画文件！

flash以其强大的动画制作功能另网站美工爱不释手，输出swf格式的动画文件被广泛应用到网站中！

但有时需要输出gif动画，问题就来了！

falsh输出gif动画无论怎样设置，都会出现图像严重失真的现象！（没法用啊！）

所以不得不借助于其他专业gif动画制作软件！

但这些软件的动画制作功能和flash比起来差得可怜！

今天试着研究一下

方法如下

用falsh制作动画后选择输出为序列文件（也就是以帧的形式输出静态图片，可选择 bmp序列，JPEG序列，png序列）

这样就可以在其他gif动画制作软件中导入后直接输出高质量的gif动画啦！

]]>网站设计http://www.dlong.net.cn/post/gif.html#commenthttp://www.dlong.net.cn/http://www.dlong.net.cn/feed.asp?cmt=20http://www.dlong.net.cn/cmd.asp?act=tb&id=20&key=e6a7b06d