iOS development How to learn the front end (2)

iOS Development How to learn the front end (2)

The previous results are as follows.

The effect is as follows.

1. Implemented a horizontal <ul> , also both iOS UITableView.
2. The <li> background color of the LI tag becomes black when the mouse moves to one of the list, and also to the UITableViewCell in iOS.

The page is simple. But there is still a small problem. Sharp-eyed's classmates can find out. When the mouse hover over Li, the background color is changed, but when the background color changes, we found that in fact, the black Li's bottom is more than the parent control, that is, we do not have Li's bottom and the bottom of the UL alignment.
What is this for?

I went to check our CSS file. The <li> properties on and <a> are like this.

li {    float: left;    height:44px;    Width:auto;} Li a {    display:block;    Text-decoration:none;    Color:white;    Text-align:center;    Padding:14px 16px}

The problem here is that I've used a not-so-elegant way to achieve the center of text.

How did I make it?
Here, you need to explain the meaning of padding in CSS. Let's look at an image in iOS.

This is a uilabel, I gave him the left margin and the top margin, familiar with the iOS students know that this time, this label will automatically and the length of the width of the content consistent.
So if you put the padding concept of CSS in iOS, then you can say, in this case, the padding should be 0.

OK, this time we will increase the constraints of two, I put the label width and height are set to a fixed value.

Now what does this label look like?
He became like this.

At this time, the width of the uilabel is much larger than the width of the text. Then, at this time, the value of padding is not 0.
How much is it?
Uifont has a property of pointsize, then the value of Padding-top is(UILabel的高 - 内容的高)/2
The value of Padding-left is
(UILabel的宽 - 内容的宽)/2
So if you want text to be centered, you need the same padding-top and Padding-bottom.

But in the code, our Padding-top and Padding-bottom are already the same, why do the mouse hover state when feeling <a> big?
In fact, I looked at it with Chrome's inspect. Found

<a>The actual height is 46, more than the height of Li, this is why hover state, when the background color change, <a> the bottom more than Li's bottom.

Intuition tells me that this is not a good practice. Why, because it takes a lot of effort to set padding to achieve vertical centering, you have to calculate the relationship between font size and padding. It's kind of annoying.
So I Google a bit.

Click to see this practice.

The principle is to line-height this attribute and text container height set to the same size.

Later I found a problem, that is, to set the line-height as a percentage of the form is invalid. Like what
line-height: 100%.
Why is it? Since line-height can only be set to a value of PX, it means that the text content is highly consistent with the container content, and if it is set to a percentage, the CSS is set to the size of the font.

Then we change the CSS to this.

Li a {    display:block;    Text-decoration:none;    Color:white;    Text-align:center;    line-height:44px;    Padding-left:16px;    Padding-right:16px;}

The effect is as follows.

It's done.

Go to the Chase, pop-up menu

The results you want to achieve today are as follows.

This implementation principle, similar to the one in iOS, sets the hidden of one of the child view of a parent view to true. Then add an event, such as Click, to set the view's hidden to false. Then the child view is displayed.
Then the corresponding property in the CSS is display .

Look at the HTML first.

"stylesheet"href="Dropdown.css"Type="Text/css"> class="dropbtn">DropDown<divclass="dropdown"> <ulclass="Dropdownul"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> </div> </div> </body>
So the class is dropBtn our parent view, and the corresponding child view is the div for the class dropdown . There is also a list in it ul , and all we need to do is div.dropdown set the display property to none first.
Div.dropbtn Div.dropdown {    display:none;}
Then, the effect is when the mouse slides onto the div.dropbtn, the list is displayed.
Then you can write it that way.
Div.dropBtn:hover Div.dropdown {    display:inline;}
Get.
The complete CSS file is as follows.
* {    margin:0px;    padding:0px;} div.dropbtn {    width:100px;    Background:green;} Div.dropbtn Div.dropdown {    display:none;} Div.dropBtn:hover Div.dropdown {    display:inline;} Div.dropdown {    position:relative;}
ul.dropdownul {    width: 100%;}li {    list-style: none;    display: block;    background: yellow;    height: 40px;}li:hover {    background: red;}li a {    display: block;    text-decoration: none;    text-align: center;}
Explain.

 
 

  
  
 
   
The first paragraph is to set the margin and padding of all selectors to 0 to prevent some messy problems.
 
   
The second paragraph sets the width of the outermost div
 
   
In the third paragraph, we'll hide the div.dropdown inside.
 
   
Div.dropBtn:hover Div.dropdown This sentence is detected when the mouse moved to the outermost div when the inside of the div display
 
  
 
 
Complete.
iOS development How to learn the front end (2)