文章彙整

26 篇文章標籤含"CSS"

首頁  /  標籤含 "CSS"的文章

6個網頁設計靈感來源分享

打造一個品牌,在視覺上給人的形象與感覺是很重要的,是使用者第一眼對網站的印象。網站顏色搭配、Logo

利用多邊形圖層,絕對定位和置中呈現Landing Page

今天要介紹的是用css打造一個Landing Page中 header部分,利用多邊形圖層,絕對定位和置中呈現;本教學大概會用到製造效果的css包括:background-image:

純CSS實現表格首行和首列固定

當表格列數和行數較多時,使用者會出現的需求即是把重要的列與行固定,以便於瀏覽表格內容,才得以提高用戶體驗。為各位介紹使用單純 CSS

如何在Magento2 使用 Bootstrap

如果想要在Magento2的主題包裡使用bootstrap 的

BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)

BEM 是一種前端項目開發的方法學,因應當前網頁發展爆炸趨勢,前端程式碼複雜度大大提升,尤其是 JavaScript 和 CSS

Clippy – 輕鬆利用 CSS 實踐多邊形設計

現在的 UI 設計中隨處可見各種不規則的形狀元素,現在將介紹 CSS3 中的 clip-path 屬性,

如何利用CSS3原生網格系統快速排版

CSS3有原生地網格系統,過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題,但現在IE11也支援Grid的語法了,讓我們來看看用CSS3

快速查詢CSS/HTML與各瀏覽器的支援-Can I Use

Can I Use網站上羅列出前端常用的CSS、Html、SVG、JS,JS

使用sass定製你的bootstrap css

本篇文章要跟大家分享如何使用sass定製你的bootstrap

使用CSS自動設定單偶數背景色

在還沒有CSS3以前,CSS是無法加入判斷功能的,例如說今天要做的單數行背景顏色X色,偶數行背景顏色Y色,以前必須要靠別的程式輔助,例如PHP或是Javascript。 現在就介紹一個CSS3的新選擇器(Selector):nth-child()。 例如:我們今天想要做,單數行的背景顏色綠色,偶數行的背景顏色橘色。 先來準備一些文字段落(p):

純CSS的下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。   首先我們先把第一層的按鈕做出來。 HTML

CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具,我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。

滿版背景圖的製作方法- CSS & jQuery

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求: 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。

【教學】Google Code Prettify 幫您的程式碼上個色吧!

Google Code Prettify 是一個好用的語法上色工具、用法相當簡單

【Magento小技巧】:在Magento中整合CSS及Javascript

為了提升網站效能、減少HTTP requests,將眾多的javascript及css整合在一起,是一件必要的工作。關於這一方面,magento提供一個簡便的方法,請參考下列教學步驟。 Step 1:

如何用CSS自訂網站反白文字?

如果來到Astral Web歐斯瑞的網站,按下左鍵選取文字(反白)時,出現的不是預設的背景色,而是鐵灰色,讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見,今天我們就來和大家介紹如何設定! 方法很簡單,只要利用css3 的selection選擇器就可以了!

如何使用css來隱藏placeholder文字?

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。

如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

設計版面時,為了讓網頁更整齊,常需要限制文字的字數,當文字超過限制時會自動顯示”…”的刪節號。 今天Astral Web要介紹如何限制字數,讓版面更整齊順眼;但這部分會用到程式碼較為複雜,需要有程式背景的人進行操作。 首先,單純使用CSS時,我們可以利用text-overflow: