iOS开发如何学习前端(1)

我为何学前端?
因为无聊.

概念

前端大概三大块.

  1. HTML
  2. CSS
  3. JavaScript

基本上每个概念在iOS中都有对应的.
HTML请想象成只能拉Autolayout或者设置Frame的ViewController.
好比你在网页上放了一个Button,如果用HTML你就可以设置他的摆放位置,在哪哪个控件里.但是你不可以设置大小,颜色,圆角之类的属性.
CSS专门负责HTML管不了的这些颜色啊,大小啊之类的属性.
JavaScript主要负责响应事件,你把它想象成iOS里面的处理Event就行了.

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

展开你的想象力,在iOS做这样的一个导航条你会用哪个控件?
无非就是ScrollView或者TableView或者Collectionview.

其实HTML这种东西也叫作列表.对应的HTML标签叫做<ul>.
来看下面一段代码.

<!DOCTYPE html>
<html>
<title>Navigator</title>
<head>
</head>
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">BOOTSTRAP</a></li>
</ul>
</body>
</html>

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

效果和我们想要的还有一定差距.

  1. 每一列之前有个黑点,我们不想要,应该去掉.
  2. 导航栏应该是横的而非竖的.

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

CSS

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

怎么引入?
在index.html的同一个文件夹内创建style.css文件.
然后在我们的index.html的<title>标签下面加入这样一句话.

<link rel="stylesheet" href="./style.css">

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

ok.
该写CSS了.
其实所有GUI的属性都差不多.背景色一般叫backgroundColor, 间距一般叫padding, 文字对齐方式一般叫textAlignment.
诸如此类.
所以,我们的第一件事就是,把每一列之前的黑点去掉.
按照iOS的习惯,我们是不是应该先找到某个控件,再去修改控件的属性?
在CSS中也是一样.
怎么获取想要修改的控件?
很简单.这样就可以了.

ul {
list-style-type: none;
}

再运行一下看看.

好的,第一个问题已经解决.
现在解决第二个问题.如何让<ul>标签中的每一条横着放.
其实也很简单.
我们只需要设置li 标签中的一个属性float就可以了.
这个东西可以理解为布局方向.
如果设置为这样就可以了.

li {
float: left;
}

刷新一下chrome看看效果.

已经横过来了.

接下来,其实就是设置各种属性.让我们的导航条看起来和w3schools.com的导航条看起来一样.

  1. 去掉每一个<a>,也就是链接下面的下划线.
  2. 选中状态的区别.
  3. ul标签的背景色.
  4. 鼠标悬停的时候,每一列的背景色要发生变化.

直接贴代码了.

ul {
list-style-type: none;
margin: ;
padding: ;
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 {}这种是什么意思?

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

.active 是什么意思?

CSS里面有两个符号要记清楚一个是.一个是#,什么意思?
举个例子.
<li class="FistLi"></li>
<li class="SecondLi"></li>
问,我现在需要把class为FistLi这个标签的背景色改为红色,把class为SecondLi的这个标签的背景色改为黄色,怎么改?
那么你就需要在CSS里这么写.

li.FirstLi {
background-color: red;
}
li.SecondLi {
background-color: yellow;
}

是不是看出了点端倪.
这个.符号后面一般会跟某个标签的class属性的值.用来特指某一个标签.
想象一下,假如设计了一个特别复杂的页面.里面很多个不同的标签,那你如何区分?这时候需要给不同的标签设计不同的class或者id用以区分.简单来说,这玩意就像变量名.这么说应该懂了吧.
说完了.,那么#又是干什么的?
功能类似.不过.是用来选择class这个属性的,而#是用来选择id这个属性的.
我们只需要把上述的例子换成这样.也能达到相同的效果.
在HTML中.
<li id="FistLi"></li>
<li id="SecondLi"></li>
在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开发如何学习前端(1)的更多相关文章

  1. iOS开发如何学习前端(2)

    iOS开发如何学习前端(2) 上一篇成果如下. 实现的效果如下. 实现了一个横放的<ul>,也既iOS中的UITableView. 实现了当鼠标移动到列表中的某一个<li>,也 ...

  2. iOS开发如何学习前端

    原文链接 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或者设置Frame的ViewController.好比 ...

  3. 关于iOS开发的学习

    关于iOS开发的学习,打个比方就像把汽车分解:    最底层的原料有塑料,钢铁    再用这些底层的东西造出来发动机,座椅    最后再加上写螺丝,胶水等,把汽车就拼起来了 iOS基本都是英文的资料, ...

  4. IOS开发---菜鸟学习之路--(二十二)-近期感想以及我的IOS学习之路

    在不知不觉当中已经写了21篇内容 其实一开始是没有想些什么东西的 只是买了Air后 感觉用着挺舒服的,每天可以躺在床上,就一台笔记本,不用网线,不用电源,不用鼠标,不用键盘,干干脆脆的就一台笔记本. ...

  5. IOS开发---菜鸟学习之路--(一)

    PS(废话): 看了那么多的博客文章,发现大部分人都一直在强调写技术博客的重要性,索性自己也耐着性子写写看吧. 写博客的重要性之类的说明,我就不做复制黏贴的工作了.因为自己没有写过多少,所也不清楚是不 ...

  6. iOS开发架构学习记录

    闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...

  7. IOS开发---菜鸟学习之路--(二十三)-直接利用键值对的方式来处理数据的感想

    首先声明,本文纯粹只是做为本人个人新手的理解.文中的想法我知道肯定有很多地方是错的. 但是这就是我作为一个新人的使用方法,对于大牛非常欢迎指导,对于喷子请绕道而行. 由于这是早上跟我学长讨论数据处理时 ...

  8. IOS开发---菜鸟学习之路--(十七)-利用UITableView实现个人信息界面

    首先来看下我们要实现的效果 需要实现这样的效果 然后我们开始动手吧. 首先选择添加一个新的ViewController 然后打开XIB文件,添加一UITableView 并将样式设置为分组 同时将按住 ...

  9. iOS开发RunLoop学习:一:RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...

随机推荐

  1. Android中使用DialogFragment来取代popopwindow

    DialogFragment +fragment 来取代popopwindow +fragment 先留个标题,这几天过来写,重大发现

  2. (原+转)linux安装rtl 8812au驱动

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6806917.html 参考网址: http://www.linuxdiyf.com/viewartic ...

  3. Swift3.0 - 实现剪切板代码拷贝及跨应用粘贴

    有个需求,点击某个按钮,实现一段内容的拷贝,然后到其他应用内,直接长按粘贴. 实现如下: /// 测试剪切板,实现代码拷贝内容 func testPasteBoard(str:String) { // ...

  4. Java6 WebService的发布(转)

      Java6 WebService的发布   转:http://lavasoft.blog.51cto.com/62575/227988/   WebService服务发布往往比较混乱,Axis2的 ...

  5. java.lang.IllegalStateException: Failed to load ApplicationContext selenium 异常 解决

    WARN <init>, HHH000409: Using org.hibernate.id.UUIDHexGenerator which does not generate IETF R ...

  6. C++11开发中的Atomic原子操作

    C++11开发中的Atomic原子操作 Nicol的博客铭 原文  https://taozj.org/2016/09/C-11%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84 ...

  7. CentOS 7.0关闭默认firewall防火墙启用iptables防火墙

    操作系统环境:CentOS Linux release 7.0.1406(Core) 64位CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭f ...

  8. ceph-RGW Jewel版新概念

    一.概述 zone: 包含多个RGW实例的一个逻辑概念.zone不能跨集群,同一个zone的数据保存在同一组pool中: zonegroup:一个zonegroup如果包含一个或多个zone,如果包含 ...

  9. 收集一些常用Javascripot

    获取一组单选框当前选择值: $("input[name='radGende']:checked").val();

  10. 【SqlServer】Sql Server 支持的数据类型

    在计算机中数据有两种特征:类型和长度.所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类.    在SQL Server 中每个变量.参数.表达式等都有数据类型.系统提供的数据类型分为几大类 ...