-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
1 lines (1 loc) · 36.5 KB
/
index.html
1
<!-- build time:Sun May 23 2021 15:10:10 GMT+0800 (GMT+08:00) --><!DOCTYPE html><html class="theme-next pisces use-motion" lang="zh-tw"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="google-site-verification" content="9YRVJWfHbObIN6b-iMBsGjc-6c7lPWb6Hkqg7nb_-Xk"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4"><link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo, NexT"><meta property="og:type" content="website"><meta property="og:title" content="mancen's Blog"><meta property="og:url" content="https://mancen.github.io/index.html"><meta property="og:site_name" content="mancen's Blog"><meta property="og:locale" content="zh-tw"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="mancen's Blog"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Pisces",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!1,onmobile:!1},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://mancen.github.io/"><title>mancen's Blog</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-111171705-3"></script><script>function gtag(){dataLayer.push(arguments)}var host=window.location.hostname;"localhost"!==host&&(window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-111171705-3"))</script></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-tw"><div class="container sidebar-position-left page-home"><div class="headband"></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">mancen's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">我們能把握的，只有每一個現在~</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首頁</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>關於</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>標籤</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分類</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>歸檔</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>檢索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2021/05/22/Javascript-AJAX/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2021/05/22/Javascript-AJAX/" itemprop="url">Javascript AJAX</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2021-05-22T15:32:12+08:00">2021-05-22 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2021/05/22/Javascript-AJAX/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/05/22/Javascript-AJAX/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>什麼是AJAX</h2><p>AJAX是一種撰寫JavaScript的技巧，可以在不更新網頁或重新載入的情況下，及時從後端伺服器取得資料的方法。常見的情境有： - 在註冊帳號的頁面檢查與判斷使用者輸入資料是否與資料庫中已存在的使用者重複 - 電商網站的消費者將商品加入購物車時，即時與資料庫確認商品庫存是否足夠等等 - 在google搜尋中輸入關鍵字時，及時跳出來的搜尋建議</p><p></p><div class="post-button text-center"><a class="btn" href="/2021/05/22/Javascript-AJAX/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/10/22/在GCP上架設Wordpress網站/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/10/22/在GCP上架設Wordpress網站/" itemprop="url">在GCP上架設Wordpress網站</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-10-22T23:34:11+08:00">2020-10-22 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/wordpress/" itemprop="url" rel="index"><span itemprop="name">wordpress</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/10/22/在GCP上架設Wordpress網站/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/10/22/在GCP上架設Wordpress網站/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><p>這裡使用Google 所提供的 Google Cloud Platform 雲端主機服務，也是俗稱的GCP主機來架設wordpress網站，目前GCP提供90天內300美金的試用額度，剛好可以來體驗一下。</p><p></p><div class="post-button text-center"><a class="btn" href="/2020/10/22/在GCP上架設Wordpress網站/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/10/21/Git-分支-branch/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/10/21/Git-分支-branch/" itemprop="url">Git 分支 (branch)</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-10-21T21:19:00+08:00">2020-10-21 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/git/" itemprop="url" rel="index"><span itemprop="name">git</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/10/21/Git-分支-branch/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/10/21/Git-分支-branch/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>Git 分支 (branch)</h2><h2>為什麼要用分支？</h2><ul><li>多人協作時，不可能都在 master</li><li>可以讓 master 都是正式版資料，可以開分支來做測試或開發，藉此不影響正式主機分支</li></ul><p></p><div class="post-button text-center"><a class="btn" href="/2020/10/21/Git-分支-branch/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/10/21/Git-遠端-Repository-操作/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/10/21/Git-遠端-Repository-操作/" itemprop="url">Git 遠端 Repository 操作</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-10-21T21:09:31+08:00">2020-10-21 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/git/" itemprop="url" rel="index"><span itemprop="name">git</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/10/21/Git-遠端-Repository-操作/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/10/21/Git-遠端-Repository-操作/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h3>常用環境設定</h3><ul><li>編輯器更換：git config --global core.editor "code --wait"</li><li>Git 縮寫：<ul><li>$ git config --global alias.co checkout $ git config --global alias.br branch $ git config --global alias.st status $ git config --global alias.ci commit (自訂指令的縮寫)</li></ul></li></ul><p></p><div class="post-button text-center"><a class="btn" href="/2020/10/21/Git-遠端-Repository-操作/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/10/21/Git & GitHub 入門/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/10/21/Git & GitHub 入門/" itemprop="url">Git & GitHub 入門</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-10-21T20:07:26+08:00">2020-10-21 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/git/" itemprop="url" rel="index"><span itemprop="name">git</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/10/21/Git & GitHub 入門/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/10/21/Git & GitHub 入門/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>Git & GitHub 入門</h2><h3>為什麼要學 Git ？</h3><ul><li>Git 是程式碼版本控制軟體</li><li>用網頁版型介紹用了 Git 的差異</li></ul><p></p><div class="post-button text-center"><a class="btn" href="/2020/10/21/Git & GitHub 入門/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/04/26/切圖技巧/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/04/26/切圖技巧/" itemprop="url">切圖技巧</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-04-26T17:49:43+08:00">2020-04-26 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/HTML-css/" itemprop="url" rel="index"><span itemprop="name">HTML & css</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/04/26/切圖技巧/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/04/26/切圖技巧/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>切圖小工具</h2><p>由於Photoahop免費試用只有7天，因此採用開源軟體GIMP來做切圖，雖然GIMP的切片工具沒有photoshop方便和強大，但對於資源有限的人來說還算堪用。</p><p></p><div class="post-button text-center"><a class="btn" href="/2020/04/26/切圖技巧/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/04/17/SEO策略入門/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/04/17/SEO策略入門/" itemprop="url">SEO策略入門</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-04-17T10:35:13+08:00">2020-04-17 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Lecture/" itemprop="url" rel="index"><span itemprop="name">Lecture</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Lecture/SEO/" itemprop="url" rel="index"><span itemprop="name">SEO</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/04/17/SEO策略入門/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/04/17/SEO策略入門/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>SEO規劃重點</h2><p>SEO在規劃時有以下的重點，在網站建置時要把前後台關於SEO的技術規劃納入評估範圍，在規劃內容時要有TDH的相關規劃，後續要定期優化關鍵字與TDH內容，並定期提交sitemap且定期追蹤相關關鍵字的成效。</p><p></p><div class="post-button text-center"><a class="btn" href="/2020/04/17/SEO策略入門/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/04/11/網頁排版-絕對定位與相對定位/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/04/11/網頁排版-絕對定位與相對定位/" itemprop="url">網頁排版 - 絕對定位與相對定位</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-04-11T11:10:53+08:00">2020-04-11 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/HTML-css/" itemprop="url" rel="index"><span itemprop="name">HTML & css</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/04/11/網頁排版-絕對定位與相對定位/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/04/11/網頁排版-絕對定位與相對定位/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>絕對定位/相對定位</h2><p>在網頁排版中，當需要讓元素重疊時，就可以使用<code>position</code>屬性，讓元素可以依據父元素的範圍去進行定位，並可隨瀏覽器視窗而調整。屬性的值有<code>absolute</code>、<code>relative</code>來定義元素的位置。</p><p>position屬性參數值如下： - static → 預設值，不會特別被定位 - relative → 除非加上額外屬性(ex. 上右下左距離)，否則也不會特別被定位 - fixed - absolute</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position" target="_blank" rel="noopener">MDN關於position</a> <a href="https://zh-tw.learnlayout.com/position.html" target="_blank" rel="noopener">關於position屬性文章</a></p><p></p><div class="post-button text-center"><a class="btn" href="/2020/04/11/網頁排版-絕對定位與相對定位/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/04/03/Flex-網頁排版技巧/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/04/03/Flex-網頁排版技巧/" itemprop="url">Flex 網頁排版技巧</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-04-03T15:19:23+08:00">2020-04-03 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/HTML-css/" itemprop="url" rel="index"><span itemprop="name">HTML & css</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/04/03/Flex-網頁排版技巧/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/04/03/Flex-網頁排版技巧/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>flex排版</h2><p>flexbox，又稱css3彈性盒子，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。</p><p>其中需要了解的三個特性；</p><ol><li>外容器與內元件的相關屬性</li><li>軸線與方向</li><li>對齊的方法</li></ol><p><a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" target="_blank" rel="noopener">MDN對於flex的介紹</a></p><p></p><div class="post-button text-center"><a class="btn" href="/2020/04/03/Flex-網頁排版技巧/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://mancen.github.io/2020/04/02/CSS-網頁容器/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Cen"><meta itemprop="description" content><meta itemprop="image" content="/uploads/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="mancen's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2020/04/02/CSS-網頁容器/" itemprop="url">CSS 網頁容器</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">發表於</span> <time title="創建於" itemprop="dateCreated datePublished" datetime="2020-04-02T21:26:59+08:00">2020-04-02 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分類於</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/HTML-css/" itemprop="url" rel="index"><span itemprop="name">HTML & css</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/2020/04/02/CSS-網頁容器/#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/04/02/CSS-網頁容器/" itemprop="commentCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><h2>網頁容器的概念</h2><p>所有網頁的排版都是有關於容器的設計，在大多數的網頁中，我們都可以將其分割成許多的容器，而在頁面的呈現通常都是由大容器去包著小容器，因此，在學習網頁排版前，需要先釐清的是關於容器的特性與概念。</p><p><img src="/2020/04/02/CSS-網頁容器/container.jpg" title="將gooogle頁面的網頁容器視覺化"></p><p></p><div class="post-button text-center"><a class="btn" href="/2020/04/02/CSS-網頁容器/#more" rel="contents">閱讀全文 »</a></div><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><section class="site-overview-wrap sidebar-panel sidebar-panel-active"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="/uploads/avatar.png" alt="Cen"><p class="site-author-name" itemprop="name">Cen</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">34</span> <span class="site-state-item-name">文章</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/index.html"><span class="site-state-item-count">12</span> <span class="site-state-item-name">分類</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/index.html"><span class="site-state-item-count">43</span> <span class="site-state-item-name">標籤</span></a></div></nav></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-user"></i> </span><span class="author" itemprop="copyrightHolder">Cen - 轉載文章請附上作者(Cen)及原文連結(Url)</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script><script id="dsq-count-scr" src="https://mancen-blog.disqus.com/count.js" async></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.json";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var $=[];0!=g.length;){var C=g[g.length-1],m=C.position,x=C.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),$.push(r(p,w,y,g))}$.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&($=$.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",$.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body></html><!-- rebuild by neat -->