目前日期文章:201405 (15)

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

ColorCombos

 配色是Web 設計的首要大事,Color Combos 幫你預備了數千種配色方案,可以根據色調瀏覽選取。

LIpsum

 Lipsum.com Lorem Ipsum Text 縮寫的自創詞,字典中不存在的單詞,是在演示頁面結構的時候,需要加文字的地方使用Lorem Ipsum Text 填充可以避免用戶因關注文字的意思而分神。Lipsum.com 可以幫你生成製定數目的Lorem Ipsum 單詞。

What the font?

 有時候你對某個Logo 感興趣,想知道是圖片的LOGO是什麼字體做的,可以將Logo 圖片上傳到這個網站,結果之準確會讓你難以置信。

ConvertIcon

 Favicon 越來越受歡迎,尤其隨著Firefox 的流行,Firefox 會將你站點的Favicon 標誌顯示在標籤上,也會顯示於書籤,Favicon 支持多種圖形格式,比如png,但IE 並不支持png,該站點可以幫助你將png 等圖片格式的Favicon 轉換成IE 支持的ico 格式。

BgPatterns

 背景線上產生器。現代Web設計的趨勢之一包括使用背景圖案,BgPatterns.com可以幫你設計背景圖案,他們有大量可選的圖案,可以按不同方式接合,還可以設置透明度。

HTML Encoder

 如果你要在網站中顯示Web代碼,那將是非常煩人的事,你必須將諸如<一類的符號用編碼表示,這個網站可以幫你做這些事情,只需將你的代碼複製進去,他們會幫你生成可以直接使用的代碼。還有HTML Decoder  幫你做相反的事。

Xenocode Browsers

 該網站非常有用,可以直接模擬預覽你的網站在IE6 IE7 IE8 Firefox 2 Firefox 3 Google Chrome 以及Opera 中的樣子。唯一的不足是,不支持Mac Linux 環境下的瀏覽器。

Test Everything

測試任何你想得到的東西。

這個網站包含了超過100 中工具幫你測試幾乎所有東西,如跨瀏覽器兼容,查PR 值,甚至幫你驗證代碼。

Sprite Generator

 CSS Sprites在顯著降低HTTP請求方面功不可沒,但CSS sprite可不是個簡單的技術,Sprite generator   可以幫你做這些繁複的工作,將你的圖片打包成zip上傳上去,他們會把你的圖片組合成sprite,還幫你生成CSS代碼。

Buttonator

 線上按鈕產生站,這個網站可以幫你設計漂亮的按鈕。

Load Impact

 網站壓力測試站,讓你測試同時上線人數流量等等。

這個壓力測試站點可以幫你測試你的站點的抗壓能力,如果你的某篇文章曾經上過Digg StumbleUpon 等網站的首頁,你就會知道抗壓測試多麼重要。

IconFinder

 這個網站收藏了大量來自網絡的免費圖標。

TypeTester

 可以幫你測試不同字體的顯示效果。

CSS Tidy

 這個站點可以幫你檢查CSS 代碼,並修正其中的錯誤,比如,它可以發現你的CSS 代碼中最常見到重複設置問題。

Contact Forms Generators

 表單產生站,可以幫助你實現和瀏覽者的互動,無需編程,就能快速生成訪客反饋表單,甚至幫你生成郵件發送PHP ASP Perl 代碼。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

網頁的線框圖是非常直觀、但是也沒什麼技術上難點的東西。只需要你大概描出頁面上需要的一些元素,比如頭部、導航、頁腳等等,最多再就是一些交互、內容區域什麼的。但這對於任何網絡應用的開發都是非常重要的。當然有很多種方法可以做這件事情,最簡單的就是拿起紙和筆,但是在這篇文章中,我們要介紹的是一些非常高效好用的在線原型工具,並且他們完全免費。

Lumzy快速原型工具

使用Lumzy你可以為你的應用創建原型圖,還能添加一些互動事件。有了它,你可以創建彈出框,互動的頁面導航,添加外部鏈接等等。他對於團隊協作設計和交流提供了一個很好的平台,而且他完全免費。

Mockup Builder殺手級的原型工具

MockupBuilder最近才發布,很值得期待。他有非常多的功能:UI模型,交互的線框圖,頁面佈局,客戶端原型甚至站點地圖和頁面與頁面間的畫面轉跳指引。

當然,對於與客戶和團隊成員交流也是非常強大的。並且,他全部免費。

Tiggr協作製作原型圖

Tiggr的邏輯是給你需要做成最終稿的所有資源。你可以設計很多的元素,然後分享,其他的協作用戶會幫你製作相應HTML/CSS代碼,以達到最快生成。花10秒鐘註冊,你就能享用這個免費的東東了。

Frame Box輕量級原型在線製作

FrameBox並沒有多麼特別的特色。你可以拖放、設置大小、複製粘貼這些UI組件,但是他的特色在於你可以非常輕鬆的通過它的拖曳很容易就完成你的原型製作。想要用這個輕量級的免費的工具,也需要註冊。

 

SimpleDiagrams免費版 (Adobe Air App)

simplediagrams是一個非常小巧的Adobe Air軟體,通過他你可以非常輕鬆的實現自己的想法。拖曳模組元素,添加圖片或者便簽,將設計圖輸出程PNG圖都是他的特色,通過添加一些小功能就能實現一個非常不錯的原型圖。

iPhone Mockup iPhone原型框線圖製作

iPhone Mockup裡面你可以使用鉛筆模式,也可以使用圖表模式的編輯器。不管你選擇什麼,功能都是一樣的,都可以很簡單很方便的生成iPhone上的應用原型。你也可以分享給別人,就算你更改了設計,別人通過那個連結也一樣能同步接收更改。

fluidIA

fluidIA是一個在線的但是可以下載的富用戶界面原型設計工具。它基於面向對象的理念,可以讓你快速完善。它設計的基本思想是團隊中的任何成員,無論是設計師還是工程師都可以自由的設計自己的原型。最近fluidIA的更新稍微慢了點,但是它仍是一個非常優秀的線框圖工具。

Pencil Project FireFox插件

Pencil Project是一個原型界面設計的Firefox插件,通過內建的版型,你可以創建可連結的文檔,並輸出成為HTML文件、PNGOpenOffice文檔、Word文檔、PDF。還有什麼可說的呢?這麼優秀的插件,是每個設計師和開發人員必備啊。

CogTool Win MAC下應用程序

CogTool是一個強大原型生成工具,他與別的工具還有一些不同,他可以對你的設計自動根據人類認知模型進行評估。你可以通過一些圖標啊按鈕啊圖片,生成一個描述,然後點擊評估的按鈕,他就會對你的設計進行人類認知模型的評估,他會告訴你一般人需要多久才能理解你的意圖。CogTools有很多用戶引導的文檔,還有很多教程,論壇上的技術支援也能讓你很快的熟悉操作。

Prototype Composer

Prototype Composer可以讓你在真正的代碼編寫之前就看到網站是如何運行的。以前的那些無數的文字入口,複雜的數據結構以及技術含量不低的UML圖,這個工具可以讓你很方便的協作完成一個看起來能運行的程序。
社區版本是免費的,他可以讓你以用戶定義的一個項目做一個範例網站。

DUB – DENIM(跨平台應用程序)

DENIM是一個跨平台的桌面軟體。他自己的介紹是為早期網站設計提供幫助的非正式工具。
他有很多理念來自於紙筆設計原型。你可以快速的畫出草圖,保證重要的功能優先。但是跟紙筆的草圖不同的是,他還可以有互動指令和動畫。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(1) 人氣()

.htaccess 文件(Hypertext Access file) Apache Web服務器的一個非常強大的配置文件,對於這個文件,Apache有一堆參數可以讓你配置出幾乎隨心所欲的功能。.htaccess 配置文件堅持了Unix的一個文化——使用一個ASCII 的純文本文件來配置你的網站的訪問策略。

這篇文章包括了16個非常有用的小技巧。另外,因為.htaccess 是一個相當強大的配置文件,所以,一個輕微的語法錯誤會造成你整個網站的故障,所以,在你修改或是替換原有的文件時,一定要備份舊的文件,以便出現問題的時候可以方便的恢復。

1. 使用.htaccess 創建自定義的出錯頁面。對於Linux Apache來說這是一項極其簡單的事情。使用下面的.htaccess語法你可以輕鬆的完成這一功能。(把.htaccess放在你的網站根目錄下)

ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

2. 設置網站的時區

SetEnv TZ America/Houston

3.阻止IP列表
有些時候,你需要以IP地址的方式阻止一些訪問。無論是對於一個IP地址還是一個網段,這都是一件非常簡單的事情,如下所示:

allow from all
deny from 145.186.14.122
deny from 124.15

Apache對於被拒絕的IP會返回403錯誤。

4. 把一些老的鏈接轉到新的鏈接上——搜索引擎優化SEO

Redirect 301 /d/file.html http://www.htaccesselite.com/r/file.html

5. 為服務器管理員設置電子郵件。

ServerSignature EMail
SetEnv SERVER_ADMIN default@domain.com

6. 使用.htaccess 訪止盜鏈。如果你網站上的一個圖片被別的N多的網站引用了,那麼,這很有可能會導致你服務器的性能下降,使用下面的代碼可以保護某些熱門的鏈接不被過多的引用。

Options +FollowSymlinks
# Protect Hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?domainname.com/ [nc]
RewriteRule .*.(gif|jpg|png) $ http://domainname.com/img/hotlink_f_o.png [nc]

7. 阻止User Agent 的所有請求

## .htaccess Code :: BEGIN
## Block Bad Bots by user-Agent
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [ NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]

Order Allow,Deny
Allow from all
Deny from env=bad_bot

## .htaccess Code :: END

8. 把某些特殊的IP地址的請求重定向到別的站點

ErrorDocument 403 http://www.youdomain.com
Order deny,allow
Deny from all
Allow from ip
Allow from ip

9.直接找開文件而不是下載通常,我們打開網上文件的時候總是會出現一個對話框問我們是下載還是直接打開,使用下面的設置就不會出現這個問題了,直接打開

AddType application/octet-stream .pdf
AddType application/octet-stream .zip
AddType application/octet-stream .mov

10. 修改文件類型下面的示例可以讓任何的文件都成為PHP那麼被服務器解釋。比如:myphp, cgiphtml等。

ForceType application/x-httpd-php
SetHandler application/x-httpd-php

11. 阻止存取.htaccess 文件

# secure htaccess file
order allow,deny
deny from all

12. 保護服務器上的文件被存取

# prevent access of a certain file order allow,deny
deny from all

13. 阻止目錄瀏覽

# disable directory browsing
Options All -Indexes

14. 設置默認主頁

# serve alternate default index page
DirectoryIndex about.html

15. 口令認證你可以創建一個文件用於認證。下面是一個示例:

# to protect a file

AuthType Basic
AuthName “Prompt”
AuthUserFile /home/path/.htpasswd
Require valid-user

# password-protect a directory
resides
AuthType basic
AuthName “This directory is protected”
AuthUserFile /home/path/.htpasswd
AuthGroupFile /dev/null
Require valid-user

16. 把舊的域名轉像新的域名

# redirect from old domain to new domain
RewriteEngine On
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [R=301,L]

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

隨著Web應用越來越廣泛,Web安全威脅日益凸顯。黑客利用網站操作系統的漏洞和Web服務程序的SQL注入漏洞等得到Web服務器的控制權限,輕則篡改網頁內容,重則竊取重要內部數據,更為嚴重的則是在網頁中植入惡意代碼,使得網站訪問者受到侵害。這也使得越來越多的用戶關注應用層的安全問題,對Web應用安全的關注度也逐漸升溫。下面向大家推薦8款非常有用的免費 Web安全測試工具。

 

N-Stalker Free Version

N-Stalker Web 應用程序安全2012免費版本能夠為您的Web 應用程序清除該環境中大量常見的漏洞,包括跨站腳本(XSS)、SQL 注入(SQL injection)、緩存溢出(Buffer Overflow)、參數篡改(Parameter Tampering)等等。

 

 

Netsparker Community Edition

Netsparker Community Edition 是一款SQL 注入掃描工具,是Netsparker的社區免費版本,提供了基本的漏洞檢測功能。使用友好,靈活。

 

 

Websecurify

Websecurify 是一款開源的跨平台網站安全檢查工具,能夠幫助你精確的檢測Web 應用程序安全問題。

 

 

 

 

 

Exploit-Me

Exploit-Me 是一套Firefox 的Web 應用程序安全測試工具,輕量,易於使用。

 

 

OWASP WebScarab Project

WebScarab 一個用來分析使用HTTP和HTTPS協議的應用程序框架,通過記錄它檢測到的會話內容(請求和應答)來幫助安全專家發現潛在的程序漏洞。

 

 

X5s

x5s 是一款Fiddler 插件,用於輔助滲透測試人員發現跨站點腳本(XSS)漏洞。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

IE 選擇器Hack

1
2
3
/* IE 6 and below */
* html .selector {}
.suckyie 6 .selector {} /* .suckyie6 can be any unused class */
1
2
/* IE 7 and below */
.selector, {}
1
2
3
4
/* IE 7 */
*:first-child+html .selector {}
.selector, x:-IE 7 {}
*+html .selector {}
/* Everything but IE 6 */
html > body .selector {}
1
2
3
/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}
1
2
3
4
5
/* Everything but IE 6/7/8 */
:root *> .selector {}
body:last-child .selector {}
body:nth-of-type( 1 ) .selector {}
body:first-of-type .selector {}
IE 屬性/值Hack

1
2
3
/* IE 6 */
.selector { _color : blue ; }
.selector { - color : blue ; }
1
2
3
/* IE 6/7 - acts as an !important */
.selector { color : blue !ie; }
/* string after ! can be anything */
1
2
3
4
5
6
7
/* IE 6/7 - any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { ! color : blue ; }
.selector { $ color : blue ; }
.selector { & color : blue ; }
.selector { * color : blue ; }
/* ... */
1
2
3
/* IE 8/9 */
.selector { color : blue \ 0 /; }
/* must go at the END of all rules */
1
2
/* IE 9/10 */
.selector:nth-of-type( 1 n) { color : blue \ 9 ; }
1
2
3
/* IE 6/7/8/9/10 */
.selector { color : blue \ 9 ; }
.selector { color /*\**/ : blue \ 9 ; }
1
2
/* Everything but IE 6 */
.selector { color /**/ : blue ; }
IE Media Query Hack

1
2
/* IE 6/7 */
@media screen \ 9 {}
1
2
/* IE 8 */
@media \ 0 screen {}
1
2
/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: + 72 dpi) {}
1
2
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ) {}
1
2
/* IE 6/7/8 */
@media \ 0 screen\, screen \ 9 {}
1
2
/* IE 8/9/10 & Opera */
@media screen \ 0 {}
1
2
/* IE 9/10 */
@media screen and ( min-width : 0 \ 0 ) {}
1
2
/* Everything but IE 6/7/8 */
@media screen and ( min-width : 400px ) {}
IE JavaScript Hack

1
2
3
/* IE 6 */
(checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 6]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
1
2
3
4
/* IE 7 */
(checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 7]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
navigator.appVersion.indexOf( "MSIE 7." )!=-1
1
2
/* IE <= 8 */
var isIE = '\v' == 'v' ;
1
2
3
/* IE 8 */
(checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 8]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
1
2
3
/* IE 9 */
(checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 9]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
1
2
/* IE 10 */
var isIE = eval( "/*@cc_on!@*/false" ) && document.documentMode === 10;
1
2
/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;
Firefox 瀏覽器

  選擇器Hack
1
2
/* Firefox 1.5 */
body:empty .selector {}
1
2
/* Firefox 2+ */
.selector, x:-moz-any-link {}
1
2
/* Firefox 3+ */
.selector, x:-moz-any-link; x: default {}
1
2
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}

  媒體查詢Hack
1
2
/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: + 72 dpi) {}
1
2
/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus: 0 ) {}
1
2
/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio: 0 ) {}

  JavaScript Hack
1
2
/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);
1
2
/* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage);
1
2
/* Firefox 2/3 */
var isFF = /a/[-1]== 'a' ;
1
2
/* Firefox 3 */
var isFF = ( function x(){})[-5]== 'x' ;
Chrome 瀏覽器

  選擇器Hack
1
2
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}
  

  媒體查詢Hack
1
2
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
  

  JavaScript Hack
1
2
/* Chrome */
var isChrome = Boolean(window.chrome);
  

Safari 瀏覽器

  選擇器Hack
1
2
3
/* Safari 2/3 */
html[xmlns*= "" ] body:last-child .selector {}
html[xmlns*= "" ]:root .selector {}
1
2
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*= "" ] .selector {}
1
2
/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}
  

  媒體查詢Hack
1
2
/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
  

  JavaScript Hack
1
2
/* Safari */
var isSafari = /a/.__proto__== '//' ;
  

Opera 瀏覽器

  選擇器Hack
1
2
/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*= "" ] .selector {}
1
2
/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}
1
2
/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}
  

  媒體查詢Hack
1
2
/* Opera 7 */
@media all and ( min-width : 0px ){}
1
2
/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio: 10000 ), not all and (-webkit-min-device-pixel-ratio: 0 ) {}
1
2
/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: + 72 dpi) {}
1
2
/* Opera, IE 8/9/10 */
@media screen {}
  

  JavaScript Hack
1
2
/* Opera 9.64- */
var isOpera = /^ function \(/.test([].sort);
1
2
/* Opera 12- */
var isOpera = Boolean(window.opera);

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

各種程式開發手冊大全,各種名詞解釋及定義用法等等

線上有的程式包含以下

Python
jQuery
NodeJS
PHP
Java
Ruby
Javascript
ActionScript
CSS

http://overapi.com/

 

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

Here is a 100px × 100px div with a 30px border:

 
height: 100px;
width: 100px;
border: 30px solid #999;
 

Watch what happens when each border has a different colour:

 
height: 100px;
width: 100px;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;
 

Now if we drop the setting of height and explicitly set the width of the div to be 0, we get the following:

 
width: 0;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;
 

Drop the top border and make the left and right borders transparent and you get this:

 
width: 0;
border-bottom: 30px solid #6C6;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
 

The side borders don’t have to be the same size as the bottom border. Here’s 30px bottom with 52px sides:

 
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
 

And here’s a div with a top border instead of a bottom border:

 
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
 

Put a 104px × 60px div with a background colour between them and you get:

 
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

width: 104px;
height: 60px;
background-color: #6C6;

width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

 

And that’s how we get a hexagon in CSS. The 30:52 ratio in the border widths is approximately 1:√3 which is ratio required for a hexagon.

A similar approach can be used to get a hexagon rotated 30°. We just flip around some of the directions, use float: left and drop the explict setting of width to 0.

 
float: left;
border-right: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;

float: left;
width: 60px;
height: 104px;
background-color: #6C6;

float: left;
border-left: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;
 

Both orientations of hexagons can easily be tiled. The first orientation involves a margin-bottom of -26px and margin-left of 3pxon each hexagon and a margin-left of 53px on even rows:

 
.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}
 

The second orientation involves a margin-right of -26px and margin-bottom of -50px on each hexagon as well as a margin-top: 53px on even columns:

 
.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
}
.hex .left {
    float: left;
    width: 0;
    border-right: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex .middle {
    float: left;
    width: 60px;
    height: 104px;
    background: #6C6;
}
.hex .right {
    float: left;
    width: 0;
    border-left: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex.even {
    margin-top: 53px;
}
 

And to finish things off, here’s a quick demo of a CSS 3D perspective transform applied to the hex grid:

 
-webkit-transform: perspective(600px) rotateX(60deg);
-moz-transform: perspective(600px) rotateX(60deg);
-ms-transform: perspective(600px) rotateX(60deg);
-o-transform: perspective(600px) rotateX(60deg);
transform: perspective(600px) rotateX(60deg);
 

Addendum

Will Hardy suggested on Twitter the following use of :before and :after to reduce the necessary divs to one:

 
.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
 

jawns pointed out on Hacker News that there's a Unicode code point U+2B22:

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

360搜索引擎:http://info.so.360.cn/site_submit.html

百度搜索引擎:http://www.baidu.com/search/url_submit.htm

google搜索引擎:http://www.google.com/intl/zh-CN/add_url.html

Yahoo中國搜索引擎:http://cn.yahoo.com/search/

dmoz.org搜索引擎:http://dmoz.org/Regional/Asia/China/

新浪搜索引擎:http://search.sina.com.cn/

搜狐搜索引擎:http://dir.sohu.com/

網易搜索引擎:http://search.163.com/

soso搜搜搜索引擎:http://www.soso.com/help/usb/urlsubmit.shtml

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

em指的是什麼?

em指字體高,任意瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有如下特點:

1. em的值並不是固定的;

2. em會繼承父級元素的字體大小。

國內大大小小的都使用12px作為網站的主要字體大小。10px太小,眼睛很容易疲勞,14px雖容易看清,卻破壞頁面的美感。唯獨12px在審美和視力方面都恰到好處。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

WebToJpeg

來自日本的一家在線縮略圖生成網站,輸入網站地址之後會在片刻內生成縮略圖。WebToJpeg提供外部調用網站縮略圖,同時還可以按照需要自己選擇縮略圖的尺寸,以及外部調用的一些簡單樣式設置。

網址:http://x-row.cc/webtojpeg/index.php

ShrinkTheWeb

ShrinkTheWeb所提供的功能略顯簡單,因為它只生成兩種尺寸的縮略圖。不過,在註冊賬號之後,所有在該網站生成的縮略圖都會保存在你的賬戶下,除了可以免除日後再生成之外,你可以在ShrinkTheWeb外部調用這些縮略圖。這對於寫日誌或者是分享給朋友使用是足夠的。

網站:http://www.shrinktheweb.com/

Super Screenshot

Super Screenshot的Super絕對不是吹的,因為該網站的主打是網站整版截圖,無論你的網頁有多長。Super Screenshot也可以設定不同尺寸,同時還可以選擇輸出縮略圖的格式為jpg或者是png。

網址:http://www.superscreenshot.com/

WebThumb

進入WebThumb,在首頁的地址欄輸入你想要製作縮略圖的網站地址,馬上就可以產生4種不同尺寸的網站縮略圖:80*60、160*120、 320*240和640*480,還有一個網站左上角的截圖[估計是截取Logo的],​​點擊右鍵另存為即可把縮略圖保存下來。同時WebThumb還提供zip壓縮文件打包下載,你可以一次性把所有縮略圖下載下來。

網站:http://bluga.net/webthumb/

ToLib© WebThumb Capter

進入ToLib© WebThumb Capter,在Enter your URL處輸入你想要製作縮略圖的網站地址,稍等片刻該網站便會生成四種不同尺寸的網站縮略圖。通過右鍵另存為方式保存縮略圖。

網址:http://thumb.tolib.com/

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

1. Google PageSpeed​​ Insights

首先介紹的這款網站速度和性能測試工具出自Google,通過分析網頁內容來為開發者提供提升網站加載速的建議。PageSpeed​​ 的測試包含移動設備和桌面設備兩方面,使您的網頁在所有設備上都能快速加載。

 

 

2. Yslow

YSlow是最常用的網站性能分析工具之一,相信  Web  開發者特別是前端開發人員一定很熟悉。YSlow基於一組高性能網頁規則來給你提供建議,如何優化可以讓網站更快。 

 

3. Pingdom

Pingdom 是一個偉大的工具,幫助用戶確定網站加載時間並生成大量的報告,例如頁面大小、瀏覽器緩存、性能等級等。它允許您跟踪性能歷史和從不同的地理位置進行測試。在線檢查網站每個元素的加載速度,生成非常詳細的測試報告,幫助你輕鬆優化網站。

 

4. Load Impact

Load Impact幫助你為  Web  應用程序進行負載測試和性能測試。選擇一個全球的負荷區,然後測試模擬客戶、帶寬、數據接受、每秒的請求等等。該工具顯示一個漂亮的圖表來測量加載時間。

 

5. Which Loads Faster

這是一款開源的工具,可以在線對比兩個網站的速度,例如Google vs Bing,Apple vs Adob​​e 等,幫助你了解哪個網站加載更快。 

 

6. Show Slow

Show Slow 是一個開源工具,幫助你監控各種網站性能指標。能夠測試網站在YSlow,Page Speed​​,WebPageTest 和dynaTrace AJAX Edition 中的情況。

 

7. GT Matrix

GTmetrix 可以幫助你開發更快速,高效以及用戶體驗良好的網站。GTmetrix 結合了最流行的Firefox 的性能組件YSlow 和谷歌網頁速度測試工具。Gtmetrix 給目標網站評分並提供改進網站存在的問題的建議。

 

8. Neustar Free Load Testing & Performance Test

這是一款快速生成網站的性能數據的工具,通過對目標網站進行監控和加載測試,幫助你快速解決網站性能問題。

 

9. Web Page Analyzer

Web Page Analyzer 是一個強大的速度測試工具,為您提供了分析和描述性的網站測試結果以及如何改進它。它提供了各種功能網頁速度報告,加載時間、分析和建議等等。

 

10. WebPage Test

借助WebPage Test,你可以運行簡單的測試或執行先進的測試包括多級事務、視頻捕捉、內容阻塞等。你的結果將提供豐富的診斷信息,包括資源加載瀑布圖,頁面速度優化檢查和改進的建議。

 

11. Free Speed​​ Test

Free Speed​​ Test 是一個在線的網站速度測試工具,通過在全球範圍內多個數據中心來檢查加載時間和速度。這將讓你能夠知道你的網站在世界各個角落的實際加載時間。

 

12. Octa Gate Site Timer

它允許您監控用戶需要多長時間下載一個或多個Web站點頁面。當頁面加載的時候,SiteTimer會統計每個項目需要多長時間下載,包含了多少數據,然後把信息展示在一個表格中

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

簡介內容超出部分文字隱藏省略的語法特效

 

點我下載

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

網站地圖 / 網站導航 /site map
公司簡介 / PROFILE or COMPANY Profile or Company
公司設備 / EQUIPMENT Equipment
公司榮譽 / GLORIES Glories
企業文化 / CULTURE Culture
產品展示 / PRODUCT Product
資質認證 / quality certification
企業規模 / SCALE Scale
業務網站 / 營銷網絡 / Sales Network
組織機構 / orGANIZATION organization
合作加盟 / Join in Cooperation
技術支援 / 技術力量 / TECHNOLOGY Technology
長官的話 / 經理致辭 / Manager`s oration
發展沿革 / 展歷程 / Development history
工程案例 / Engineering Projects
業務範圍 / Business Scope
分支機構 / Branches
支援訊息 / 供求信息 / Supply & Demand
經營理念 / Operation Principle
產品銷售 / SALES Sales
聯絡我們 / 聯繫我們 /CONTACT US Contact Us
訊息發佈 / 信息發布  / INFORMATION Information
首頁 / 返回首頁 / HOMEPAGE Homepage
產品訂購  / 產品定購 / orDER order
分類瀏覽 / Browse by category
電子商務 / E-Business
公司實力 / STRENGTH Strength
版權所有 / Copy right
友情連結 / Hot link
應用領域 / Application Fields
人力資源 / Human Resource HR
創辦人理念 / 領導致辭 / Leader`s oration
企業資質  / Enterprise qualification
產業消息  / 行業新聞 / Trade news
產業趨勢  / 行業動態  /Trends
客戶留言  / Customer Message
客戶服務 / Customer Service
最新消息  / 新聞動態  / News & Trends
公司名稱  / Company Name
銷售熱線 / Sales Hot-line
聯絡人  / 聯繫人 / Contact Person
您的要求Your requirements
建設中In construction
證書CERTIFICATE Certificate
地址ADD Add
郵編POSTAL CODE Zipcode
電話TEL Tel
傳真FAX Fax
產品名稱Product Name
產品說明DESCRIPTION Description
價格Price
品牌Brand
規格Specification
尺寸Size
生產廠家MANUFACUTURER Manufacturer
型號Model
產品標號Item No.
技術指標Technique Data
產品描述Description
產地Production Place
銷售信息Sales Information
用途Application
論壇Forum
在線訂購On-line order
招商Enterprise-establishing
招標Bid inviting
綜述General
業績Achievements
招聘Join Us
求賢納士Join Us
大事Great Event
動態Trends
服務Service
投資Investment
行業Industry
規劃Programming
環境Environment
發送Delivery
提交Submit
重寫Reset
登錄Enter
註冊Login
中國企業網技術支持Powered by ce.net.cn
社區Community
業務介紹Business introduction
在線調查Online inquiry Inquiry
下載中心Download
會員登陸Member Entrance
意見反饋Feedback
常見問題FAQ
中心概況General Profile
教育培訓Education & Training
遊樂園amusement park
在線交流Online communication
專題報導Special report

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

Photoshop升級到cs版本以後,原來7.0時,可以直接在windows系統窗口中預覽psd文件的功能就沒有了。

解決方法:原因是生成縮略圖的psicon.dll不再包括在CS版的安裝程序中,如果是從老版本升級到CS的話就可以。

把psicon.dll拷貝到:C:\Program Files\Common Files\Adobe\Shell文件夾下,就可以預覽了。

在這提供psicon.dll文件的下載

點我下載

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

台新銀行網路客服

台新網路銀行無法使用客服信箱

csrbank@taishinbank.com.tw

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論