米煎的學習筆記 Mi-Jian's Note: 網頁設計

顯示具有 網頁設計 標籤的文章。顯示所有文章

2020年5月3日星期日

Bootstrap相關套件整理

適用Bootstrap的Modal
https://lunar.atomui.com/

Bootstrap多層分類選單
https://codepen.io/JacobLett/pen/jaaQYG

InputSpinner(購物車數量)
https://shaack.com/projekte/bootstrap-input-spinner/

Social Buttons for Bootstrap (社群按鈕)
https://lipis.github.io/bootstrap-social/

2019年8月10日星期六

素材, 視覺設計, 網頁設計

[視覺設計] 免費圖庫整理

Penny 凌晨1:42 沒有留言

以下整理我自己一些常用的免費圖庫

smartmockups
http://smartmockups.com/

FindA.Photo (以顏色與標籤分類)
http://finda.photo/

GRATISOGRAPHY
http://www.gratisography.com/

Unsplash
https://unsplash.com/

pexels
https://www.pexels.com/

pixabay
https://pixabay.com/

cc0photo
http://cc0photo.com/

cc0圖庫
https://visualhunt.com/

日本商用免費圖庫寫真素材
https://www.pakutaso.com/

日本CC0
https://www.photock.jp/

美食圖庫
https://www.foodiesfeed.com/

免摳圖庫
http://www.58pic.com/tupian/miankoutu-0-0-2.html

千圖網
http://www.58pic.com/

StockSnap CC 0圖片
https://stocksnap.io

日本生鮮食物、食材免費圖庫

http://www.sozai-page.com/index.html

日本免費照片素材

https://photo-ac.com/tw/

2017年12月31日星期日

素材, 網頁設計

2017年8月17日星期四

素材, 教學, 網頁設計

2017年8月15日星期二

教學, 網頁設計

[網頁設計] 切版數值設定

Penny 凌晨2:54 沒有留言

文件大小 1600*4000
左右留白 200px
一般文字大小 18px
主標題 54px
次標題 30px
nav高度 70px
版權 13px

[BOOTSTRAP]

.navbar

min-height:50px;

.container

padding-right: 15px;

padding-left: 15px;

.col-md-x

padding-right: 15px;

padding-left: 15px;

素材, 視覺設計, 網頁設計

[素材] 免費字型

Penny 凌晨2:50 沒有留言

免費字型下載網站：
https://www.free-fonts.com

2016年12月24日星期六

教學, 網頁設計

[網頁設計]書單推薦

Penny 晚上10:36 沒有留言

其實我很少在買書，因為之前買書也有踩到雷阿

網路上感覺寫得好好，實際買來看內容就.....

所以比較多的時候是google找範例練習練習。

but，以下推薦的書，都是我看過真心覺得幫助很大很實用的書。

推薦給大家囉！

2016年8月14日星期日

網頁設計, Bootstrap

[網頁設計] Bootstrap響應式Table表格

Penny 晚上7:40 沒有留言

參考網站：http://www.minwt.com/webdesign-dev/html/14066.html

2016年8月8日星期一

素材, 網頁設計

[網頁設計] Blogger樣板網站整理

Penny 晚上11:14 沒有留言

newbloggerthemes
http://newbloggerthemes.com/

btemplates
https://btemplates.com/

網頁設計, jquery

官網 http://vegas.jaysalvat.com/documentation/transitions/

1. 套件：Zepto.js、vegas.min.js
2. css：vegas.css
3. 初始化
$(function() {
$('body').vegas({
slides: [{
src: "images/banner.jpg"
}, {
src: "images/banner2.jpg"
}],
animation: 'kenburns'
});
});

以上範例都在menu_left /index3.html中

網頁設計, jquery

[網頁設計] 選單動畫jQuery套件

Penny 晚上9:24 沒有留言

以下範例都在menu_left /index.html中

ps.官網 http://git.blivesta.com/drawer/

1.套件：iscroll.js、drawer.min.js

2.css：drawer.css

3.HTML

<span class="sr-only">toggle navigation</span>

</button>

<li><a class="drawer-brand" href="#">Brand</a></li>

</ul>

</nav>

</header>

</main>

</body>

4.初始化

$(document).ready(function() {

$('.drawer').drawer();

});

網頁設計, jquery

[網頁設計] 圖片輪播jQuery套件

Penny 晚上9:15 沒有留言

以下範例都在321/index3.html中

1.套件：swiper.jquery.min.js

2. css：swiper.css

3.布局

<div>

</div>

</div>

</div>

4.指定swiper 容器尺寸:

.swiper-container, .swiper-slide {

width: 250px;

}

5.初始化文件

window.onload = function() {

var mySwiper = new Swiper('.swiper-container', {

//添加需要的选项:

pagination: '.swiper-pagination',

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

paginationClickable: true,

spaceBetween: 0,

centeredSlides: true,

autoplay: 2500,

autoplayDisableOnInteraction: false,

loop: true,

});

}

網頁設計, jquery

[網頁設計] 日期選擇器jQuery套件

Penny 晚上9:09 沒有留言

1、套件：bootstrap.min.js.
2、套件：moment.js
3、套件：bootstrap-datetimepicker.min.js
4、bootstrap-datetimepicker.css
5、$('#datetimepicker10').datetimepicker({
format: 'YYYY-MM-DD'
});

以上範例都在login/register.php中

網頁設計, Bootstrap, jquery

[網頁設計] 驗證欄位jQuery套件

Penny 晚上9:05 沒有留言

1、套件：jquery.validate.js
2、套件：cmxforms.js
3、套件：cmxforms.css
4、$("#commentForm").validate({
rules:{
repassword:{equalTo: '#password'}
},
errorPlacement: function(error, element) {
error.appendTo( element.parents(".control-group"))
}
});

註：原始為$("#commentForm").validate(); 即可，此為套用bootstrap之範例

以上範例都在login/register.php中

網頁設計, jquery

[網頁設計] 彈出視窗jQuery套件

Penny 晚上8:53 沒有留言

1.套件：sweetalert2
2.$(function() {
$('p').bind('click', function(event) {
swal({
title: 'jQuery HTML example',
html: $('<div>')
.addClass('some-class')
.text('jQuery is everywhere.')
})
);
})

以上無範例

1.套件：jquery.poptrox.min.js
2.撰寫js
$(function() {
var foo = $('#gallery');
foo.poptrox({
usePopupCaption: false
});
});

3.HTML
<div class="col-xs-8 col-md-8 hover" id="gallery">
<a href="https://youtu.be/nSJFveEL_38" data-poptrox="youtube,800x480">
<span>點我看更多</span>
<img src="images2/btn-08.jpg" class="img-responsive">
</a>
</div>

以上範例在321/index2.html中

網頁設計, jquery

[網頁設計] 物件黏住jQuery套件

Penny 晚上8:48 沒有留言

應用說明：滑鼠滑上去後，按鈕被黏住

1.套件：stickyElements
2.stickyElements('.item', {stickiness: 5,duration: 450});

以上範例都在comecloud中

網頁設計, Bootstrap, jquery

[網頁設計] menu固定在最上方jQuery套件

Penny 晚上8:41 沒有留言

應用說明：圖片放置在最上面，滑動至最上面後，menu固定在最上方

1.套件affix.js與bootstrap
2.設定 .affix { top: 0;width: 100%;}
3.<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="500">

以上範例都在comecloud中

網頁設計, jquery

[網頁設計] 滑下去後再執行動畫jQuery套件

Penny 晚上8:30 沒有留言

1.<script src="wow.js"></script>
2.<script>new WOW().init();</script>
3.<p class="wow flash">this is WOW.js</p>

以上範例都在comecloud中

網頁設計, jquery

[網頁設計] 區塊滑動jQuery套件

Penny 晚上8:26 沒有留言

1.套件：page-scroll.js (自己寫的)
2.滑動效果套件：jquery.easing.1.3.js

以上範例都在comecloud中

網頁設計, Bootstrap, jquery

[網頁設計] 記憶目前所在的頁面jQuery套件

Penny 晚上8:19 沒有留言

說明：Bootstrap 記憶目前所在的頁面 (Nav .active效果)

1.套件：The Scrollspy Plugin、Bootstrap
2.<body data-spy="scroll" data-target=".navbar" data-offset="50">
3.<a class="page-scroll" href="#section1">Services</a>
4.<div id="section1" class="container-fluid">

線上教學網址：

http://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp

http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

以上範例在comecloud中

2020年5月3日星期日

Bootstrap相關套件整理

2019年8月10日星期六

[視覺設計] 免費圖庫整理

2017年12月31日星期日

[網頁設計] 啟發設計靈感的網站

2017年8月17日星期四

超好用響應式Nav大合集

2017年8月15日星期二

[網頁設計] 切版數值設定

[素材] 免費字型

2016年12月24日星期六

[網頁設計]書單推薦

2016年8月14日星期日

[網頁設計] Bootstrap響應式Table表格

2016年8月8日星期一

[網頁設計] Blogger樣板網站整理

[網頁設計] 背景幻燈片jQuery套件

[網頁設計] 選單動畫jQuery套件

[網頁設計] 圖片輪播jQuery套件

[網頁設計] 日期選擇器jQuery套件

[網頁設計] 驗證欄位jQuery套件

[網頁設計] 彈出視窗jQuery套件

[網頁設計] 物件黏住jQuery套件

[網頁設計] menu固定在最上方jQuery套件

[網頁設計] 滑下去後再執行動畫jQuery套件

[網頁設計] 區塊滑動jQuery套件

[網頁設計] 記憶目前所在的頁面jQuery套件

熱門文章

文章分類

所有文章

2020年5月3日 星期日

2019年8月10日 星期六

2017年12月31日 星期日

2017年8月17日 星期四

2017年8月15日 星期二

2016年12月24日 星期六

2016年8月14日 星期日

2016年8月8日 星期一

熱門文章

文章分類

所有文章

2020年5月3日星期日

2019年8月10日星期六

2017年12月31日星期日

2017年8月17日星期四

2017年8月15日星期二

2016年12月24日星期六

2016年8月14日星期日

2016年8月8日星期一