A.PAO designSTUDIO BLOG

修改本網站上PC版面中的CSS

Mon, 05 Dec 2022 00:20:01 +0000

因為重新安裝系統，最近常常增加自己的部落格內容，以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多，需要做些CSS視覺修改，好分辨在眾多的標題與文章間的視覺修正，好讓閱讀者有較好的視覺引導

▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）

▼手機版還算清楚，所以沒有動到手機版的視覺修正

▼使用chrome檢視這行程式碼

▼按F12後，找到這段程式碼，應該是之下的 h4

▼開啟 CSS 並找到這段程式碼

▼找到 h4 在網頁中的位置，並 Chrome 中確認無誤後，就可以在 h4 下方增加一段程式碼

▼於 CSS 中增加並修改的程式碼

.textbox-title h4::before{
  z-index: 99999;  /*提升Layer層，不受到其他設定遮蔽*/
  position: relative; /*將content內的符號做相對位置移動*/
  margin: 0 0 0 -20px; /*向左移動20px*/
  content: "▶";  /*文字符號為 ▶*/
  color: rgba(102,102,102,0.80);  /*指定文字顏色*/
}

▼當程式碼更新後（修改後，青色箭頭部分出現了 ▶）

Tags - 修改 , 網站 , pc , 版面 , css

CSS nth-child（n）用法

Thu, 15 Apr 2021 03:58:10 +0000

為了客戶要在就程式中加上某些功能，又不能動到inc模組的狀況下，改變CSS版型，就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義，除了first-child, last-child 的方法，之外 nth-child（n）也是不錯的用法，但是要多注意上層的 Class 定義，才能完美定義出自己想要的CSS3樣式。

以table tr 元素為例：
odd：為奇數
nth-child(odd)

tr:nth-child(odd){background:#808080}

even：為偶數

tr:nth-child(odd){background:#808080}

n可放入數字：以 ul li 元素為例：
前方開始的用法：
:nth-child(n)

:nth-child(3)
說明：設定於列表中的第（3）個標籤（li）

li:nth-child(3){background:#808080}

:nth-child(2n)
說明：設定於列表中的偶數標籤（li）

li:nth-child(2n){background:#808080}

:nth-child(2n-1)
說明：設定於列表中的奇數標籤（li）

li:nth-child(2n-1){background:#808080}

後方開始的用法：以 ul li 元素為例：
:nth-last-child(n)

:nth-last-child(3)
說明：後面算來第三個元素

li:nth-last-child(3){background:#808080}

:nth-last-child(-n+3)
說明：最後算來三個元素

li:nth-last-child(-n+3){background:#808080}

:nth-last-child(5n)
說明：最後算來五的倍數的元素

li:nth-last-child(3){background:#808080}

參考網站：
http://www.csrdat.org.tw/
Tags - css , nth-child（n）

CSS 替代 Javascript 與 DHTML 寫法多重hover

Thu, 23 Aug 2018 12:38:43 +0000

最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。

範例參考：點這裡

CSS的部分

   a{
  font-size: 24px;
}
a:hover{
  background:  rgba(144,0,2,1.00); color:rgba(255,255,255,1.00);
}
span{
  visibility: hidden;
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0 0 20px 10px;
  font-size: 30px;
}
i.bLi01:hover span.bOver01{
  visibility: visible;
}
i.bLi02:hover span.bOver02{
  visibility: visible;
}
i.bLi03:hover span.bOver03{
  visibility: visible;
}

▲這裡的 visibility: visible（顯示）or hidden（隱藏）跟disply不同；隱藏後，還是會將元素（span）的寬與高做保留。

HTML部分：

  call text01
  text01 is showing

  call text02
  text02 is showing

  call text03
  text03 is showing

Tags - css , javascript , dhtml , hover , more

不需要 Javascript 做出 CSS 輕動畫（CSS Animation）

Wed, 25 Jul 2018 02:32:59 +0000

跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）

▼首先向右走（0-49% 平行向右移動）

▼向左走（50-99% 平行向左移動）

▼原地踏步 (100% 完成過程回到原位置)

Sample連結:
https://blog.apao.idv.tw/sample/animation/animation_picture.html

HTML部分將連結屬性改為：inline-block

dog

CSS 由「class」與「@keyframes」兩個部分來描述

CSS class部分
linear：從頭到尾速度相同
ease：開頭漸快，結尾漸慢
ease-in：以低速開始
ease-out：以低速結束
ease-in-out：低速開始，低速結束
cubic-bezier(n,n,n,n)：可自由調整數值
infinite：重複播放
alternate：逆向播放

.bWorkDog{
position: absolute;
display: inline-block;
background: url(dog_119px_stand.gif) no-repeat;
width: 119px; height: 119px;
line-height: 999px;
overflow: hidden;
left: 0px; top: 50px;
animation:WorkDog 5s linear 0s;
/* Firefox: */
-moz-animation:WorkDog 5s linear 0s;
/* Safari and Chrome: */
-webkit-animation:WorkDog 5s linear 0s;
/* Opera: */
-o-animation:WorkDog 5s linear 0s;
}

CSS @keyframes

@keyframes WorkDog
{
0%   {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;}
49%   {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;}
50%   {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;}
99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;}
100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;}
}

@-moz-keyframes WorkDog /* Firefox */
{
0%   {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;}
49%   {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;}
50%   {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;}
99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;}
100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;}
}

@-webkit-keyframes WorkDog /* Safari and Chrome */
{
0%   {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;}
49%   {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;}
50%   {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;}
99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;}
100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;}
}

@-o-keyframes WorkDog /* Opera */
{
0%   {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;}
49%   {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;}
50%   {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;}
99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;}
100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;}
}

Tags - css , class , keyframes , workdog , 輕動畫 , javascript

對應電腦版與手機版的MENU條

Mon, 28 May 2018 09:06:27 +0000

這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎，做下筆記。
▼電腦版介面

▼手機版介面（以ICON做區別）

中文範例：點這裡
META部分（讓手機能夠辨識這個網頁與讓手機能維持1:1比例）：

CSS部分：

.navbar {
    overflow: hidden;
    background-color:rgba(0,0,0,0.50);
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
  position: relative;
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 50px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
/*手機版上以以ICON界面呈現*/
@media only screen and (max-width:640px) {
.dropbtn{
  display:inline-block;
  background:url(icon_menu_48.png) no-repeat;
  width: 48px;
  height: 48px;
  overflow: hidden;
  text-indent: -150px;
  }
}

HTML部分：

英文範例：點這裡
Tags - 改良 , dropdown , menu , inside , a , navigation , bar

CSS Selector 在CLASS中包含某個字便改變設定

Mon, 28 May 2018 06:54:10 +0000

說明：在CSS 的Class名稱中，只要包含「test」便改變屬性設定

中文範例：點這裡
CSS部分：

div[class*="test"]{
background:rgba(255,0,0,1.00);
color: #ffffff;
}

HTML部分：

第一個 DIV 元素

第二個 DIV 元素

第三個 DIV 元素

第一個 test P 段落的本文

英文原文範例：點這裡
Tags - attribute , * , = , value

Sticky Navigation Bar

Thu, 24 May 2018 08:13:53 +0000

這個CSS主要是可以從畫面的某個X座標，移動到頂端時，便停留在畫面頂端，不再需要Javascript計算位置。
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。

中文參考網頁：smaple

CSS部分

body {
    font-size: 28px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

HTML部分

Home

最新消息

網站內容

Sticky Navigation Bar Example

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。

英文 smaple
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky

對應瀏覽器請參考以下連結：
https://caniuse.com/#search=sticky
Tags - sticky , navigation , bar

ul::after 防止 ul li 錯亂寫法

Mon, 08 Jan 2018 04:21:17 +0000

正常來說 HTML裡面，如果使用 li 做 float 功能時，就會讓 li 失去高度，為了不讓 li 失去高度，以及在之後的元素不會錯亂，需要有對應的程式寫法，如下：
HTML 一般寫法

this is list comm.

this is list comm.

就會變成這樣：（灰框：div, 藍框：ul, 紅框：li）
要正常，就要多寫一行div style -> clear: both 在每個 ul 後面，但是對輸出程式而言有點不乾淨。

...

所以在CSS裡用 ul::after 來防制 float: 所產生的錯亂對輸出會乾淨一些。
CSS style

ul::after{
content: "."; /*輸出文字*/
color: rgba(255,255,255,0.00); /*文字是透明的*/
clear: both; /*清除以上float規則*/
display: block; /*產生float功能所喪失的物件高度*/
height: 0px;/*再將content: 高度設定為0*/
}

正常畫面如下
CSS style 參考

body{ background: #FFFFFF; color: rgba(0,0,0,1.00); font-size: 13px;}
div{ width: auto; height: auto; margin:0; padding:10px 0 10px 10px; border: rgba(0,0,0,1.00) dotted 1px;}
ul{ display: block; list-style: none; margin: 0 0 10px 0; padding: 6px; border: rgba(0,0,255,1.00) dotted 1px;}
ul::after{ content: "."; color: rgba(255,255,255,0.00); clear: both; display: block; height: 0px;}
li{ float: left; display: block; width: auto; margin: 6px; padding: 0; min-height: 20px; border: rgba(255,0,0,1.00) dotted 1px;}
li:first-child{ width: 12px;}
li:last-child{ width: 92%;}
a{display:inline-block;}

HTML 參考

this is list comm.

this is list comm.

Tags - ul , after , 防止 , li , 錯亂

手機版 nav line-height 與 padding 間的問題

Thu, 04 Jan 2018 04:33:10 +0000

當我製作手機版網頁時，習慣性的沿用PC版的CSS定義
發現一個跟 padding 完全無關的問題（BUG）

HTML for mobile

首頁 home 商品清單 Category某某商品名稱

CSS for mobile

nav{
  width: 100%;
  background: url(../i/iconHomeGray-19.png) no-repeat left center;
  margin: 0 20px 0px 0;
  padding: 0 0 0 25px;
  color: rgba(0,0,0,1.00);
  font-size: 120%;
  line-height: 200%; /*記得不能加上行高*/
}
nav a{
  display: inline-block;
  background: rgba(101,109,168,0.70);
  margin: 0 5px 0 0;
  padding: 2px 4px; /*完全不為所動*/
  border-radius: 9px;
  color: rgba(255,255,255,0.90);
  line-height: 200%; /*設定這裡的行高也會有問題*/
}
nav span{
  display: inline-block;
}

正常的 CSS for mobile

nav{
  width: 100%;
  background: url(../i/iconHomeGray-19.png) no-repeat left center;
  margin: 0 20px 0px 0;
  padding: 0 0 0 25px;
  color: rgba(0,0,0,1.00);
  font-size: 120%;
  /* line-height: 200%; 去除行高*/
}
nav a{
  display: inline-block;
  background: rgba(101,109,168,0.70);
  margin: 0 5px 0 0;
  padding: 2px 6px; /*改變這個部分*/
  border-radius: 9px;
  color: rgba(255,255,255,0.90);
  /* line-height: 200%; 去除行高*/
}
nav span{
  display: inline-block;
}

Tags - mobile , nav , line-height , padding , bug

box-sizing 容器寬度的應用

Tue, 19 Dec 2017 01:37:12 +0000

box-sizing 似乎很不錯。但是做比較複雜的CSS設計時，有優點有缺點。
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算

▼box-sizing 將內容縮小至容器寬度（似乎高度沒有縮小）

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

▼CSS部分

▼HTML部分

width: 300px; height: 100px;
padding: 50px;

width: 300px; height: 100px;

padding: 50px;

Tags - box-sizing , 容器 , 寬度