iOS开发的前端之路

作为一名开发，学习的脚步永远都不要停止，不但要精通自己领域的技术，也同样要想别的领域扩展自己的知识。最近h5在移动端开发中比较火，由于它对ios和安卓的统一性，迅速得到开发者的喜爱。想要学习h5，最快也是最有效的方法就是从前端入手，这样既可以为学习h5打出良好的基础，也可以转型一名。那么一名ios开发如何迅速学习好前端呢？废话不多说，下面来干货。

前端大概三大块.
- html
- css
- javascript

基本上每个概念在ios中都有对应的.

html请想象成只能拉autolayout或者设置frame的viewcontroller.

好比你在网页上放了一个button,如果用html你就可以设置他的摆放位置,在哪哪个控件里.但是你不可以设置大小,颜色,圆角之类的属性.

css专门负责html管不了的这些颜色啊,大小啊之类的属性.

javascript主要负责响应事件,你把它想象成ios里面的处理event就行了.

废话不多说.第一篇,我们做个导航条.

如图

展开你的想象力,在ios做这样的一个导航条你会用哪个控件?喎? f/ware/vc/"="" target="_blank" class="keylink">vcd4ncjxwps7et8e+zcrhu2nyb2xsvmlld7vy1d9uywjszvzpzxe78txfq29sbgvjdglvbnzpzxcupc9wpg0kpha+xutktuhutuzv4tbwtqvo99kyvddx98hqse0uttttprxesfrntlhqx6m90nf2dwwupc9wpg0kpha+wls/tm/cw+bsu7botprc6y48l3a+dqo8chjlignsyxnzpq=="brush:java;">

• html
• css
• javascript
• sql
• php
• bootstrap

我上面已经说过了,ul你可以看作是ios中的uitableview.那么相应的,ul标签所包含的li标签你当然可以看做是一个个uitableviewcell. 所以,整个body标签包含的就是一个拥有6列的列表.(等同于一个拥有六个cell的uitableview)
保存为index.html之后用chrome打开之后的效果是这样的.

效果和我们想要的还有一定差距.
- 每一列之前有个黑点,我们不想要,应该去掉.
- 导航栏应该是横的而非竖的.

当然还有很多细节不一样,但是这两个最明显,所以我们先改掉这两个问题.

css

既然涉及到样式的问题,那么这已经超出html力所能及的范围了.我们这时候就要引入css了.

怎么引入?

在index.html的同一个文件夹内创建style.css文件.

然后在我们的index.html的title标签下面加入这样一句话.

 

这样,就告诉了我们的html,在渲染整个网页的时候,样式之类的东西请在当前文件夹的style.css文件里找. ok。

该写css了.

其实所有gui的属性都差不多.背景色一般叫backgroundcolor, 间距一般叫padding, 文字对齐方式一般叫textalignment.

诸如此类.

所以,我们的第一件事就是,把每一列之前的黑点去掉.

按照ios的习惯,我们是不是应该先找到某个控件,再去修改控件的属性?

在css中也是一样.

怎么获取想要修改的控件?

很简单.这样就可以了.

ul {
list-style-type: none;
}

这里list-style-type属于ul的一个属性，这里的属性我们可以想象成uitableview的属性，我把它类必成uitableviewstyle属性，ui的其他属性我们都可以类必成uitableview的属性，这样方便我们学习和理解，具体的其他属性这里就不做介绍了。

再运行一下看看.

好的,第一个问题已经解决.

现在解决第二个问题.如何让ul标签中的每一条横着放.

其实也很简单.

我们只需要设置li 标签中的一个属性float就可以了.

这个东西可以理解为布局方向.

如果设置为这样就可以了.

li {
float: left;
}

刷新一下chrome看看效果.

已经横过来了.

接下来,其实就是设置各种属性.让我们的导航条看起来和w3schools.com的导航条看起来一样.
- 去掉每一个,也就是链接下面的下划线.
- 选中状态的区别.
- ul标签的背景色.
- 鼠标悬停的时候,每一列的背景色要发生变化.

直接贴代码了.

ul {
list-style-type: none;
margin: 0;
padding: 0;
background: #5f5f5f;
height: 44px;
}
li {
float: left;
height: 44px;
width: auto;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
padding: 14px 16px
}
li a:hover:not(.active) {
background-color: black;
}
.active {
background-color: #4caf50;
}

没学过css的看见这些代码估计有点晕.我来解释一下.

li a {}这种是什么意思?

意思就是

标签里的所有标签的属性.所以,只要有这种多个标签放一起中间用空格隔开的东西意思就是,右边的标签包含在左边的标签里.

 

.active 是什么意思?

css里面有两个符号要记清楚一个是.一个是#,什么意思?

举个例子.

•  
•  

问,我现在需要把class为fistli这个标签的背景色改为红色,把class为secondli的这个标签的背景色改为黄色,怎么改?

那么你就需要在css里这么写.

li.firstli {
background-color: red;
}
li.secondli {
background-color: yellow;
}

是不是看出了点端倪.

这个.符号后面一般会跟某个标签的class属性的值.用来特指某一个标签.

想象一下,假如设计了一个特别复杂的页面.里面很多个不同的标签,那你如何区分?这时候需要给不同的标签设计不同的class或者id用以区分.简单来说,这玩意就像变量名.这么说应该懂了吧.

说完了.,那么#又是干什么的?

功能类似.不过.是用来选择class这个属性的,而#是用来选择id这个属性的.

我们只需要把上述的例子换成这样.也能达到相同的效果.

在html中.

•  
•  

在css中.

li#firstli {
background-color: red;
}
li#secondli {
background-color: yellow;
}

那你估计要问了.这两个功能差不多啊.那我到底该用哪个?

引入官方解释.

据说w3c对于id和class的设定是id具有唯一性，class具有普遍性。所以说我们用他们俩的时候就要按照这个特性来使用。id 是不能重复的，class 却是可以重复使用，通过id可以找到页面上唯一的一个标签，而class呢可以多个标签使用同一种样式提供了可能

li a:hover:not(.active)这么一长串又是个什么鬼?

咱们一点一点分析.

首先li a这个的意思是在li里面的a标签.

a:hover,hover是英文盘旋的意思.

这句什么意思呢?

因为a代表的是一个超链接.a:hover的意思就是,当鼠标停留在这个超链接上.

所以前半句的意思是,当用户的鼠标停留在li标签里的a标签上的时候.

后面又接了一个:not(.active).

根据前面的解释.active意思就是,class等于active的所有标签.前面加个not什么意思?就是所有class不是active的标签.

好了,现在连起来. 朗读一遍.

当鼠标停在所有li标签里的a标签,但是a得class属性又不等于active的时候请执行下面的css.

就是这样

以上内容就是对ios开发如何学习前端的简单介绍和个人理解，总结起来就是用自己熟悉的ios相关领域的只是去类比前端开发只是进行学习和思考。本文部分内容借鉴cocoachina相关文章，博主能力有限，如有不足希望指出批评，大家加油~

喎?>