分類目錄歸檔：CSS+DIV

2015
09-02

推薦 10 個超棒的 CSS3 代碼生成工具

新的在線工具和WebApp幫助開發者快速地創建網站而不用寫代碼。前端開發已經在框架和代碼庫方面有了很大的進展。但是許多開發者已經忘記了代碼生成器在構建網站時的價值。下面的資源是完全免費的WebApp，這些WebApp能夠為模板，漸變，甚至瀏覽器屬性的前綴生成CSS3代碼。如果你是前端開發者，這些資源可以幫助你節省很多時間，并可以為以后的項目提供可復用的源碼。1.CSS3GeneratorCSS3Generator是... 繼續閱讀 >

2015
08-20

18個你可能不相信是用CSS制作出來的東西

與流行的看法相反，CSS不僅僅是用來提供一個WEB頁面的基本風格，以使它看起來更有吸引力。還有很多其他的事情，CSS也可以做的很好。由于它創建動畫和交互的能力，CSS集合HTML以及JavaScript給WEB開發者提供了嘗試不同方法的機會。瀏覽器就像一個空的畫布，WEB開發者可以在這里盡情的發揮。下面是18個人們用CSS創建的又酷又有創造性的東西的例子，從原始字符到有趣的動畫，有很多激勵你自己將時間花費在CSS上。1.&nbs... 繼續閱讀 >

2015
08-06

幾個CSS的黑科技

這里的黑科技其實就是一些CSS中不怎么為人所知但在解決某些問題的時候很溜的屬性。border-radius很多開發者估計都沒有正確認識這個border-radius，因為基本上很多人都是這么用的：.box{border-radius:4px;}稍微高端一點的是這樣的：.box{border-radius:4px6px6px4px;}然而，終極黑科技是這樣用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}對，它可以賦8個值，沒見過？... 繼續閱讀 >

2015
08-01

Web 設計師不可錯過的 25+ CSS 工具

當涉及到簡化CSS設計和開發相關的工作時，工具總能創造奇跡。值得指出的是，絕大多數的網頁設計者和開發人員對不同的CSS工具都感到興奮，這些工具能幫助他們更快的制作功能完善又十分完美的網站和網頁應用。當涉及到執行一些重復的CSS標簽時，這些值得推薦的CSS工具是最好的選擇。在本文中，我為你收集25+個CSS工具，它們將通過最大限度的發揮CSS的功能來幫助你建立神奇的網站。來，讓我們一起來看看吧！... 繼續閱讀 >

2015
07-16

HTML 5：足以改變我們未來生活的十項提示

HTML5代表著Web發展的未來方向。無論大家身為開發人員還是高級用戶，關于這一Web編程新基礎的種種態勢都值得各位高度關注。如果大家還沒有意識到，那我們先要強調一句——Web世界已經徹底改變了。時至今日，網絡銀行、實時視頻聊天以及短視頻共享已經成為Web領域的立足根基，而接下來還將有更多極具突破性的趨勢及成果不斷涌現。正因為如此，這一根基才需要迎接進一步升級。超文本標記語言（簡稱HTML）... 繼續閱讀 >

2015
07-14

Flex 布局語法教程

網頁布局（layout）是CSS的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴display屬性+position屬性+float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，W3C提出了一種新的方案----Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。Flex布局將成為未來布局的首選方案。本文介... 繼續閱讀 >

2015
07-10

15個實用的CSS在線實例教程

前端技術可以說是必須學習的一個技術，現在做網站都需要懂DIV、CSS，在國內很多企業招網頁設計師都要求會寫基本的前端代碼，所以前端技術是必須了解的，對網頁設計師本身也有幫助，今天向大家推薦一些不錯的實用CSS教程，學習這些可以提高自己的CSS技能，了解一些新的好用的用法，在日后項目也許會用上。用CSS背景給SVG上色有關SVG圖像、cssmask、給背景SVG添加顏色等一些用法。查看教程CSS網球... 繼續閱讀 >

2015
05-15

css中單位 px、em 的區別

在國內網站中，包括三大門戶，以及“引領”中國網站設計潮流的藍色理想，ChinaUI等都是使用了px作為字體單位。只有百度好歹做了個可調的表率。而在大洋彼岸，幾乎所有的主流站點都使用em作為字體單位，也就是可調的。沒錯，px比em更加容易使用，大部分讀者不知道em為何物或者它相當于多少px。國外人士如此重視網站易用性(Accessibility)，不僅因為其根生蒂固的人文精神，直接原因可能是因為有一部法律來約束他們... 繼續閱讀 >

2015
05-15

應不應該使用inline-block代替float

CSS布局創建網站,浮動絕對占據了很大的比例.大塊區域如主內容及側邊欄,以及在其中的小塊區域,都可以看到浮動的影子.這里浮動是唯一的解決方案嗎?浮動通常表現正常，但有時候搞起來會很糾結。特別是處理內部容器中的浮動，比如對一排圖片使用浮動后對齊出現問題。Inline-block是我們的另一種選擇。使用這種屬性可以模擬部分浮動的特征，而不需要處理一些浮動帶來的問題。Inline-block不是什么新鮮話題了，估計你也用... 繼續閱讀 >

2015
04-24

CSS 3中彈性盒布局的最新版

CSS3中彈性盒布局的最新版概述在CSS3中，CSSFlexibleBox模塊為一個非常重要的模塊，該模塊用于以非常靈活的方式實現頁面布局處理。雖然可以使用其他CSS樣式屬性來實現頁面布局處理，但是如果使用CSSFlexibleBox模塊中定義的彈性盒布局技術，可以根據屏幕尺寸或瀏覽器窗口尺寸自動調整頁面中各局部區域的顯示方式，即實現非常靈活的布局處理。雖然CSSFlexibleBox模塊已經被公布了好幾年，但是自開始公布... 繼續閱讀 >

2015
03-14

CSS3飄帶狀3D菜單 菜單帶小圖標

這次我們要來分享一款很特別的CSS3菜單，菜單的外觀是飄帶狀的，并且每一個菜單項有一個精美的小圖標，鼠標滑過菜單項時，菜單項就會向上凸起，像是飄帶飄動一樣，形成非常酷的3D視覺效果。這款CSS3飄帶狀3D菜單非常適合作一些活動頁面的菜單導航。在線演示        源碼下載 2、jQuery動畫二級下拉菜單對于jQuery菜單，大家已經非常熟悉了，我們也已經分享過很多jQuery菜單和CSS3... 繼續閱讀 >

2015
02-13

你該學點HTML/CSS知識的9大理由 HOT

每個人都應該學寫代碼——這一觀點簡直就是鋪天蓋地地映入我們眼簾。或許你會莫名其妙，程序員學代碼那是理所應當，但是作為一個作家、營銷人員、財務工作者甚至是工人，為什么也需要學習代碼呢？好吧，下面我會告訴你為什么懂點HTML和CSS會讓你的職業生涯發生巨大的改變。學習技術不僅僅是生產助理亦或是印刷設計師的事——無論你是小企業主、銷售經理、事件協調員還是魔術師，都能讓你受益于HTML和CSS知識。不要懷疑，讓我給... 繼續閱讀 >

2015
02-07

專為控制打印設計的CSS樣式 HOT

大多數Web設計師對打印控制還不是很熟悉，他們往往更迷戀像素，而不是打印機。在現實世界中，很多人依賴從網站上打印網頁來參考：在這個數字時代,在一些特殊的場合，很多人手中還會拿著紙張。Web開發人員可以采取一些措施來彌補打印機和液晶屏之間的差距。為打印機而不是屏幕設計的樣式/*樣式將只應用于打印*/@mediaprint{}注＊也可通單獨的CSS文件,設置link的media="print"屬性來指定此樣式專用于打印<l... 繼續閱讀 >

2015
02-02

即將推出的CSS4 Level 4 Selectors(第4級選擇器) 推薦

注*CSS4草案發布了。是時侯學習一些新的CSS，不是嗎？我們都習慣去學一個又一個的新前端框架，但是我們常常忘記了，作為我們每天使用的網絡核心語言CSS本身也在不斷地推出一些新功能。W3C編輯草案從1月15日的CSSSelectorsLevel4draft草案描述了一次CSS的飛躍。在我們開始之前，你應該知道：本文中的CSS，很多都無法在瀏覽器中工作。即使是最新的瀏覽器。這是因為，它們還是一些草案-處于起草... 繼續閱讀 >

2015
01-27

CSS 強制換行和超出隱藏實現

一、強制換行word-break:break-all;只對英文起作用，以字母作為換行依據。word-wrap:break-word;只對英文起作用，以單詞作為換行依據。white-space:pre-wrap;只對中文起作用，強制換行。word-break:break-all和word-wrap:break-word都是能使其容器如div的內容自動換行，它們的區別在于：1、word-break:break-all假設div寬度為450px，它的內容就會到450px自動換行，如果該行末端有個很長的英文單詞，它會把單詞截斷... 繼續閱讀 >

2015
01-27

CSS中設置margin:0 auto; 水平居中無效的原因分析

很多初學制作網頁的朋友，可能會遇到的一個常見問題，就是在CSS中加了margin:0auto;卻沒有效果，不能居中的問題，margin:0auto;的意思就是：上下邊界為0，左右根據寬度自適應，其實就是水平居中的意思，在這里說兩個典型的錯誤引起的不能居中的問題：1、沒有設置寬度<divstyle="margin:0auto;"></div>看看上面的代碼，根本沒有設置DIV的寬度，如何根據寬度自適應呢？新手比較容易忽略的問題。2、沒聲明DOCTYPE1）DOCTYPE... 繼續閱讀 >

2015
01-03

優化你的CSS 推薦

系列概述在移動web興起的年代，速度優化重新被大家重視起來，因為手機的網絡環境和性能比PC端差了很多，估計大家也能感覺到用手機打開網頁的時候，能明顯感覺到頁面蝸牛般的速度。這個系列的優化會以移動環境為基礎，當然絕大多數規則也同樣適合PC端。優化的基本原則速度優化有一些基本思路，提前總結一下按需加載(只加載你需要的)并行(讓串行的事情并行起來)壓縮(通過壓縮減少體積)緩存(利用緩存，減少請求等... 繼續閱讀 >

2014
12-18

常用meta整理

<meta>元素概要標簽提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他web服務。必要屬性屬性值描述contentsometext定義與http-equiv或name屬性相關的元信息可選屬性屬性值描述http-equivconte... 繼續閱讀 >

2014
12-13

10個不可忽視的CSS代碼片段 HOT

本文介紹10個非常有用的CSS代碼片段，絕對不容忽視。包括在整個容器中垂直對齊、元素拉伸為全屏高度、跨瀏覽器圖像灰度、動畫背景等，使用平率高，經常無法完全達到想要效果。現在有了這10個CSS代碼片段，我們可以將這些效果做得更好。1、垂直對齊在使用CSS的時候，你可能會出現疑問，我如何在容器中將文本或元素垂直對齊。現在使用CSS3Transforms，我們可以更有效解決這問題，如下：.verticalcenter{position:relative;top:... 繼續閱讀 >

2014
12-03

iHover – 30+ 純 CSS 實現的超炫的圖片懸停特效

iHover是一個令人印象深刻的圖片懸停效果集合，完全基于CSS3實現，無依賴，能夠搭配Bootstrap3很好地工作。基于SCSS技術構建，便于修改變量。有模塊化的代碼，無需包含整個文件。把飯30多個懸停效果，滿足各種需要。立即下載    官方主頁 繼續閱讀 >

2014
12-03

CSS 類名的單詞連字符：下劃線還是連接符？

本文的部分內容整理自我對此問題的解答：命名CSS的類或ID時單詞間如何連接？-知乎問題CSS類或ID命名時單詞間連接通常有這幾種寫法：駝峰式：solutionTitle、solutionDetail用橫杠連接：solution-title、solution-detail下劃線連接：solution_title、solution_detail應該采用哪種寫法呢？選擇的時候是出于個人習慣還是有別的考慮？看了下豆瓣，美團，淘寶的源碼，都是采用solution_t... 繼續閱讀 >

2014
12-03

7件你不知道但可以用CSS做的事

不管你信不信，CSS和JavaScript開始重疊，就像CSS增加了更多功能一新。在我寫“你可能不知道的CSS和JavaScript互相影響的5種方式”一文時，人們對于JavaScript和CSS是如何重疊的感到驚訝。今天，我將重點強調你能用CSS完成的7種工作——不需要通過JavaScript或圖片。CSS@supports在使用一些瀏覽器可能沒有的特性時，每一個優秀的前端開發者都需要進行特性測試。特性測試一直以來都是由JavaScri... 繼續閱讀 >

2014
12-03

十款超棒的CSS框架加速Web開發

CSS又稱層疊樣式表，是用來為結構化文檔（如HTML文檔或XML應用）添加樣式的計算機語言。目前最新的CSS3已被大部分瀏覽器支持，下一代CSS4還在開發當中。這里小編為大家整理了一些非常好用的CSS開發框架，如果加以合理利用，定能加速你的Web開發進程。Pure這是Yahoo最新推出的一款CSS框架，它只有HTML和CSS，沒有使用任何JavaScript語言。總大小只有4.4kb，但功能卻非常豐富，支持響應式樣式和各種導航、表格、表單、... 繼續閱讀 >

2014
12-03

Web 開發中 20 個很有用的 CSS 庫

在過去的幾年中，CSS已經成為一大部分開發者和設計者的最愛，因為它提供了一系列功能和特性。每個月都有無數個圍繞CSS的工具被開發者發布以簡化WEB開發。像CSS庫，框架，應用這樣的工具能夠為開發者做很多事，而且可以使開發者創造出創新立異的WEB應用。在這篇文件章中我們找到了一系列對開發者有用的CSS庫，它們能幫助開發者在一定的期限內取得有創造性和創新性的成果。我們希望這個列表能有助于您的開發并為您提供方... 繼續閱讀 >