写完标题以后发呆了好大一会儿，多少年没提笔写过文章了啊，写成大白话了，你可不能怪我啊 (*ﾟｰﾟ)。去年在站酷上写过两篇关于前端入门的小教程，那时候也是累的半死。昨天在公司的时候翻出来看了看，我去，写的什么渣渣！！！不能让你看啊，不然我高大威武帅气英俊的形象在你心里就崩塌了。重写！
-----------写这里的时候距离上面那一段已经过去俩小时了(。・＿・。)ﾉ，理由很简单，我嘴馋了，下去买了一堆零食，哈哈，现在一边吃零食一边写，老分心了~~~
首先说一下，为了让更方便的不懂代码的你能快速接触前端，所以有些地方我写的可能不准确，也不深入，但是这并不耽搁你去写这些东西。
好吧，啰嗦一大堆，正式开始吧。单独写一堆理论你估计头又大了（即便你悟性这么大）嘿嘿，所以我还是做个实例吧！先得画个效果图，得在你面前班门弄斧了。
做图的时候其实也需要先想一下布局，logo，导航，banner，列表这些必不可少的东西怎么排版，心里先有个谱。
但是我突然决定用去年写教程时做的那张效果图，任性一次呗！
logo是随便找的字体，banner是百度的模特，弄个纯背景，加上点文字，简单的很，凑合着看
首先先总结一下之前说的前端是什么东西，都负责做什么的，html是啥，css是啥，js是啥。
设计师在把界面设计出来以后是不能直接用在网页上的，设计的一些按钮啊，链接、输入框这些需要交互的在一张图上是肯定不能实现的，所以现在需要前端来把这些东西分分类，该是图片的，该是按钮的，或者是输入框的，这些都给他放到指定的框里面，让他们起到设计师想让他们发挥的作用。这些框通俗来说就是div（或者是其他的HTML标签），这就是html要起到的作用。
但是你只是把他们放到一个个框里面，功能是可以实现了，但是你发现只是这些的话界面就像没设计一样，你们设计师的心血白费了啊，所以这时候css就出来了，css就是样式，负责的部分是把之前框里面的东西让他按照你设计的界面出现在相应的位置，以你想要的样式（颜色、大小、背景、位置等等）显示在界面上。
到这里以后你发现html+css这些东西就基本能把网页做出来了，但是你这界面不行啊，平平静静的完全吸引不了别人的眼球啊，我们经常在网上看到一些特别炫酷的效果，人家有咱也得能做啊，这些就是js要做的事啦！
所以一般情况下，所谓的前端就是html+css+js；
html：内容结构
css：表现样式
js：行为交互
写了一大堆，你别看头大了，来个笑话放松放松
go on！！！
html就是一个个的标签组成的，所有的元素都需要放在标签里面，而标签一般来说是成对出现的，有开始标签就有闭合标签（代表着标签到此结束），例如：<div></div>，当然也有一些特殊的标签是单标签，不分开始和闭合标签。例如img标签，input标签等。
之前也有说过，标签分为块状元素和行内元素。块状元素就是不管宽度是多少，他都占一行，他用不完一行也不让别人用（太霸道了！！！），最常见的就是div这个标签。行内元素顾名思义就是可以在一行展示，不像块状一样霸道，自己用多少，占得位置就是多少，比如<span></span>标签、<a></a>标签就都是行内元素。
标签有很多，大概快有上百个标签了，但是不用都记住，常用的也就那几个：
<div></div>：最常用的标签，可以把它当做一个盒子，里面什么都可以包。他还有一个常用的作用就是你可以把一些同一个模块里觉得零碎的标签，给他包起来，这样结构就很清晰，类似于你用ps时候ctrl+g分组一样，哈哈，你分的一些模块完全都可以包在这个标签里面。
其他的大部分标签你都可以先理解为和div一样的东西，只不过叫的名字不一样。其实作用都是一样的，都是一个个盒子（大部分，有一些是替代不了的，例如img标签）。他们其实就是带着特殊含义的标签（例如p标签就是代表文字段落的意思）。如果你全部用div也是可以的，但是你想一下整个界面都是div，多可怕，你分不清哪个是哪个。。。
<p></p>：p标签里面一般放的是文字，他又有段落的意思。但是我们也可以把它当做div盒子来用，里面放个图片什么的都是可以的，唯一不好的是可能是对seo有点影响，这些你就先不用考虑，毕竟主业还是设计师嘛。以后有兴趣可以学。
<h1><h1>：h1标签是标题的意思，其实作用和p标签差不多了，只是他会默认带着字号和加粗，包括之前说的h2、h3等等。他的有个特点是在搜索的时候权重会高一点，也就是代表重要性高。
<a></a>：a标签是超链接，就是网页上你可以点击跳转界面的东西，看网页的时候你会发现有些东西是点击不了的，有些东西你鼠标移动上去就变成一个小手的样子，代表着可以点击，这个往往都是a标签实现的。
<ul></ul>、<li></li>：这两个标签放一块是因为他们总是成对出现的，有ul的时候就有li，有li的时候就有ul，ul里面放着li，他是代表无序列表的意思，一般导航上会用到。
<img /> ： 这是一个单标签，这个的作用是引入图片。每个标签都有自己的属性，要引入图片的时候在src属性里面加入要加入图片的链接地址，图片就显示出在界面上啦。
<input />：文本框 ，就是平常像注册登录一样的界面里输入东西的地方，可以有很多类型。
累死了，累死了。标签很多，列举不完，这个其实做的多了，就好了，其实都一样的东西。所以不要害怕哦，哈哈。
腰酸背痛啊，诶呦我这把老骨头。接着来
上面写的是html部分啊，就先写这些，不敢写的深了，怕你一下接受不下，嘿嘿，不懂再问我吧。
下面简单再说一下css
前面也说了，css负责的就是把界面按照你设计的东西表现出来，变得好看起来。给某一个标签设置样式最常见的引入方法有三种方式：
1：直接在元素上利用标签的style属性设置：
<div style='' font-size :16px; ''>你好啊，美女！</div>
这代表的意思是给div标签里的文字加上字体大小为16像素的样式
2：在html文件里用<style></style>标签把样式包起来。
<div></div>
<style>
div {
font-size:16px;
}
</style>
上面的代码和第一种方法起到的作用是一样的。
3：外部引入css文件，这种方法是现在比较推荐的一种方法，我也有说过之前，现在的界面想把样式和结构分离开，这样维护起来会比较容易，我调整界面的时候只需要调整css文件就行了。
方法是在html的head标签里面使用link标签引入后缀为css文件
<link type="text/css" rel="stylesheet" href="style.css">
在外部新建一个名字为style.css的文件，然后在css文件里面写入样式
div {
font-size:16px;
}
css给标签设置样式的时候也有三种方法：
1：直接使用标签名称设置（上面的例子就是）
div {
font-size:16px;
}
这个表示的意思是界面上多的div的样式都是字体为16像素大小
2：使用标签的class属性设置类名来做
<div class="demo"></div> ----------------------我们先给div元素设置一个名字叫demo的类名
css里的设置方法
.demo{
font-size:16px;
}
css里对类名设置的方法是在类名前加入一个“ . ”然后设置
同个界面可以有很多歌相同类名的div
3：使用标签的id属性设置类名来做
<div id="demo"></div> ----------------------我们先给div元素设置一个名字叫demo的id名css里的设置方法
#demo{
font-size:16px;
}
css里对id名设置的方法是在类名前加入一个“# ”然后设置
每个界面叫demo的id只能有一个，id名称不能重复。
歇歇！
虽然我也算是程序员，但是我搜的这个笑话我自己也不知道哪里好笑~
js这一块就暂时不说了，前期没必要学习这个啦。
开始实例做吧
首先新建一个文件夹作为项目的站点。文件夹里一般会放下面几个文件
css文件夹、images文件夹、js文件夹 、 界面
这样做是为了让你的文件分好类，这样看着更有调理，其实你完全可以不建文件夹，统统放在一个里，只要你引入的路径对了。
新建一个界面index.html。
做之前先大概确定一下界面的布局，把大区域分一下，比方说这一个界面，大模块的话没有左右结构，就是从上到下的结构，导航--banner--小列表---小banner---列表---底部。所以你界面body里面的直接挨着的大模块就是这大概六个div了。
<body>
<div class="daohang"> 这里面写导航的内容 </div>
<div class="banner1"> 这里写banner的内容 </div>
<div class="xiaoliebiao"> 这里写banner下面的类似于热门列表的部分 </div>
<div class="banner2"> 这里写小banner里面的内容 </div>
<div class="liebiao"> 这里写衣服的列表区域 </div>
<div class="footer"> 这里写底部区域的内容 </div>
</body>
在做的时候我们可以发现中间区域的部分一般会有一个固定宽度，这个现在来说一般是1200px，市面上流行的显示器宽度基本都已经大于1200了，所以设置一个安全区域来保证我们的界面在所有电脑上都不会出现横向滚动条。所以我们的版心就是1200，居中。
<div class="daohang"></div>
.daohang {
width:1200px;
margin:0 auto; ----------------这是最常用的块状元素居中的设置方式，行内元素设置居中是在父元素 上加入text-align:center;就行了。
}
导航区域分为两部分，一个是logo在左边，一个是导航列表在右边。
所以我们先把这两块做起来
<div class="daohang">
<div class="logo"> 这里放logo图片 </div>
<div class="nav"> 这里放导航列表 </div>
</div>
然后需要做的是把logo的图片切下来了，比如说我们切下来一个logo.png 的图片放在images文件夹内
（我不写详细的代码文件了，就在这里面简单写写吧）
<div class="logo"><img src="images/logo.png" /></div>
<div class="nav">
<ul>
<li><a herf="#">首页</a></li>
<li><a herf="#">极致艺术</a></li>
......
</ul>
</div>
这时候如果你直接看写的效果的话会发现logo和导航是在两行的，这就是我们说的块状元素的特点。但是我们现在要求他俩在一行，这时候就需要用到css了
css有个属性叫float，有三个值left、right、none，相信以你的聪明可以知道是啥意思哈。
.logo{
float:left;
}
.nav {
float:right;
}
一个左浮动一个右浮动。
可以看到这两个盒子是在一行了，但是，导航里面的每一个导航都还是各占一行，这是因为li标签也是块状元素。咋办，当当当当~还是浮动啊，左浮动就好了
.nav li {
float:left;
}
.nav li 代表着类名为nav的下面的标签为li的子元素。
具体的颜色，字体大小，边框，鼠标移动过去的效果也可以在css里设置一下。
font-size设置字体大小
color设置颜色
border设置边框 ，方法是 border:1px solid #333333;分别代表边框宽度1px，solid是表示实线的意思，当然还有虚线的设置，可以自己看看哈，后面#333333就不用说了，边框颜色；
这个里面我们发现只有底部有边框，所以我们可以像margin和padding一样，分开设置。只要设置border-bottom:2px solid #333;就行了，同样还有，border-top、border-left、border-right这几个。
我们现在想让他鼠标经过的时候出现底部边框
a标签有个hover状态，表示鼠标移动过去的状态（其实其他标签也可以设置hover属性，也可以识别）
所以我们这样设置，.nav li a:hover { border-bottom:2px solid #333333; }就好啦！！！
晚上八点多了，得先歇会儿，吃个饭。你要不要喝个茶再看，哈哈。
酒足饭饱以后就不想干活了咋办，嗝~。话说也不知道你有耐心看到这里没有。看到这里有奖励，哼哼~。
好吧，看了一会儿running man ，接着写点儿，
改写banner区域了吧，banner的话可以看到整个区域是占满屏幕的，没有说只是中间1200的内容，但是可以看到的是，其实banner也有中间区域的，所以我们需要在这个外面的div里面再设置一个1200宽度的div（这个其实看具体banner的内容长什么样了）,除了中间的内容区域，外面的是纯色的喽，最喜欢纯色的内容了。我们先把中间的banner切图下来，交banner1.png放在images文件夹内。
<div class="banner1">
<div class="bannerbox"><img src="images/banner1.png" /></div>
</div>
.banner1 {
width:100%; -----------------因为后面的纯色背景是占满屏幕的，所以设置100%的宽度
background:#B8E1E9;
}
.bannerbox {
width:1200px;
margin:0 auto;----------------里面的内容区域是1200px;居中
}
.bannerbox img {
width:100%;-------------------banner里面的img图片，宽度设置为1200，也就是父元素.bannerbox的 100%
}
突然想到一个问题好像还没有说，margin，padding，虽然之前给解释过，但是我觉得可能有点蒙，也不知道能写清楚不能，margin就是外边距，margin的距离是不包含在盒子的宽高以内的，如果我们要设置两个元素之间的距离的话，一般用margin。padding是内边距，例如一个盒子想要里面的内容距离这个盒子的边框之间有一定距离的话，就是用padding。如果设置背景的情况下，padding出来的距离是有背景的，就是说padding是在自己家做边距，margin是在家门外做间距。
好累啊
快十一点了，就先这样，以后有时间再写喽。撒有哪啦。
未完待续......
网友评论