記得筆者曾經寫過一篇「用 JavaScript 來做偽浮水印」，那時是用 JavaScript 來寫的，得經過計算才能把版權宣告的圖片放在右下角。現在筆者把整個效果用 jQuery 來改寫，並把原本要計算的版權宣告圖片位置換成 background-position 的方式來控制，這樣想放那就只要設定一下就好了。
我們的 HTML 就是很單純的圖片而已：
檢視原始碼 HTML
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
SQLite是遵守ACID的關聯式資料庫管理系統，它包含在一個相對小的C庫中。它是D.RichardHipp建立的公有領域項目。
不像常見的客戶端/伺服器結構範例，SQLite引擎不是個程序與之通信的獨立進程，而是連接到程序中成為它的一個主要部分。所以主要的通信協議是在程式語言內的直接API調用。這在消耗總量、延遲時間和整體簡單性上有積極的作用。整個資料庫（定義、表、索引和資料本身）都在宿主主機上存儲在一個單一的文件中。它的簡單的設計是通過在開始一個事務的時候鎖定整個資料文件而完成的。
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
今天我們要跟大家分享幾個製作滿版背景圖的方法。
現在先來確定一下我們的需求：
圖片必須剛好填滿瀏覽器不能留有縫細，也不能因為圖片太大而出現捲軸。
圖片可以隨著瀏覽器尺寸自動縮放。
圖片必須保持長寬比，不能變形。
要達成上面的需求，我們有以下的方法可以使用
使用CSS3 background-size 屬性
background-size 是css3 的屬性，用來定義背景圖片的尺寸。使用上可以直接指定長寬的數值或是縮放的比例；指定"contain"可以讓背景圖片自動縮放到填滿內容區域內的最大尺寸；指定"cover"可以讓背景圖片自動縮放到覆蓋內容區域的最小尺寸。可以參考w3c background-size的資訊
因為我們現在要做的是完整覆蓋瀏覽器的背景圖片，所以要使用”background-size:cover;”這個設定。使用方法如下：
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
很多人用BootStrap 圖片因寬度縮小看起來很高興
但是縮得太小的時候，高度會達到最小高度因此無法往下縮
會造成圖片變形，如圖
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
在使用CSS的時候，用某些特效能讓網站更有活力，如果運用JQUERY又太過複雜
不過今天作者看到某網站的運用不錯，於是就利用CSS也做了
可以看到下圖，滑鼠未移置圖片範例
 
用CSS寫下列代碼
- .chimga{
- margin:10px;
- width:100%;
- height:100%;
- box-sizing:border-box;
- overflow:hidden;
- display:block;
- }
- .chimga:hover img{
- -moz-transform:scale(1.3) rotate(2deg);
- -webkit-transform:scale(1.3) rotate(2deg);
- -o-transform:scale(1.3) rotate(2deg);
- -ms-transform:scale(1.3) rotate(2deg);
- transform:scale(1.3) rotate(2deg);
- }
複製代碼
|
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
指定背景圖片大小
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain
- 預設值為auto，即背景圖片原始長寬。
- length指定圖片具體大小的數值，不允許負值。
- percentage以背景圖所在元素的百分比指定背景圖大小，不允許負值。
- length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另一個數值(高)預設值為auto，此時高度以背景圖原始寬高比例，自動縮放。
- cover主要用於背景圖小於所在的內容，而背景圖又不適合使用repeat，此時就可以採用cover的方式，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。
- contain與cover正好相反，主要用於背景圖大於所在內容，但卻需要將背景圖完整呈現，此時就可採用contain的方式，使背景圖縮小至內容的大小。
效果呈現為了讓呈現效果有明顯的區別，範例中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
再用bootstrap時，常常會遇到一些小細節須要修改
常常為了一些小問題找半天
GOOGLE半天也沒看到有人說明此問題
所以就只好自己來了
找到bootstrap.css
加入
- @media (max-width: 480px) {
- #navbar {
- margin-top:45px;
- }
- }
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
範例圖片
CSS
- body{ text-align:center;}
- *{ margin:0; padding:0;}
- img{ border:none;}
- #container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
- #loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
- #imageOptions{ float:left;}
- #imageOptions li{ list-style:none; margin:10px;}
- .loading{ background:url(images/spinner.gif) center center no-repeat;}
- h3{ line-height:500px;}
|
NetYea 網頁設計 發表在 痞客邦 留言(1) 人氣()
前台看到 相關商品
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
最近Cpanel常常在升級從PHP 5 生到PHP 7 自動設定
原本安裝好的 OPENCART 3.0.2
變得不能上傳
點擊上傳圖片沒反應
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
說明:在Linux下把excel數據導入到mysql數據庫中,這實在是很搞笑的一個活動!幾乎很少有程序員研究過這個問題吧?如此變態的問題,估計我是第一個研究的!呵呵,完全是自找苦吃~~,但是今天完了這項太有挑戰性的工作!
先清理一下思路先,~~
首先:需要把文件上傳到服務器上
然後:讀取excel數據列顯示出來
然後:讓用戶選擇字段的對應關係
然後:提交數據,讀取字段的對應關係
最後:批量導入數據,刪除臨時文件
一共是以上五步驟!我們一步步分析~~~
第一步:下載附件中的phpexcelparser4.rar ,這個文件是上傳excel盜服務器上並以web形式展示出來的!這個一般沒有問題的!問題是程序的做法是把表存為臨時表而沒有真正保存下來,所以首先要更改程序代碼為
-
- //uc轉換成html
- function uc2html($str) {
- $ret = '';
- for( $i=0; $i<strlen($str)/2; $i++ ) {
- $charcode = ord($str[$i*2])+256*ord($str[$i*2+1]);
- // $ret .= '&#'.$charcode;
- if($charcode<127)
- $ret .=chr($charcode);
- else
- $ret .= iconv("utf-8","utf-8",u2utf8($charcode));
- }
- return $ret;
- }
- //html轉成utf8
- function u2utf8($c) {
- $str="";
- if ($c < 0x80) {
- $str.=$c;
- } else if ($c < 0x800) {
- $str.=chr(0xC0 | $c>>6);
- $str.=chr(0x80 | $c & 0x3F);
- } else if ($c < 0x10000) {
- $str.=chr(0xE0 | $c>>12);
- $str.=chr(0x80 | $c>>6 & 0x3F);
- $str.=chr(0x80 | $c & 0x3F);
- } else if ($c < 0x200000) {
- $str.=chr(0xF0 | $c>>18);
- $str.=chr(0x80 | $c>>12 & 0x3F);
- $str.=chr(0x80 | $c>>6 & 0x3F);
- $str.=chr(0x80 | $c & 0x3F);
- }
- return $str;
- }
-
- if (trim($_POST["cmd"])=="upload")
- {
- $err_corr = "Unsupported format or file corrupted";
- $excel_file_size;
- $excel_file = $_FILES['excel_file'];
- $uploadservername=$UploadAbsPath."tmpexcel/".$_FILES['excel_file']['name'];
- echo($uploadservername);
- if (!is_writeable($UploadAbsPath."tmpexcel/"))
- {
- echo "目錄不可寫!"; exit;
- }
- else
- {
- echo "目錄可寫!";
- }
- if (move_uploaded_file($_FILES['excel_file']['tmp_name'], $uploadservername))
- {
- echo("上傳成功");
- }
- else
- {
- echo("上傳失敗");
- }
- $excel_file=$uploadservername;
- //if( $excel_file )
- // $excel_file = $_FILES['excel_file']['tmp_name'];
-
-
- if( $excel_file == '' ) fatal("No file uploaded");
-
-
- $exc = new ExcelFileParser("debug.log", ABC_NO_LOG);//ABC_NO_LOG ABC_VAR_DUMP);
- //echo($excel_file."|");
-
- $style = $_POST['style'];
- if( $style == 'old' )
- {
- $fh = @fopen ($excel_file,'rb');
- if( !$fh ) fatal("No file uploaded");
- if( filesize($excel_file)==0 ) fatal("No file uploaded");
- $fc = fread( $fh, filesize($excel_file) );
- @fclose($fh);
- if( strlen($fc) < filesize($excel_file) )
- fatal("Cannot read file");
-
- $time_start = getmicrotime();
- $res = $exc->ParseFromString($fc);
- $time_end = getmicrotime();
- }
- elseif( $style == 'segment' )
- {
- $time_start = getmicrotime();
- $res = $exc->ParseFromFile($excel_file);
- $time_end = getmicrotime();
- }
-
-
- switch ($res) {
- case 0: break;
- case 1: fatal("Can't open file");
- case 2: fatal("File too small to be an Excel file");
- case 3: fatal("Error reading file header");
- case 4: fatal("Error reading file");
- case 5: fatal("This is not an Excel file or file stored in Excel < 5.0");
- case 6: fatal("File corrupted");
- case 7: fatal("No Excel data found in file");
- case 8: fatal("Unsupported file version");
-
-
- default:
- fatal("Unknown error");
- }
-
-
- /*
- print '<pre>';
- print_r( $exc );
- print '</pre>';
- exit;
- */
-
-
- show_time();
-
-
- echo <<<LEG
- <b>Legend:</b><br><br>
- <form name='doform' action='' method='post'>
- <input type='hidden' name='action' value='do'>
- <input type='hidden' name='excel_file' value=$excel_file>
- <input type='hidden' name='style' value=$style>
- <table border=1 cellspacing=0 cellpadding=0>
- <tr><td>Data type</td><td>Description</td></tr>
- <tr><td class=empty> </td><td class=index>An empty cell</td></tr>
- <tr><td class=dt_string>ABCabc</td><td class=index>String</td></tr>
- <tr><td class=dt_int>12345</td><td class=index>Integer</td></tr>
- <tr><td class=dt_float>123.45</td><td class=index>Float</td></tr>
- <tr><td class=dt_date>123.45</td><td class=index>Date</td></tr>
- <table>
- <br><br>
-
-
- LEG;
- /*
- print "<pre>";
- print_r ($exc->worksheet);
- print_r($exc->sst);
- print "</pre>";
- */
- for( $ws_num=0; $ws_num<count($exc->worksheet['name']); $ws_num++ )
- {
- print "<b>Worksheet: \"";
- if( $exc->worksheet['unicode'][$ws_num] ) {
- print uc2html($exc->worksheet['name'][$ws_num]);
- } else
- print $exc->worksheet['name'][$ws_num];
-
-
- print "\"</b>";
- $ws = $exc->worksheet['data'][$ws_num];
-
-
- if( is_array($ws) &&
- isset($ws['max_row']) && isset($ws['max_col']) ) {
- echo "\n<br><br><table border=1 cellspacing=0 cellpadding=2>\n";
-
-
- print "<tr><td> </td>\n";
- for( $j=0; $j<=$ws['max_col']; $j++ ) {
- print "<td class=index> ";
- if( $j>25 ) print chr((int)($j/26)+64);
- //這裡要顯示一個下拉列表來顯示數據
- //注意是循環數據<br />
- echo("\n<select name='".$j."'>");
- echo("\n<option value='0'>不選擇</option>");
- echo("\n<option value='costomernum'>客戶編號</option>");
- echo("\n<option value='name'>客戶姓名</option>");
- echo("\n<option value='phone1'>電話1</option>");
- echo("\n<option value='phone2'>電話2</option>");
- echo("\n<option value='address1'>地址1</option>");
- echo("\n<option value='address2'>地址2</option>");
- echo("\n<option value='company'>公司</option>");
- echo("\n<option value='levelc'>職稱</option>");
- echo("\n<option value='ps'>備註</option>");
-
- echo("</select>");
- print "</td>";
- }
-
-
- print "<tr><td> </td>\n";
- for( $j=0; $j<=$ws['max_col']; $j++ ) {
- print "<td class=index> ";
- if( $j>25 ) print chr((int)($j/26)+64);
- print chr(($j % 26) + 65)." 列名</td>";
- }
-
-
-
- //表頭輸出完畢
- if ($ws['max_row']>9)
- {
- $shownum=9;
- }
- else
- {
- $shownum=$ws['max_row'];//只輸出前10條數據
- }
- for( $i=0; $i<=$shownum; $i++ ) {
- print "<tr><td class=index>".($i+1)."</td>\n";
- if(isset($ws['cell'][$i]) && is_array($ws['cell'][$i]) ) {
- for( $j=0; $j<=$ws['max_col']; $j++ ) {
-
-
- if( ( is_array($ws['cell'][$i]) ) &&
- ( isset($ws['cell'][$i][$j]) )
- ){
-
-
- // print cell data
- print "<td class=\"";
- $data = $ws['cell'][$i][$j];
-
-
- $font = $ws['cell'][$i][$j]['font'];
- $style = " style ='".ExcelFont::ExcelToCSS($exc->fonts[$font])."'";
-
-
- switch ($data['type']) {
- // string
- case 0:
- print "dt_string\"".$style.">";
- $ind = $data['data'];
- if( $exc->sst['unicode'][$ind] ) {
- $s = uc2html($exc->sst['data'][$ind]);
- } else
- $s = $exc->sst['data'][$ind];
- if( strlen(trim($s))==0 )
- print " ";
- else
- print $s;
- break;
- // integer number
- case 1:
- print "dt_int\"".$style."> ";
- print $data['data'];
- break;
- // float number
- case 2:
- print "dt_float\"".$style."> ";
- echo $data['data'];
- break;
- // date
- case 3:
- print "dt_date\"".$style."> ";
-
-
- $ret = $data[data];//str_replace ( " 00:00:00", "", gmdate("d-m-Y H:i:s",$exc->xls2tstamp($data[data])) );
- echo ( $ret );
- break;
- default:
- print "dt_unknown\"".$style."> ";
- break;
- }
- print "</td>\n";
- } else {
- print "<td class=empty> </td>\n";
- }
- }
- } else {
- // print an empty row
- for( $j=0; $j<=$ws['max_col']; $j++ )
- print "<td class=empty> </td>";
- print "\n";
- }
- print "</tr>\n";
- }
-
-
- echo "</table><br>\n";
- } else {
- // emtpty worksheet
- print "<b> - empty</b><br>\n";
- }
- print "<br>";
-
-
- }
- echo("<input type='submit' name='Submit' value='轉換' />");
- echo("</form>");
- /* print "Formats<br>";
- foreach($exc->format as $value) {
- printf("( %x )",array_search($value,$exc->format));
- print htmlentities($value,ENT_QUOTES);
- print "<br>";
- }
-
-
- print "XFs<br>";
- for( $i=0;$i<count($exc->xf['format']);$i++) {
- printf ("(%x)",$i);
- printf (" format (%x) font (%x)",$exc->xf['format'][$i],$exc->xf['font'][$i]);
-
-
- print "<br>";
- }
- */
- }
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
因為項目中需要用到圖表生成，所有Google了下，找到了這個插件，順帶寫了個DEMO。點擊跳轉官網
先上三個圖，分別是曲線、柱狀、扇形。
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
在搜尋引擎不停改版網頁不得不進入https
所以後台編輯器圖片上傳也變得不能用了
不得已又請教了谷哥大神
多方嘗試後，找到
CKeditor 4.11.1 網頁編輯器與CKfinder 2.6.2.1 圖片上傳可以用
檔案下載了以後，覆蓋之前檔案
找到 ckeditor/config.js
- CKEDITOR.editorConfig = function( config ) {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- // config.uiColor = '#AADC6E';
- }
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
資料庫往往是有看沒有懂
圖解秒懂SQL語言
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
無論是使用無名、Pixnet、Xuite或Wordpress...等平台，在管理後台新增文章，都會有一個很像Word的編輯器，透過此編輯器就可輕鬆撰寫文章，並且還可以加粗體、變換字體顏色、超連結....與圖片上傳等功能，即便完全不懂任何的HTML語法，也可編輯出一個漂亮的文章頁面出來，並且邊製作還會邊顯示結果，這是個相當方便的功能，而這麼棒的功能難不成要自已寫，寫完不只天黑可能都爆肝了，所以要多加善用資源，今天梅干就來分享一個好用的即見即所得HTML文章編輯器CKeditor，與CKfinder上傳元件讓編輯器不只單單可編輯，同時還可上傳檔案甚至直瀏覽伺器服中的檔案，且完全不用寫任何的程式碼，只要設定一下，立即就打造自已專屬的文章編輯器囉！
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
cxSelect 是基於jQuery 的多級聯動菜單插件，適用於省市、商品分類等聯動菜單。
列表數據通過AJAX 獲取，也可以自定義，數據內容使用JSON 格式。
同時兼容Zepto，方便在移動端使用。
國內省市縣數據來源：basecss/cityData Date: 2014.03.31
全球主要城市數據來源：整理國內常用網站和軟件Date: 2014.07.29
版本：jQuery的V1.7 +的Zepto V1.0 +jQuery的cxSelect V1.4.0
使用方法载入 JavaScript 文件
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
在數據統計和分析業務中，有時會遇到客戶需要在一個圖表中將柱狀圖、餅狀圖、曲線圖的都體現出來，即可以從柱狀圖中看出具體數據、又能從曲線圖中看出變化趨勢，還能從餅狀圖中看出各部分數據比重。Highcharts可以輕鬆實現三圖合一的效果。
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
查看演示 下載檔案
簡要教程
sortableJs是一款帶排序功能的js masonry瀑布流插件。sortableJs能夠使元素以卡片形式顯示，並以masonry瀑布流方式進行佈局，通過點擊分類按鈕，可以將卡片按指定的方式動態排序。
使用方法
在頁面中引入sortable.min.css和sortable.min.js文件。
- <link rel="stylesheet" href="path/to/sortable.min.css">
- <script src="path/to/sortable.min.js"></script>
-
|
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
jQuery分類過濾和排序佈局插件-Isotope，jquery-isotope
Isotope是一款效果非常神奇的元素分類過濾和排序佈局jQuery插件。Isotope是Masonry佈局的作者David DeSandro的一款力作，該分類過濾和排序插件允許你以非常簡單和炫酷的方式來隱藏和顯示元素，以及對元素按照指定的規則進行排序。
Isotope可以設置多種佈局方式：masonry佈局、水平佈局、垂直佈局、適合行佈局、適合列佈局等等。
注意：Isotope不是完全免費的軟件。用於商業用途時需要向作者購買。作為非商業用途使用時，在遵循GPL v3 License 規範的前提下，你可以自由使用該插件。
NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()
