2015年2月24日

Bootstrap

https://kkbruce.tw/
於 沒有留言:

向量圖庫

向量圖庫免費下載！設計師一定要知道的五個專業圖庫

工作必備七萬 clip art 小插圖！最大美工圖庫免費下載

網設必備《Fluid》iOS/Android扁平圖示下載
於 沒有留言:

2015年2月13日

HTML5+CSS3上課筆記－ CSS (cascading style sheets)

h1 { color:red;}

h1叫選擇器(selector)
color叫屬性(property)
red叫屬性值(value)
{}內叫宣告區塊(declaration block)
color:red;叫宣告(declaration)

CSS3 新增內容
新的選擇器 偽類選擇器、屬性選擇器、nth選擇器
區塊模式 box-sizing有新屬性 定義範圍更直覺
背景與邊框 全螢幕背景、漸層背景、圓角邊框、圖片邊框... 
新的圖片屬性 圖片陰影、圖片剪裁
新的文字屬性 英文字強失斷行、陰影
多欄版面配置 multiple columns
2D/3D變形、動畫


CSS套用方法
套用方式 優先順序
行內樣式
inline style		 直接寫在HTML的元素內
<span class="aaa" style="color:red;"></span> 		1
內部樣式
internal style sheet		 直接寫在HTML文件 放在<head>內
<style type="text/css">
 section {
    border:1px solid black !important;
}
</style>
加了!important 會變最最優先 無法被行內樣式取代 (也可把important 放在行內樣式中)		 2
外部樣式
external style sheet		 將所有CSS樣式宣告在其他檔案中 在<head>內
<link href="css/style.css" rel="stylesheet"> 		3
匯入套用
imported		 可以在html也能在css中 但較常用在css文件內的import
HTML中：
<style type="text/css">
 @import url(style.css);
</style>
CSS中：
 @import url(style.css);


CSS常用單位：
pt：印刷用字體尺寸
px：像素(pixel)
em：相對比例，對繼承父元素的比例
  例：
body {font-size:2em;}
h1 {font-size:1em;}

h1實際大小會是1em*2=2em

%：相對比例，對繼承父元素比例


*預設值為1em=100%=12pt=16px
*px和em的換算線上工具：http://pxtoem.com


CSS常用合併寫法：
*四邊數值合併：padding、margin

padding:1px 2px 3px 4px;
(padding-top padding-right padding-bottom padding-left)

padding:1px 2px 3px;
(padding-top padding-right&left padding-bottom)

padding:1px 2px;
(padding-top&buttom padding-right&left;

padding:1px;
(padding-top&bottom&right&left)


margin是與外的距

↑
← ★ →
↓

padding 是與內的距
↓
→ ←
↑


*背景合併
background:#ccc url('../image/bg.jpg') no-repeat fixed left top;
#ccc是background-color
url()是background-image
no-repeat是background-repeat
fixed是background-attachmen 是否要跟著捲軸動
left top是background-position 背景圖位置

順序：background-color | background-image | background-repeat | background-attachmen | background-position

background-repeat
repeat 重複 預設
repeat-x 橫向重複(x軸)
repeat-y 縱向重複(y軸)
no-repeat 不重複


background-attachmen
scroll 跟著頁面捲動 預設
fixed 背景固定


background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 直接指定位置
x%,y% 指定圖片%位置
x px, y px 指定圖片px位置



*邊框合併 border
border:1px solid #ccc;
順序：border-width | border-style | border-color

border-style
none 無
hidden 隱藏
dotted
點線
dashed
虛線
solid
實線
double
雙線
groove
立體
ridge
立體
inset
立體
outset
立體


*文字樣式合併 font
font: italic normal bold 12px/20px Verdana;
順序：font-style | font-varian | font-weight | font-size/font-height | font-family
省略後 至少要保留font-size和font-family

font-style：normal(一般)、
italic(斜體)
、oblique(字體傾斜)
font-variant：normal(一般)、small-caps(小寫)、groove(立體)
font-weight：normal(一般)、bold(粗體)、bolder(極粗體)、100~900(指定數值)


CSS3前綴
加了後browser才讀的到
Chrome/Safari: -webkit-
Firefox: -moz-
IE:-ms-
Opera: -o-

前綴檢查器：http://cssprefixer.appspot.com/ (寫好的css貼上去  會自行產生前綴)
也可用http://caniuse.com/ 按「Show all」看是否有減號(沒減號加了也沒用)


於 沒有留言:

HTML5+CSS3上課筆記－ HTML

HTML5 vs HTML4

HTML4寫法 HTML5寫法
<div id="header"></div> <header></header>
<div id="menu"></div> <nav></nav>
<div id="content"></div> <section></section>
<article></article>
<div id="footer"></div> <footer></footer>


HTML5常用的語意標籤：

<article> 可以獨立存在的內容，比section有更明確的語意(但沒有一定要article包section 或是相反)，代表獨立、完整的區塊。可能包含有header或footer
<section> 文件區塊
<aside> 不是頁面的主要內容區塊 移掉也不影響頁面閱讀功能
<footer> 頁面或區塊的底部
<header> 頁面或區塊的頂部 通常包含logo、網站標題、導覽列
<nav> 包含道覽連結的區塊
<figure> 文件中的圖片
<figcaption> 圖片說明
<video> 包含影片當及相關音樂檔、說明等
<audio> 包含聲音播放檔


以上在caniuse測試 ie9以上都可支援

其他元素列表可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/

如要讓ie8以下支援html5 可head中加入
  <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->


HTML head內容：
*CSS一定放在JS先

*<meta> 設定網頁文件相關資訊 屬性有charset、content、name
<meta name="description" content"網頁描述">  (網頁描述大約70字)
<meta name="keywords" content"關鍵字a, 關鍵字b, 關鍵字c">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> (viewport給行動裝置用)：
width：指定寬度(數字或「device-width」
height：指定高度(數字或「device-height」
initial-scale：第一次進入頁面的初始比例(最小0.25 最大5)
minimum-scale：允許縮小最小比例(最小0.25 最大5)
maximum-scale：允許放大最大比例(最小0.25 最大5)
user-scalable：是否允許使用者縮放(是為1 否為0)

*網站圖示icon 不一定要ico檔也可以gif 或png  size為16x16 、32x32


HTML body內容：
*每個網頁只能有一個h1

於 沒有留言:

2015年2月11日

Brackets 小小小教學

可直接不存檔 按右上角閃電在chrom直接預覽網頁
點選編輯中的tag或是css區塊 也會在chrome中反白


Quick Edit：選定某一 Element Tag，按下「Ctrl + E」會進入 Quick Edit 的狀態
ex 1.對著class name按 直接編輯其CSS
ex2.對著色碼按 直接編輯色碼


快速鍵：
開關 Live File Previwer：Ctrl + Alt + P



推薦外掛：Color Picker、emmet、Html Templates


Color Picker
 option+command+K 選擇顏色(可包含透明度)

emmt
1.輸入「div>p>a」按tab後 自動產生「<div><p><a></a></p></div>」
2.輸入「ul>li*3」按tab後 自動產生「<ul><li></li><li></li><li></li><ul>」
3.輸入「div>(header>ul>li*2>a)+footer>p」按tab後 自動產生
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
4.其他語法：http://docs.emmet.io/cheat-sheet/


Html Templates
開新檔案後，點選【Edit】 就會看到HTML Template的選項 在下拉選單中，就可選擇所需的HTML範本。


於 沒有留言:

2015年2月10日

投影片樣阪

http://slidehunter.com/
於 沒有留言:

2015年2月8日

HTML5+CSS3上課筆記－網站、工具

W3C SCHOOL



測試瀏覽器支援度


測試語法 在各瀏覽器的各版本是否支援 或是可否用前綴字使其支援


查看瀏覽器市佔率

icon產生(但 現在可用png圖檔就好 不定一定要ico)

px和em的換算


自動產生css前綴子
(會自動判斷 哪些屬性需要加哪些browser用到的前綴子)

hex和rgb的轉換


css.的generator

圖片邊框(border-img)產生器
(上傳圖 調整用的位子)

線上壓縮png
https://tinypng.com/

css3產生漸層的語法


符號編碼轉換 (ex >→ &# 或在css用\0000 在js用 \u0000)

google fonts


Font Awesome(作者將各種常用圖示做成字型)


文字編輯器
Brackets (可直接不存檔在chrom直接預覽網頁)
推薦外掛：Color Picker、emmet

Color Picker可以 option+command+K 選擇顏色(可包含透明度)

emmt可以
1.輸入「div>p>a」按tab後 自動產生「<div><p><a></a></p></div>」
2.輸入「ul>li*3」按tab後 自動產生「<ul><li></li><li></li><li></li><ul>」
3.對著class name按command E 直接編輯其CSS

Sublime
 有各種套件可下載
 安裝package control (https://packagecontrol.io/installation)
View→Show Console
把網站的程式碼貼上 enter 重新啟動

之後安裝各套件方式：
1.打開Package Control (Crrl +shift +p 或 command + shift +p)
2.輸入install package→enter
3.輸入套件名→enter
推薦套件：emmet、colorpicker、html boilerplate、cssformat、livereload(要撘配chrome套件)

















於 沒有留言:

2015年2月6日

ORA-00955: name is already used by an existing object

表示物件名稱已被用了

要如何查出

SELECT *
FROM all_objects
WHERE object_name = 'object的名稱'

descr all_objects
 Name           Null     Type      
-------------- -------- ------------
OWNER          NOT NULL VARCHAR2(30)
OBJECT_NAME    NOT NULL VARCHAR2(30)
SUBOBJECT_NAME          VARCHAR2(30)
OBJECT_ID      NOT NULL NUMBER    
DATA_OBJECT_ID          NUMBER    
OBJECT_TYPE             VARCHAR2(19)
CREATED        NOT NULL DATE      
LAST_DDL_TIME  NOT NULL DATE      
TIMESTAMP               VARCHAR2(19)
STATUS                  VARCHAR2(7)
TEMPORARY               VARCHAR2(1)
GENERATED               VARCHAR2(1)
SECONDARY               VARCHAR2(1)





如果覺得要刪掉

drop  剛查到的OBJECT_TYPE   object的名稱;
於 沒有留言:

2015年2月5日

[ORACLE] 檢視user現在對表有哪些權限

以 帳號登入(非sysdba)

SELECT * FROM USER_TAB_PRIVS;



descr USER_TAB_PRIVS
 Name       Null Type        
---------- ---- -------------
GRANTEE         VARCHAR2(128)  ←被grant的對象
OWNER           VARCHAR2(128)  ←table_name真正的owner
TABLE_NAME      VARCHAR2(128)
GRANTOR         VARCHAR2(128)
PRIVILEGE       VARCHAR2(40)  ←select或insert或..........
GRANTABLE       VARCHAR2(3)
HIERARCHY       VARCHAR2(3)
COMMON          VARCHAR2(3)
TYPE            VARCHAR2(24)  ←table或view或sequence或.....

於 沒有留言:

2015年2月4日

中文漢字 カナ 假名轉換

http://dokochina.com/katakana.php
於 沒有留言:

[ORACLE] create user


drop user 帳號 cascade;--可忽略 但建議使用

CREATE USER 帳號 IDENTIFIED BY 密碼
  DEFAULT TABLESPACE TABLESPACE名稱通常為USERS TEMPORARY TABLESPACE TEMP
  PROFILE DEFAULT ACCOUNT UNLOCK;

GRANT CONNECT TO 帳號;
GRANT RESOURCE TO 帳號;
GRANT CREATE SESSION TO 帳號;
於 沒有留言: