1.安裝google chrome
http://www.computernetworkingnotes.com/ubuntu-12-04-tips-and-tricks/how-to-run-chrome-as-root-user-in-ubuntu.html
2016年8月31日 星期三
2016年8月30日 星期二
NodeJS 教學
1.安裝nodejs
sudo apt-get install node
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-ubuntu-14-04-server
1-2 支援模組 Express
https://expressjs.com/en/guide/routing.html
2.範例
file upload
https://codeforgeek.com/2014/11/file-uploads-using-node-js/
chat room
http://socket.io/get-started/chat/
3.async
http://book.mixu.net/node/ch7.html
Z.安裝模組與使用
sudo apt-get install node
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-ubuntu-14-04-server
1-2 支援模組 Express
https://expressjs.com/en/guide/routing.html
2.範例
file upload
https://codeforgeek.com/2014/11/file-uploads-using-node-js/
chat room
http://socket.io/get-started/chat/
3.async
http://book.mixu.net/node/ch7.html
Z.安裝模組與使用
npm install formidable
var formidable = require("formidable");
2016年8月29日 星期一
SVG範例
1.動畫設計(SVG)-
https://css-tricks.com/guide-svg-animations-smil/
https://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_animation
http://interactjs.io/
http://svg.dabbles.info/snaptut-dragplugin
http://www.jqueryrain.com/?OQTEB5Jx
http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map/ 多層地圖
2.觸發動畫-
http://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event
http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques
http://stackoverflow.com/questions/31856890/svg-trigger-a-click-event-on-animatetransform-after-clicking-a-button?answertab=votes#tab-top
http://www.hongkiat.com/blog/svg-animations/
https://css-tricks.com/guide-svg-animations-smil/
https://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_animation
http://interactjs.io/
http://svg.dabbles.info/snaptut-dragplugin
http://www.jqueryrain.com/?OQTEB5Jx
http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map/ 多層地圖
2.觸發動畫-
http://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event
http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques
http://stackoverflow.com/questions/31856890/svg-trigger-a-click-event-on-animatetransform-after-clicking-a-button?answertab=votes#tab-top
http://www.hongkiat.com/blog/svg-animations/
2016年8月9日 星期二
CSS 設計技巧
1.置中- margin: auto;
2.漸層色塊
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%2051\%25\%2C\%20rgba\%28240\%2C47\%2C23\%2C1\%29\%2071\%25\%2C\%20rgba\%28231\%2C56\%2C39\%2C1\%29\%20100\%25\%29\%3B'
3.id的命名 不可以數字為開頭
4.css的style內部屬性設定時 須注意 先後次序
5.設定class內容的中心layout
margin: auto;
6.將物件放在垂直中心
style="line-height:80px;"
7.物件編排放在右側
float:right;width:40px
8.兩個物件排在同一列
<div style="display:inline-block"> A</div>
<div style="display:inline-block"> B</div>
2.漸層色塊
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%2051\%25\%2C\%20rgba\%28240\%2C47\%2C23\%2C1\%29\%2071\%25\%2C\%20rgba\%28231\%2C56\%2C39\%2C1\%29\%20100\%25\%29\%3B'
3.id的命名 不可以數字為開頭
4.css的style內部屬性設定時 須注意 先後次序
5.設定class內容的中心layout
margin: auto;
6.將物件放在垂直中心
style="line-height:80px;"
7.物件編排放在右側
float:right;width:40px
8.兩個物件排在同一列
<div style="display:inline-block"> A</div>
<div style="display:inline-block"> B</div>
2016年8月8日 星期一
CSS Menu 下拉式選單(drop down)
1.下拉式選單設定
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
text-decoration: none;
padding: 12px 16px;
display: block;
// 造成 下拉式選單 的影響
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
2. 直線動畫
http://bradsknutson.com/blog/css-sliding-underline/
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
text-decoration: none;
padding: 12px 16px;
display: block;
// 造成 下拉式選單 的影響
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
2. 直線動畫
http://bradsknutson.com/blog/css-sliding-underline/
2016年8月5日 星期五
2016年8月1日 星期一
網頁 重要設計元素 或 效果
1.image slider
2.cssmenu
3.banner
線上google 字體:
https://www.google.com/fonts/earlyaccess
字體下載
https://fonts.google.com/earlyaccess
SliderShow Example
http://www.menucool.com/slider/javascript-image-slider-demo2
http://www.menucool.com/slider/thumbnail-slider-demo-3
2.cssmenu
3.banner
線上google 字體:
https://www.google.com/fonts/earlyaccess
字體下載
https://fonts.google.com/earlyaccess
SliderShow Example
http://www.menucool.com/slider/javascript-image-slider-demo2
http://www.menucool.com/slider/thumbnail-slider-demo-3
訂閱：
文章 (Atom)