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

来源:互联网 发布:淘宝开店流程图解 编辑:程序博客网 时间:2024/06/16 06:03

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>

我上面已经说过了,\

    你可以看作是iOS中的UITableView.那么相应的,ul标签所包含的\
  • 标签你当然可以看做是一个个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: 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 {}这种是什么意思?

    意思就是<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.
    就是这样. 



0 0
原创粉丝点击