iOS development How to learn the front end (1)

iOS development How to learn the front end (1)

Why do I learn the front?
Because of boredom.

Concept

The front end is about three blocks.

1. Html
2. Css
3. Javascript

Basically, every concept has a counterpart in iOS.
HTML Please imagine that you can only pull AutoLayout or set frame Viewcontroller.
Like you put a button on the page, if you use HTML you can set his position, in which control. But you can't set properties such as size, color, rounded corners.
CSS is specifically responsible for the HTML of these colors Ah, size ah, and so on attributes.
JavaScript is primarily responsible for responding to events, and you can think of it as a processing event in iOS.

Don't say much nonsense. First, let's make a navigation bar.

Expand your imagination to do such a navigation bar on iOS which control do you use?
Nothing is ScrollView or TableView or CollectionView.

In fact, HTML is also called a list of such things. The corresponding HTML tag is called <ul> .
Take a look at the following code.

<!        DOCTYPE html>"#">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>
As I have said above, ul you can be seen as the UITableView in iOS. Then, the UL tag contains the LI tag you can certainly be regarded as a uitableviewcell. So, the entire body tag contains a list of 6 columns. (equivalent to a uitableview with six cells)
This is done after you've saved it as a index.html after you open it with chrome.


The effect and we want to have a certain gap.

 
 

  
  
 
   
There's a black dot before each column, we don't want it, we should get rid of it.
 
   
The navigation bar should be horizontal rather than vertical.
 
  
 
 
Of course there are a lot of different details, but these two are the most obvious, so let's get rid of these two problems first.
Css
Since it's a matter of style, it's beyond the bounds of HTML. We're going to introduce CSS at this point.
How to introduce?
Create a file within the same folder in Index.html style.css .
Then add a sentence under our index.html <title> tag.
<link rel="stylesheet" href="./style.css">
In this way, we tell our HTML, when rendering the entire page, the style and so on, please in the current folder in the Style.css file to find.
Ok.
It's time to write CSS.
In fact, all GUI properties are similar. The background color is generally called backgroundColor , the spacing is generally called, the text alignment is padding generally called textAlignment .
Such.
So, the first thing we do is to get rid of the black dots before each column.
According to iOS habits, should we first find a control and then modify the properties of the control?
It is the same in CSS.
How do I get the control I want to modify?
It's simple. That's it.
ul {    list-style-type:none;}
Run it again and see.

OK, the first question has been solved.
Now solve the second problem. How to keep <ul> each piece of the label sideways.
It's very simple, actually.
We just need to set an attribute on the Li tag float .
This thing can be understood as the layout direction.
If it is set to this, it will be.
li {    float: left;}
Refresh Chrome to see how it works.

It's already crossed over.
The next step is to set various properties. Make our navigation bar look the same as the w3schools.com navigation bar.

 
 

  
  
 
   
Remove each one <a> , which is the underline below the link.
 
   
The difference between the selected states.
 
   
ulThe background color of the label.
 
   
When hovering over the mouse, the background color of each column will change.
 
  
 
 
Directly affixed to the code.
ul {    list-style-type:none;     0 ;     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;}
Never learned CSS to see these code estimates a bit dizzy.
Let me explain.
li a {}What does this mean?
This means that all the labels in the <li> tag are <a> attributes. So, as long as there are multiple labels together with the middle of a space separated by the thing means that the right side of the label is included in the left label.
.activeWhat is the meaning?
There are two symbols in the CSS. To remember . what one is # , what does it mean?
Let me give you an example.
<li class="FistLi"></li>
<li class="SecondLi"></li>
Q, I now need to change the FistLi background color of class for this label to Red, change the SecondLi background color of the label of class to yellow, how to change it?
Then you need to write this in CSS.
Li. Firstli {    background-color:red;}  Li. Secondli {    background-color:yellow;}
is not to see the point of the clue.
This . symbol is usually followed by the value of the class property of a tag. Used to refer to a particular label.
Imagine if you design a particularly complex page. There are a lot of different tags in it, so how do you differentiate between them? This time you need to design different classes or IDs for different labels to differentiate between them. In short, this thing is like a variable name. That should be understood.
When you're done . , # What are you doing?
The function is similar but is used to . . Select this class attribute, but # is used to select id this property.
We just need to replace the above example with this one. The same effect can be achieved.
In HTML.
<li id="FistLi"></li>
<li id="SecondLi"></li>
In the CSS.
Li#firstli {    background-color:red;}  Li#secondli {    background-color:yellow;}
Then you have to ask. These two functions are pretty much the same. So, which one should I use?
Introduce an official explanation.

 
 

  
  
 
   
It is said that the "id" and "class" Settings are unique, class is universal. So when we use them, we have to follow this feature. ID is not repeatable, class is reusable, ID can find a unique label on the page, and class can be multiple tags using the same style provides the possibility of
 
  
 
 
li a:hover:not(.active)What the hell is this long list of?
Let's have a 1.1-point analysis.
First li a of all, this means the <li> <a> label inside.
a:hover, hover is the meaning of hovering in English.
What does that mean?
Because a represents a hyperlink. A:hover means that when the mouse hovers over the hyperlink.
So the first half of the sentence means that when the user's mouse rests on the a tag in the Li tag.
And then there was another one behind :not(.active) .
According to the previous explanation .active , the meaning is that class equals active all tags. What do you mean by adding a not in front? is the label for all classes that are not active.
All right, now connect. Read it again.
When the mouse stops at all the Li tags in the a tag, but a is not equal to the class property is active, please execute the following CSS.
That's it.
So, at the end of the day, let's write it down.
 
iOS development How to learn the front end (1)