從零開始的網站架設生活[2]
從零開始的網站架設[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]