分類目錄歸檔：CSS+DIV

2016
10-14

那些不推薦使用的html標簽

那些不推薦使用的html標簽acronym首字母縮寫，例如WWW類似的有abbr標簽，表示單詞縮寫，例如inc.。語法如下：<acronymtitle="WorldWideWeb">WWW</acronym><abbrtitle="incorporated">inc.</abbr>推薦用abbr，不要用acronym（忽略上面提到的語義上的差異）appletJava小應用程序，主要提供繪圖功能（在頁面上通過代碼繪制一些東西），例如：<appletcode="ShowImage.class"width=600height=400archive="Imagetest.jar... 繼續閱讀 >

2016
10-14

史上最強大的40多個純CSS繪制的圖形

今天在國外的網站上看到了很多看似簡單卻又非常強大的純CSS繪制的圖形，里面有最簡單的矩形、圓形和三角形，也有各種常見的多邊形，甚至是陰陽太極和網站小圖標，真的非常強大，分享給大家。Square(正方形)#square{width:100px;height:100px;background:red;}Rectangle(矩形)#rectangle{width:200px;height:100px;background:red;}Circle(圓形)#circle{width:100px;height:100p... 繼續閱讀 >

2016
10-05

使用CSS完成元素居中的七種方法

在網頁上使HTML元素居中看似一件很簡單的事情.至少在某些情況下是這樣的，但是復雜的布局往往使一些解決方案不能很好的發揮作用。在網頁布局中元素水平居中比元素垂直居中要簡單不少，同時實現水平居中和垂直居中往往是最難的?，F在是響應式設計的時代，我們很難確切的知道元素的準確高度和寬度，所以一些方案不大適用。據我所知,在CSS中至少有六種實現居中的方法。我將使用下面的HTML結構從簡單到復雜開始講解:<divclass=... 繼續閱讀 >

2016
09-29

必看谷歌 HTML/CSS 規范 HOT

背景這篇文章定義了HTML和CSS的格式和代碼規范，旨在提高代碼質量和協作效率。通用樣式規范協議省略圖片、樣式、腳本以及其他媒體文件URL的協議部分（ http:,https: ），除非文件在兩種協議下都不可用。這種方案稱為protocol-relativeURL，好處是無論你是使用HTTPS還是HTTP訪問頁面，瀏覽器都會以相同的協議請求頁面中的資源，同時可以節省一部分字節。<!--Notrecommended--><scriptsrc="https://w... 繼續閱讀 >

2016
09-16

有關css柵格系統的故事

說到柵格系統（gridsystem），你也許見過這樣的概念：像這樣，通過固定的格子結構，來進行布局設計。這是一種設計風格，而且一直以來很廣泛地應用于網頁設計領域。這樣的風格清晰、工整，可以讓網頁具有更友好的瀏覽體驗。而隨著響應式設計（responsivedesign）的流行，柵格系統開始被賦予新的意義，那就是，一種響應式設計的實現方式。柵格與響應式響應式的要點是為同一個頁面設計多種布局形態，分別適... 繼續閱讀 >

2016
09-10

20個編寫現代CSS代碼的建議

明白何謂MarginCollapse不同于其他很多屬性，盒模型中垂直方向上的Margin會在相遇時發生崩塌，也就是說當某個元素的底部Margin與另一個元素的頂部Margin相鄰時，只有二者中的較大值會被保留下來，可以從下面這個簡單的例子來學習:.square{width:80px;height:80px;}.red{background-color:#F44336;margin-bottom:40px;}.blue{background-color:#2196F3;margin-top:30px;}在上述例子中我們會發... 繼續閱讀 >

2016
09-10

調試 CSS 的方法

我經歷過許多CSS代碼的調試工作，有別人寫的也有自己寫的，有移動端平臺的也有標準桌面瀏覽器的，從陳舊的IE到最新的基于Webkit的每日構建。經驗告訴我，很多人并沒有一個標準的CSS調試流程。我發現在大多數情況下，擁有專業的解決問題的方法，能夠節省花在bug上的時間。下面是我總結的經驗。我不保證這是最適合的調試CSS的方法，但是確實對我很有效。如何CSS不是你的主要編程語言，調試它可能就像暗黑藝術一樣... 繼續閱讀 >

2016
08-22

試試這４個CSS動畫解決方案和資源

隨著移動設備的大量使用和CSS3兼容性在瀏覽器中的普及，越來越多的程序猿開始設計和使用基于CSS3的動畫效果解決方案，但是自己編寫基于CSS3的動畫效果也是一件比較讓人糾結的事情，為了快速的完成項目，大家也可以考慮使用一些現成的CSS3的動畫效果庫，今天這篇文章中，給大家介紹五款比較流行的CSS3類庫和資源，希望大家能夠喜歡~~Animate.cssanimate.css是我經常在項目中使用的動畫效果類庫，包含了很豐富的動畫過... 繼續閱讀 >

2016
08-19

前端CSS一些小細節 HOT

英文原文：LearningtoLovetheBoringBitsofCSS未來的CSS太讓人興奮了：一方面，是全新的頁面布局方式；另一方面，是酷炫的濾鏡、顏色等視覺效果。這些CSS，受開發者追捧，被雜志和博客文章鋪天蓋地地介紹。如果說這些特性是CSS華麗的一面，那我們來看看它樸實的一面：很不起眼的東西，如選擇器、單位、函數（方法）。我經常說這是繁瑣的東西，但我意思是它們能干漂亮的活，這就是我要分享的。怎么說呢，讓... 繼續閱讀 >

2016
08-01

扒一扒 CSS 語言的誕生史

實話說，在過去這一年，這已經成為我好心情的固定來源。即不斷地告訴一波波想要像在TeX、MicrosoftWord等常見的文檔處理工具中那樣方便地控制HTML文檔的樣式的人們說——安全帶系好，受傷別怪我：“很不好意思，你完蛋了！”——馬克·安德森1994年在1991年，蒂姆·伯納斯·李首次提出HTML的時候，并沒有給頁面添加樣式的方法。給定的HTML該如何渲染決定... 繼續閱讀 >

2016
08-01

帶你玩轉css3的3D！

話不多說，先上demo酷炫css3走馬燈/正方體動畫：https://bupt-hjm.github.io/css3-3d/github源碼地址：https://github.com/BUPT-HJM/css3-3d酷炫css3翻頁動畫：https://bupt-hjm.github.io/css3-flip-book/github源碼地址：https://github.com/BUPT-HJM/css3-flip-book以上均純css3實現，沒有使用任何js代碼，希望能得到大家的star啦~css3的3d起步要玩轉css3的3d，就必須了解幾個詞匯，便... 繼續閱讀 >

2016
07-15

提高CSS技術技巧

前言在今天的文章中，我將要聊聊我在一年半的實踐中，總結出來的css經驗。首先讓我提醒你，css是極其簡單的一門語言，簡單到可以用三個詞概括：選擇器，屬性以及屬性的值。這也是一些人不喜歡css的原因：他們覺得寫css像孩子玩樂高玩具一樣簡單。是這樣的。。如果你給一個9歲的孩子介紹css的基本原理，他就會搭建一個網站。不過這個網站不會很復雜，也就是一些包含頭部，鏈接，內容圖片的頁面而已。事實上，css是一門簡單的語... 繼續閱讀 >

2016
06-18

使用 <pre> 標簽樣式的注意事項

你可能正在使用<pre>標簽。這是一個HTML中非常特別的標簽，它允許其中的空格真正顯示出來。例如：四個空格將真實顯示成四個空格。這不同于其他標簽通常的做法，其他標簽會將之間的空白壓縮成一個。從這一點來說，<pre>標簽真的是很有用。你在<pre>標簽中使用<code>標簽嗎？<pre>標簽的“pre”的意思是“preformattedtext”（預格式化的文本），沒有特別規定里面的文本是什么內容... 繼續閱讀 >

2016
06-18

用 CSS 隱藏頁面元素的 5 種方法

用CSS隱藏頁面元素有許多種方法。你可以將opacity設為0、將visibility設為hidden、將display設為none或者將position設為absolute然后將位置設到不可見區域。你有沒有想過，為什么我們要有這么多技術來隱藏元素，而它們看起來都實現的是同樣的效果？每一種方法實際上與其他方法之間都有一些細微的不同，這些不同決定了在一個特定的場合下使用哪一個方法。這篇教程將覆蓋到那些你需要記住的細小不同點，讓... 繼續閱讀 >

2016
06-18

HTML特殊字符的html、js、css寫法匯總

?  箭頭類符號UNICODE符號UNICODEHTMLJSCSSHTMLJSCSS?&#8672\u21E0\21E0?&#8674\u21E2\21E2?&#8673\u21E1\21E1?&#8675\u21E3\21E3?&#8606\u219E\219E?... 繼續閱讀 >

2016
04-24

CSS之父：Web事業未競，尚需前赴后繼

提到Web設計，很少有人的影響會超過HåkonWiumLie。在CERN與Web之父TimBerners-Lee一起工作的Lie，發明了CSS。如果沒有那次大膽的提議，我們今天談論的Web設計很可能是完全不同的一回事。正如Lie所說：“這個技術可能會被一家公司占有，比如法國電信，比如微軟。很可能會掌控在私人手中。”“當時的Web還比較混亂，有不少亂七八糟的東西，但同時那也正是人性的反映。而且所有人都可以免費使... 繼續閱讀 >

2016
04-11

深入理解PHP對象注入

0x00背景php對象注入是一個非常常見的漏洞，這個類型的漏洞雖然有些難以利用，但仍舊非常危險，為了理解這個漏洞，請讀者具備基礎的php知識。0x01漏洞案例如果你覺得這是個渣渣洞，那么請看一眼這個列表，一些被審計狗挖到過該漏洞的系統，你可以發現都是一些耳熟能詳的玩意（就國外來說）WordPress3.6.1Magento1.9.0.1Joomla3.0.3Ipboard3.3.5除此之外等等一堆系統，八成可能大概在這些還有其他的php程序中還有很... 繼續閱讀 >

2016
04-11

CSS Grid布局指南

簡介CSSGrid布局（又名"網格"），是一個基于二維網格布局的系統，主要目的是改變我們基于網格設計的用戶接口方式。如我們所知，CSS總是用于網頁的樣式設置，但它并沒有起到很好的作用。剛開始的時候我們使用表格(table)，然后使用浮動(float)、定位(position)和內聯塊(inline-block)，但所有這些方法本質上來講都是hacks，存留了很多需要實現的重要功能問題(例如，垂直居中)。雖然Flexbox可以起到一定的補救作用，但是它只可... 繼續閱讀 >

2016
01-30

22個CSS黑魔法

Heythere!TodaywearegoingtotalkaboutsomeusefultricksinCSS.Let'sbeginwith…在這篇文章中我們會談論一些有用的CSS技巧…BlendModes混合模式NotsofarFirefoxandSafaristartedtosupportblendmodesrightasPhotoshopdoes.ItalsoworksinChromeandOperabutwithflags.Seeanexample:到目前為止，Firefox和Safari已經能和Photoshop一樣支持混合模式了，Chrome... 繼續閱讀 >

2015
12-20

30+有用的CSS代碼片段

在一篇文章中收集所有的CSS代碼片段幾乎是不可能的事情，但是我們這里列出了一些相對于其他的更有用的代碼片段，不要被這些代碼的長度所嚇到，因為它們都很容易實現，并且具有良好的文檔。除了那些解決常見的惱人的問題外，也包含了一些解決新問題的新技術。1.垂直對齊如果你之前遇到過這個問題，你就應該知道它是多么的煩人，幸運的是，現在你可以使用CSS3變換來解決這個問題：.vc{position:relative;top... 繼續閱讀 >

2015
11-10

純 CSS 創建各種不同的圖形形狀

介紹今天，我們要學習如何使用簡單的CSS來創建不同類型的平面圖形。使用代碼矩形.rectangle{width:250px;height:150px;background-color:#6DC75F;}<div></div>三角形.triangleUp{border-left:75pxsolidtransparent;border-right:75pxsolidtransparent;border-bottom:150pxsolid#6DC75F;width:0;height:0;... 繼續閱讀 >

2015
11-09

css設計中的不變與可變 推薦

“人活一世,有人成了面子,有人成了里子,都是時勢使然?！薄兑淮趲煛啡绻貥嫹掷镒优c面子的話，那么html應該是負責里子的，而css就是負責面子了。在上篇html結構的拆與合說了html之后，我們繼續來說下css，這次我們從可變與不變的角度分析。一個面試題首先這是一個面試題，其次反正我是沒做過這個面試題，最后忘了是哪個廠的面試題。具體的要求我忘了，大概的意思就是要這個內容在視窗內垂直方向居中，以圖片為參考，文... 繼續閱讀 >

2015
09-30

使用字符串(STRINGS)設置樣式 推薦

今年在墨爾本(澳大利亞)舉辦的CSSConf中，我有一個主題需要演講——"StylingWithSTRINGS"。該講座主要介紹的是在組件中如何使用Flexbox、currentColor和em，在瀏覽器中快速實現Web應用程序所需要的風格。特別提醒：原文提供了一個視頻，不過需要翻。大家都懂的。這里歸納了幾個要點：布局(Layout)當你創建一個移動應用的布局時，并不是整個頁面滑動，而只是某些部分。比如說，頁面的頭部和腳部是固定的，只是中間的主內容區... 繼續閱讀 >

2015
09-30

CSS中你不知道的小技巧 推薦

CSS中的級聯(cascade)在同一時間可謂是幸福的，也可以說是痛苦不堪的。通常能工作得非常好，但有問題的時候，也讓人們都很激動，甚至事件中也離開不CSS。我們所涉及的不僅是CSS的級聯也還涉及到CSS的權重。不是說碰到特殊問題才顯得困難，可以說CSS的困難無處不在。在這篇文章中，我將通過一些示例來向大家展示一些CSS的小技巧，讓你知道如何使用CSS的級聯能變得更友好，也減少一些不必要的需求，從而也減少權重上遇到的麻煩。... 繼續閱讀 >