TShopping - CSS

CKEditor如何修改編輯框的背景顏色

woff — Thu, 07 Jul 2022 03:20:05 +0000

完成圖：找到 contents.css

[CSS]讓圖片自動適應div大小

woff — Tue, 18 Dec 2018 13:52:24 +0000

做網頁、論壇貼圖、寫部落格。只要有需要上傳圖片的機會，就一定常碰到這問題。一旦不小心上傳一個大於版面的圖片，輕則內容被蓋住，重則排版全亂掉，畫面慘不忍睹。　　一般的css處理方法都是靠 over-flow:hidden; 來達成的。但這樣做有個缺點，跑出去的內容會被隱藏 ...

bootstrap 在小銀幕下如何把導覽列下移不致擋住LOGO

woff — Wed, 21 Dec 2016 13:19:46 +0000

再用bootstrap時，常常會遇到一些小細節須要修改常常為了一些小問題找半天 GOOGLE半天也沒看到有人說明此問題所以就只好自己來了找到bootstrap.css 加入這樣即可演示圖片 ...

CSS用google連結改變網頁字型語法

woff — Tue, 20 Dec 2016 16:51:11 +0000

當在設計網頁時，網頁預設是新細明體，看起來真的不是很好看所以嘗試改變一下字體讓網頁看起來更順眼所以在CSS裡，加入在CSS內BODY加入但是微軟正黑體有一個問題 safari瀏覽器有些次會錯位或無法顯示所以在CSS BODY改成這樣就可以了演示網址：http: ...

CSS 3背景新屬性：background-size

woff — Sat, 11 Jun 2016 21:32:09 +0000

指定背景圖片大小 background-size：bg-size , bg-size bg-size = auto | length | percentage | cover | contain [*]預設值為auto，即背景圖片原始長寬。 [*]length指定圖片具體大小的數值，不允許負值。 [*]percentage以背景圖所在元素的百分比指定背景圖大小，不允 ...

利用CSS完成游標移至圖片特效

woff — Thu, 19 May 2016 16:57:54 +0000

在使用CSS的時候，用某些特效能讓網站更有活力，如果運用JQUERY又太過複雜不過今天作者看到某網站的運用不錯，於是就利用CSS也做了可以看到下圖，滑鼠未移置圖片範例用CSS寫下列代碼在到圖片連結加入class 結果如下圖文章出處: NETYEA 新竹網頁設計, ...

BootStrap img-responsive 縮小圖片變形怎麼調整

woff — Tue, 03 May 2016 14:26:49 +0000

很多人用BootStrap 圖片因寬度縮小看起來很高興但是縮得太小的時候，高度會達到最小高度因此無法往下縮會造成圖片變形，如圖於是翻了一下bootstrap.css 找到 .img-responsive 這個class 裡面加入這樣就可以了成功如下圖演示網站 http://www.netyea.com/ ...

CSS+JQUERY 背景圖滿版的做法

woff — Wed, 27 Apr 2016 16:31:48 +0000

今天我們要跟大家分享幾個製作滿版背景圖的方法。現在先來確定一下我們的需求：圖片必須剛好填滿瀏覽器不能留有縫細，也不能因為圖片太大而出現捲軸。圖片可以隨著瀏覽器尺寸自動縮放。圖片必須保持長寬比，不能變形。要達成上面的需求，我們有以下的方法可以使 ...

CSS教學：文繞圖設置

woff — Fri, 26 Dec 2014 06:06:58 +0000

你可以抄錄這裡的紅色字串，插入 HTML 原始碼 < img src... > 的 img 跟 src 中間： STYLE=\"FLOAT: LEFT; MARGIN: 15PX\" STYLE=\"FLOAT:\" 指令要發揮作用，除了必須寫對，還得放在HTML原始碼正確的地方。我並非 CSS 專家，本文所載僅供各位自娛娛人。這裡僅就圖片的定 ...

CSS content內容生成技術以及應用

woff — Wed, 24 Dec 2014 10:03:19 +0000

content屬性早在CSS2.1的時候就被引入了，可以使用:before以及:after偽元素生成內容。此特性目前已被大部分的瀏覽器支持：(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+和Safari 4已經支持所有元素的content屬性，而不僅僅是:bef ...

CSS偽類對象before和after的用法

woff — Wed, 24 Dec 2014 07:29:43 +0000

一直感覺這兩個偽類對像不是很重要，並且IE對它兩兄弟並不支持，所以也沒有怎麼靜下心來研究，只有在清楚浮動clearfix的時候會用到哈，其他都很少用！不過最近在研究css3的時候覺得它兩個的搭配不僅能夠減少代碼量並且能整出很巴适的效果，所以就來研究研究哈！一、 ...

CSS3 box-shadow 屬性及範例

woff — Wed, 24 Dec 2014 04:06:47 +0000

今天我們接著一起來探討一下CSS3中的另一個屬性box-shadow的使用方法。CSS3的box-shadow有點類似於text-shadow，只不過不同的是text-shadow是對象的文本設置陰影，而box-shadow是給對象實現圖層陰影效果。本文我們擱下IE不談，只談談box-shadow的具體使用方法語法： ...

CSS3 transition 屬性及範例

woff — Wed, 24 Dec 2014 03:29:47 +0000

實例把鼠標指針放到div 元素上，其寬度會從100px 逐漸變為300px：親自試一試瀏覽器支持Internet Explorer 10、Firefox、Opera 和Chrome 支持transition 屬性。Safari 支持替代的-webkit-transition 屬性。註釋： Internet Explorer 9以及更早版本的瀏覽器不支持trans ...

CSS3的圓角Border-radius

woff — Wed, 24 Dec 2014 02:57:58 +0000

今天我們在一起來看看CSS3中製作圓角的屬性border-radius的具體用法。在CSS2中，大家都碰到過圓角的製作。當時，對於圓角的製作，我們都需要使用多張圓角圖片做為背景，分別應用到每個角上，我應用最多的就是在需要圓角的元素標籤中加四個空標籤，然後在每個空標籤中應 ...

CSS∥排版觀念-BoxModel Margin Padding

woff — Mon, 08 Dec 2014 01:43:39 +0000

研究Margin、Padding、Border和每一塊區塊的長寬間的關係。只要位置抓對了，版面的編排千變萬化呢。 CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。Box Model 的意思，直譯英 ...

CSS padding 內距屬性與用法範例

woff — Mon, 08 Dec 2014 01:37:38 +0000

透過 CSS padding 內距的設定，可以控制區域如 DIV 或 span 的內部距離，也可以控制 HTML 的表格內部距離（例如文字或圖片與邊框的距離），padding 本身就是內距的設定，padding 是不可以設定負值的唷！這點與 margin 不同。 CSS padding 基本語法範例　　　第一 ...

CSS position 屬性

woff — Mon, 08 Dec 2014 01:27:08 +0000

實例定位h2 元素：h2 { position:absolute; left:100px; top:150px; }親自試一試瀏覽器支持所有主流瀏覽器都支持position 屬性。註釋：任何的版本的Internet Explorer （包括IE8）都不支持屬性值\"inherit\"。定義和用法position 屬性規定元素的定位類型。說明這個 ...

Bootstrap 輪播

woff — Sun, 14 Sep 2014 09:06:06 +0000

描述在本教程中，您將看到如何使用 Bootstrap 創建輪播。這將幫您創建內容滑塊，圖像畫廊等等。用法所以，您把想要呈現的條目（比如 images）以循環順序放置在 \"carousel-inner\" div 中，通過 \"\" 創建條目的導航。它使用定制的 data 屬性 \"data-slide\" 來導航到上 ...

CSS3的文字陰影—text-shadow

woff — Sun, 14 Sep 2014 08:33:36 +0000

前段時間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個新屬性的使用方法，這幾次繼續整理了有關於CSS3的text-shadow的使用方法。今天特意花了點時間貼上來與有共同愛好的朋友一起分享這個新屬性的應用。 text-shadow還沒有出現時，大家在網頁設計中 ...

CSS3屬性 box-shadow使用教程

woff — Sun, 14 Sep 2014 08:08:58 +0000

CSS3的 box- shadow屬性可以讓我們輕鬆實現圖層陰影效果。我們來實戰詳解一下這個屬性。1. box-shadow屬性的瀏覽器兼容性先來看一個這個屬性的瀏覽器兼容性: [*]Opera: 不知道是從哪個版本開始支持的，我在發這篇文章測試的時候，正好更新了Opera到最新的10.53版本， ...