从零开始的网站架设生活[2]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从零开始的网站架设生活[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]的主要内容，如果未能解决你的问题，请参考以下文章