iOS开发如何学习前端

Cocoa开发者社区 · 公众号 · ios · 2016-09-02 08:04

正文

▲点击上方“CocoaChina”关注即可免费学习iOS开发

作者：叶孤城___
原文链接：http://www.jianshu.com/p/2d7a8e16615d

我为何学前端?

因为无聊

概念

前端大概三大块.

HTML
CSS
JavaScript

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

HTML请想象成只能拉Autolayout或者设置Frame的ViewController.

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

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

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

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

如图

展开你的想象力,在iOS做这样的一个导航条你会用哪个控件?

无非就是ScrollView或者TableView或者Collectionview.

其实HTML这种东西也叫作列表.对应的HTML标签叫做

来看下面一段代码.

Navigator
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的

标签下面加入这样一句话. <link rel="stylesheet" href="./style.css"/> 这样,就告诉了我们的HTML,在渲染整个网页的时候,样式之类的东西请在当前文件夹的style.css文件里找. OK。 该写CSS了. 其实所有GUI的属性都差不多.背景色一般叫backgroundColor, 间距一般叫padding, 文字对齐方式一般叫textAlignment. 诸如此类. 所以,我们的第一件事就是,把每一列之前的黑点去掉. 按照iOS的习惯,我们是不是应该先找到某个控件,再去修改控件的属性? 在CSS中也是一样. 怎么获取想要修改的控件? 很简单.这样就可以了. <blockquote>ul {list-style-type: none;}</blockquote> 再运行一下看看. <img class="imagebubble-image" data-ratio="0.32299270072992703" data-src="https://img.100weidu.com/mmbiz_png/foPACGrddJ0CH1G5cd36XgtI4VlmJIfeLpwOJeibncicyaxqhXbcPOibbWHvibMqmRqJZLUriaMbwu2SsNZYFZyoOFQ" data-type="png" data-w="1096"/> 好的,第一个问题已经解决. 现在解决第二个问题.如何让<ul>标签中的每一条横着放. 其实也很简单. 我们只需要设置li 标签中的一个属性float就可以了. 这个东西可以理解为布局方向. 如果设置为这样就可以了. <blockquote>li {float: left;}</blockquote> 刷新一下chrome看看效果.<img class="imagebubble-image" data-ratio="0.13333333333333333" data-src="https://img.100weidu.com/mmbiz_png/foPACGrddJ0CH1G5cd36XgtI4VlmJIfeo5GhvMzs2naP04DLDaVgUria35mI2FyCZWhthUDEM2BWCjKXl6GFv4Q" data-type="png" data-w="1200"/>已经横过来了. 接下来,其实就是设置各种属性.让我们的导航条看起来和w3schools.com的导航条看起来一样.<ul class=" list-paddingleft-2" style="list-style-type: disc;"><li>去掉每一个<a>,也就是链接下面的下划线.</a></li><li>选中状态的区别.</li><li>ul标签的背景色.</li><li>鼠标悬停的时候,每一列的背景色要发生变化.</li></ul> 直接贴代码了. <blockquote>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;}</blockquote> 没学过CSS的看见这些代码估计有点晕.我来解释一下. li a {}这种是什么意思? 意思就是<li>标签里的所有<a>标签的属性.所以,只要有这种多个标签放一起中间用空格隔开的东西意思就是,右边的标签包含在左边的标签里. .active 是什么意思? CSS里面有两个符号要记清楚一个是.一个是#,什么意思? 举个例子. <blockquote><li class="FistLi"/><li class="SecondLi"/></blockquote> 问,我现在需要把class为FistLi这个标签的背景色改为红色,把class为SecondLi的这个标签的背景色改为黄色,怎么改? 那么你就需要在CSS里这么写. <blockquote>li.FirstLi {background-color: red;}li.SecondLi {background-color: yellow;}</blockquote> 是不是看出了点端倪. 这个.符号后面一般会跟某个标签的class属性的值.用来特指某一个标签. 想象一下,假如设计了一个特别复杂的页面.里面很多个不同的标签,那你如何区分?这时候需要给不同的标签设计不同的class或者id用以区分.简单来说,这玩意就像变量名.这么说应该懂了吧. 说完了.,那么#又是干什么的? 功能类似.不过.是用来选择class这个属性的,而#是用来选择id这个属性的. 我们只需要把上述的例子换成这样.也能达到相同的效果. 在HTML中.<blockquote><li id="FistLi"/><li id="SecondLi"/></blockquote> 在CSS中.<blockquote>li#FirstLi {background-color: red;}li#SecondLi {background-color: yellow;}</blockquote> 那你估计要问了.这两个功能差不多啊.那我到底该用哪个? 引入官方解释. <blockquote>据说W3C对于ID和CLASS的设定是ID具有唯一性，class具有普遍性。所以说我们用他们俩的时候就要按照这个特性来使用。id 是不能重复的，class 却是可以重复使用，通过id可以找到页面上唯一的一个标签，而class呢可以多个标签使用同一种样式提供了可能</blockquote> 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. 就是这样 最后,大家按照上面的自己写一遍吧. <section class="_135editor" style="box-sizing: border-box;" data-id="87417" data-tools="135编辑器"><img title="音符" style="display: inline;" data-ratio="0.45454545454545453" data-w="22" data-src="https://img.100weidu.com/mmbiz/cZV2hRpuAPiaJQXWGyC9wrUzIicibgXayrgibTYarT3A1yzttbtaO0JlV21wMqroGYT3QtPq2C7HMYsvicSB2p7dTBg"/> </section><a style="box-sizing: border-box;" href="http://promotion.xitu.io/2016-exam" target="_blank" data_ue_src="http://promotion.xitu.io/2016-exam"><img width="auto" style="visibility: visible !important; width: auto !important;" data-ratio="0.55625" data-w="640" data-s="300,640" data-type="jpeg" data-src="https://img.100weidu.com/mmbiz_jpg/foPACGrddJ1wiajbUpXPWibzprQYJDKBmB8kaFOibw88hkKB4gc9VrqdX0mDray0ldgoeA8e3UJNs07OnIOXADKeA"/></a> 最近发现一个好玩的测试，互联网从业者都应该来试下，我得了 85 分，看看你能不能超过我！长按图片识别二维码或者点击<a style="box-sizing: border-box;" href="http://promotion.xitu.io/2016-exam" target="_blank" data_ue_src="http://promotion.xitu.io/2016-exam">阅读原文</a>就可以参与。 <hr style="line-height: 25.6px; white-space: normal; color: rgb(62, 62, 62); box-sizing: border-box;"/>微信号：CocoaChinabbs<img width="137" style="visibility: visible !important; width: 137px !important;" data-ratio="0.9927007299270073" data-w="137" data-s="300,640" data-type="jpeg" data-src="https://img.100weidu.com/mmbiz/foPACGrddJ2Udhpia6PsaSdDwtNNS3uS9oicNswCiaZ831emagAheicAAWic4sWszUo1ibxEbic1gibmPCiceMkoymgXfZA"/> ▲长按二维码“识别”关注即可免费学习 iOS 开发月薪十万、出任CEO、赢娶白富美、走上人生巅峰不是梦--------------------------------------商务合作QQ：2408167315投稿邮箱：support@cocoachina.com</a></li></a></li></ul>