標籤：其他 pre 取資料 引用 position set rgb roc form
從零開始的網站架設[2]
哇，今天就從一個模板開始說起吧。上次腦抽下了一個模板，模板大概可以總結成幾個部分：
（模板在這裡：需要學習的可以下載哦~下載後24小時刪除哦~）
https://github.com/RockDeria/300shop.git
css檔案夾中的都是樣式檔案，fonts應該是字型資源檔案，images是圖片資源檔，js是指令檔夾，index.html是我們的主靜態介面。（可以看做網頁的入口）
外部的style.css 定義了絕大部分的自訂樣式。
1.在html靜態頁面中引入css等樣式資源檔（包括一些庫的和自己的）
類似程式設計語言，需要引入一些包、庫一樣。這些任務需要在html的<head>標籤中進行，如
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>秋月愛莉的粗點心店</title><!-- Google Font --><link href=‘http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800‘ rel=‘stylesheet‘ type=‘text/css‘><link href=‘http://fonts.googleapis.com/css?family=Montserrat:400,700‘ rel=‘stylesheet‘ type=‘text/css‘><!-- Font Awesome --><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!-- Preloader --><link rel="stylesheet" href="css/preloader.css" type="text/css" media="screen, print"/><!-- Icon Font--><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="css/owl.carousel.css"><link rel="stylesheet" href="css/owl.theme.default.css"><!-- Animate CSS--><link rel="stylesheet" href="css/animate.css"><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- Style --><link href="css/style.css" rel="stylesheet"><!-- Responsive CSS --><link href="css/responsive.css" rel="stylesheet"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --><!--[if lt IE 9]><script src="js/lte-ie7.js"></script><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--></head>
上述代碼從上到下可以粗略的觀察到：
[1]設定了一些編碼和一些基本的參數
[2]設定了網頁標籤上所需要顯示的標題(<title>標籤)
[3]載入了一系列的樣式，主要包括字型、動畫、表徵圖和其他樣式等等。
[4]末端被注掉的部分疑似為適應瀏覽器所作出的預先載入js指令碼的執行。
2.搭建頁面
這些簡單了先瞭解下就好，先不考慮太多。接下來就是網頁的主題部分了，這些基本上都在<body>標籤中：
<div id="preloader"><div id="status"> </div></div>
這東西，懷疑是載入過程中的那個載入動畫。
<header id="HOME" style="background-position: 50% -125px;">
這個是網頁的上端部分，id是HOME。經實證，如果一個連結(如href)的路徑標記為 #ID 就可以點擊後跳轉到網頁的對應位置。
比如上述的HOME，我們如果寫一個連結 <a herf = "#HOME" /> 那麼點擊後就會跳轉到對應的HOME模組的位置。
靜態頁面中用到最多的就是div了，div的主要屬性就是class，而class的第一個參數貌似就是樣式，比如我們想要修改一個div中的
一個段落的字型的顏色。
例如：
<div class="home_text wow fadeInLeft animated">
那麼在style中搜尋 home_text 不出意外會找到這個樣式，然後修改對應的 p 或者 h 的顏色rgb即可。
.home_text{padding-top: 210px;padding-bottom: 210px;}.home_text h2{color: #F19EC2;font-size: 40px;text-transform: uppercase;letter-spacing: 13px;}.home_text p{color: #F19EC2;font-size: 14px;text-transform: uppercase;}
class 除了樣式屬性 後邊有的時候還會加一些別的參數，有些是用來確定位置位移的，有的是一些加了很多特技上去 duang。
位移的貌似是哪個庫裡邊的庫函數，但是一般的自訂特技都是可以找到的，比如某些動畫之類的。
<div class="single_service wow fadeInUp" data-wow-delay="1s">
如上所示，single是樣式id wow是一個特技（這是一個比較火的網頁特效，有對應的官網感興趣的可以去看看），fadeInUp是一個動畫。
@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
暫時看不懂，先通過單詞理解是漸漸浮現吧，後邊的參數是1秒，也就是說1秒內由隱形變成可見。貌似這些也都是wow的特技？
【加很多特技上去，網頁會變得很黑，很亮，很油】
如果需要列表來顯示一系列的div等，則需要用row來標準格式：
<div class="row">
row代表一行，所有row中的標籤都會擠在一行裡邊。
<div class="col-md-12 text-center">
這個貌似是bootstrap的庫。col代表列- 12是撐滿整個一行。bootstrap的規則我記得是一行12列。也就是說 可以用col-md-12來填滿一行，
也可以用三個col-md-4來填滿一行
一般的布局就如同上述那樣，可以保證網頁的構造不那麼奇葩。非常建議使用三個col-md-4來撐滿一行，因為在手機上開啟的時候，
col-md-4正好撐滿一行，不會折行。跨裝置效果比較好。
網頁的最後還有一個滑動的小點點的特技。
<div class="owl-carousel">
這應該也是某個庫裡邊的特技，直接拿來用就好。
在body的最後，按照慣例是引用所有的js檔案，例如
<script src="js/my.js"></script>
正好此時也簡單的寫一下如何調起js指令碼，比如我們在js檔案夾下建立一個檔案 my.js
可以在其中寫一個方法：
function js_my() {alert("11111");}
然後在body的末端引入這個js
<script src="js/my.js"></script>
然後提供一個最簡單的點擊訪問這個js函數的方法。比如我們點擊一個a標籤：
<li><a href="javascript:void(0);" onclick="js_my()">彈出alert</a></li>
這樣就可以調起這個js方法了。
下一步就是通過動態js指令碼來動態添加對應的表格div數量以及控制p的內容。還有通過ajax訪問php服務端指令碼
擷取資料了。期待下一期的內容~
最後祝你：身體健康~ 再見
從零開始的網站架設生活[2]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
