搜尋

隨機推薦

07 二月 2011

分類

RSS

feed-image Feed Entries
程式語言
HTML & CSS

當臨時需要時，我們都使用記事本來編輯一些代碼片段，想法，或部落格內容與待辦事項。最近我才知道，我們可以用我們的瀏覽器當成記事本。用 data URI 和html contenteditable屬性即可。

所有你需要做的是到瀏覽器的地址欄輸入下面的代碼：

data:text/html, <html contenteditable>

它會讓你的頁面就像記事本一樣能編輯。如果您希望您的內容可以被保存，用 Ctril+S即可將您的內容保存為HTML文件。

程式語言
HTML & CSS

Unicode 是全世界通用的最大的字符集合，包含了各國各種各樣的字符。由於字符數量巨大而且各種各樣，所以輸入法一般無法打出很多很特殊的 Unicode 符號。

在網頁中，有時候我們會需要一些符號，例如：倒三角 ▼。如果要讓網頁顯示這種符號，顯然用字符的方式比較好，體積小到可以忽略不計同時還可以方便用 CSS 定義樣式等。但是直接把這個倒三角複製進網頁中的話，雖然可以，但是不合理，這時候我們就要用到對應圖標的實體字符，例如通過查詢可以看到倒三角對應的 Unicode HTML 代碼為 &#9660; 將前面代碼中的空格刪掉，複製進 HTML 文件中就可以看到了。

程式語言
HTML & CSS

相信很多人都遇到過在設計中自定義滾動條樣式的情景，之前我都是努力說服設計師接受瀏覽器自帶的滾動條樣式，但是這樣只能規避還是解決不了問題，最近在項目中遇到了，正好來總結一下。當然，兼容所有瀏覽器的滾動條樣式目前是不存在的。

IE下的滾動條樣式

IE是最早提供滾動條的樣式支持，嗯，好多年了，但是其它瀏覽器一直沒有支持，IE獨孤求敗了。

這些樣式規則很簡單：

  • scrollbar-arrow-color: color; /*三角箭頭的顏色*/
  • scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
  • scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/
  • scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/
  • scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/
  • scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/
  • scrollbar-track-color: color; /*立體滾動條背景顏色*/
  • scrollbar-base-color:color; /*滾動條的基色*/

大概就這些，你也可以定義cursor來定義滾動條的鼠標手勢。

 

程式語言
HTML & CSS

  

<!doctype html>
<!-- simplified doctype works for all previous versions of HTML as well --> 
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!-->
<html lang="zh-tw" class="no-js">
        <!--<![endif]--> 
        <head>    
                <!-- simplified character encoding -->    
                <meta charset="utf-8">      
                <title>Easy HTML5 Template
                </title>    
                <meta name="description" content="Easy HTML5 Template">    
                <meta name="author" content="">      
                <!-- Delete these two icon references once you've placed them in the root directory with these file names -->     
                <!-- favicon 16x16 -->     
                <link rel="shortcut icon" href="/favicon.ico">    
                <!-- apple touch icon 57x57 -->    
                <link rel="apple-touch-icon" href="/apple-touch-icon.png">      
                <!-- Main style sheet. Change version number in query string to force styles refresh -->     
                <!-- Link element no longer needs type attribute -->     
                <link rel="stylesheet" href="/css/screen.css?v=1.0">      
                <!-- Modernizr for feature detection of CSS3 and HTML5; must be placed in the "head" -->     
                <!-- Script tag no longer needs type attribute -->     
<script src="/js/modernizr-1.6.min.js"></script>      
                <!-- Remove the script reference below if you're using Modernizr -->     
                <!--[if lt IE 9]>
                    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                    <![endif]--> 
        </head> 
        <!-- If possible, use the body as the container -->
        <!-- The "home" class is an example of a dynamic class created on the server for page-specific targeting -->
        <body class="home">      
                <!-- ******************************************************************** -->     
                <!-- The content below is for demonstration of some common HTML5 elements  -->     
                <!-- More than likely you'll rip out everything except header/section/footer and start fresh -->      
                <!-- First header has an ID so you can give it individual styles, and target stuff inside it -->     
                <header id="hd1">          
                        <!-- "hgroup" is used to make two headings into one, to prevent a new document node from forming -->         
                        <hgroup>        <h1>Easy HTML5 Template</h1>        <h2>tagline</h2>        
                        </hgroup>          
                        <!-- Main nav, styled by targeting "#hd1 nav"; you can have more than one nav element per page -->         
                        <nav>            
                                <ul>                <li>
                                        <a href="#">Home</a></li>                <li>
                                        <a href="#">About</a></li>                <li>
                                        <a href="#">Services</a></li>                <li>
                                        <a href="#">Contact</a></li>            
                                </ul>        
                        </nav>      
                </header>
                <!-- #hd1 -->      
                <!-- This is the main "div" that wraps the content generically; don't use "section" for this -->     
                <div id="main">          
                        <!-- The first of two "section" elements for demo purposes; optional class added for styling (hs1 = "home section 1") -->         
                        <section class="hs1">        
                                <!-- Each section should begin with a new h1 (not h2), and optionally a header -->        
                                <!-- You can have more than one header/footer pair on a page -->            
                                <header>            <h1>This is a Page Sub Title</h1>            
                                </header>              
                                <p>Some content...
                                </p>              
                                <!-- The h2 below is a sub heading relative to the h1 in this section, not for the whole document -->             <h2>Demonstrating EM and STRONG</h2>              
                                <!-- "strong" is used for SEO and contextual hierarchy -->             
                                <p><strong>This text will have more importance (SEO-wise and contextually)</strong>
                                </p>              
                                <!-- "b" is used for stylistic offset of text that's NOT important contextually -->             
                                <p><b>This text has visual importance but has no contextual or SEO importance</b>
                                </p>              
                                <!-- "em" is used for colloquial-style emphasis -->             
                                <p>This is a 
                                        <em>very
                                        </em> colloquial expression.
                                </p>              
                                <!-- There can be multiple footers on each page -->             
                                <!-- Secondary headers and footers don't necesarily need ids; they can be targeted via context (i.e. ".hs1 footer") -->             
                                <footer>            
                                        <!-- incite a riot: http://24ways.org/2009/incite-a-riot -->            
                                        <p>Author: 
                                                <cite>Louis Lazaris
                                                </cite>
                                        </p>            
                                </footer>          
                        </section>
                        <!-- .hs1 -->          
                        <!-- This is another section; doesn't have header/footer because it's not required -->         
                        <section class="hs2">        <h1>This is another section</h1>        
                                <p>This is some dummy content
                                </p>        
                        </section>
                        <!-- .hs2 -->      
                </div>
                <!-- #main -->      
                <!-- The "aside" element could be a sidebar (outside an article or section) -->     
                <!-- Or it could reference other tangentially-related content within an article or section -->     
                <aside id="sidebar">    
                        <p>Sidebar content
                        </p>    
                </aside>      
                <!-- The main footer has an ID for targeting, similar to the main header -->     
                <footer id="f1">    
                        <p>copyright © year
                        </p>    
                </footer>
                <!-- #f1 --> 
                <!-- Remote jQuery with local fallback; taken from HTML5 Boilerplate http://html5boilerplate.com -->
                <!-- jQuery version might not be the latest; check jquery.com -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script> 
                <!-- Below is your script file, which has a basic JavaScript design pattern that you can optionally use -->
                <!-- Keep this and plugin scripts at the bottom for faster page load; combining and minifying scripts is recommended -->
<script src="/js/general.js"></script> 
                <!-- asynchronous analytics code by Mathias Bynens; change UA-XXXXX-X to your own code; http://mathiasbynens.be/notes/async-analytics-snippet -->
                <!-- this can also be placed in the <head> if you want page views to be tracked quicker -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
        </body>
</html>

 

下載一

下載二

下載三 (zip)

 

 

程式語言
HTML & CSS

CSS bug是佈局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。輕鬆的解決CSS bug是我們必須掌握的技能。現在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。

希望對您的學習、工作有所幫助，如果您依然有疑問，

一、 針對瀏覽器的選擇器

這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.

IE6及其更低版本
* html {}

IE7及其更低版本
*:first-child+html {} * html {}

僅針對IE7
*:first-child+html {}

IE7和當代瀏覽器
html>body{}

僅當代瀏覽器(IE7不適用)
html>/**/body{}

Opera9及其更低版本
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}

要使用這些選擇器,請將它們放在樣式之前. 例如: 

#content-box { 
width: 300px; 
height: 150px; 
} 
* html #content-box { 
width: 250px; 
}

程式語言
HTML & CSS

 

HTML5入門

HTML5是HTML的最新版本，目標是更好地開發網絡應用程序。HTML5比HTML4擁有更簡潔的語法並且提供了更多新的特性。本文將對HTML5做一個大體的介紹。

HTML5能做什麼？

1. 離線存儲

HTML5可以讓你的WEB應用程序離線也能運行,它提供了一個稱作“應用程序緩存”的離線存儲功能，因此即使當用戶離線 ，瀏覽器仍然能夠訪問到它所需的文件。這些文件可以是HTML，CSS，Javascript 或者其它任何 網頁運行所需要的文件。

2.拖拽功能

HTML5提供了可以用來設計交互應用程序的本地拖拽功能，通過這個特性你可以拖動任何元素然後把它放到你想放到地方。

3.地理位置定位技術

HTML5的地理位置定位API可以讓你與所信任的網站分享你當前的位置信息，當然，隱私問題是這一特性所主要考慮的，W3.org聲明：

瀏覽器在沒有用戶許可的情況下不允許私自向網站發送用戶的地理位置信息。

比如一位用戶使用Firefox瀏覽器訪問了一個實現地理位置定位技術的網頁，瀏覽器會向用戶詢問是否共享他的地理位置信息，如果用戶同意，Firefox會收集附近無線接入點和訪問者IP地址信息，並把這些信息發送到默認設定的Google地理位置服務，處理之後的位置信息將會發送給用戶訪問的這個網站。

4.音頻和視頻

當前的HTML缺少在頁面中嵌入多媒體文件的特性，因此多媒體文件的嵌入需要使用各種的插件。比如FLASH被廣泛地用來嵌入音頻和視頻文件。現在可以非常方便地使用HTML5提供的audio和video標籤，而不用任何插件。

5.表單輸入

HTML5提供了幾個新的表單input類型，像彈出日曆，調色板，數字輸入框等等。這些可以創建擁有更好的輸入控制和驗證的高效表單。

 

程式語言
HTML & CSS

HTML5 Logo

你是免不了的。每個人都在談論HTML5。自眾人開始濫用圓角和漸變效果以來，HTML5或許是最熱炒的技術。然而，許多人眼中所謂的HTML5實際上只是老式的DHTML和Ajax。有關HTML5的諸多信息中魚目混珠，因此,JavaScript專家雷米·夏普（Remy Sharp）和Opera公司的布魯斯·勞森（Bruce Lawson）著眼這些流言，對其中的常見謬誤和事實做了分類整理。

 

第 1 頁，共 5 頁

Please publish modules in offcanvas position.