Home > Developer > Web Develop
Okay, in the last 11 lessons.
We learned a lot from the state of ignorance about programming languages.
Including HTML page structure, CSS introduced in several ways, floating, clear floating, box model and so on
Now is the time to play with this knowledge.
When we surf the web, we don't know if anyone has noticed.
There is a navigation at the top of the page, such as
It also highlights when the mouse is moved in
So we're going to use what we've learned today to do such a navigation.
First of all, can you imagine what the approximate structure of this navigation looks like?
You can't have a big div on the outside as a parent.
Then put 4 small div inside, a div inside is a
Of course not.
But what we need to keep in mind is
In addition to the effect of the HTML we write, we should also pay attention to its semantics
This means that the div tag is used to determine the specific structure of the page
So try not to use Div to represent a paragraph in the page
Because the P tag is specifically designed to show the paragraph in the article
Our place is the same.
As long as you see it, there are several items lined up.
The first reaction should be to use a list
Here is no exception, we have to use UL and Li to achieve this structure
The specific code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Xxx</title> <styletype= "Text/css"> *{margin:0;padding:0;} </style></Head><Body> <ul class= "Navwrap"> <Li>Course</Li> <Li>Plan</Li> <Li>Share</Li> <Li>Community</Li> </ul></Body></HTML>
This time preview, presumably the result is 108,000 miles from the expected
Everything's in the corner of the upper left.
And the people are navigating sideways, and we're lined up.
So the first problem is solved first.
How to make our navigation a little bit farther from the bounds of the browser so we can see
At this point, we should be able to think of our box model
We give the outermost ul plus a margin:100px;
It's so much easier to see.
OK, let me say a little more nonsense, we add margin:0 auto; Do you want it to be centered?
The answer is no.
Because we did not give UL width
and the browser does not automatically calculate how wide the UL
So the browser has no way to know how wide our UL
So even knowing how wide the browser is now
Also can not get UL to both sides of the distance
Okay, besides, there's another thing that's annoying when you add a margin.
There's a little black dot in front of every word.
Remember, I didn't know what class was mentioned before.
This thing is a style that Li comes with, called List-style.
Look at not pleasing to the words can be directly to it to kill--list-style:none;
This thing we generally do not need, so you can add Li{list-style:none on top of all styles;}
* {margin:0; padding:0;} Li {List-style: none;} . Navwrap { margin:100px;}And then we're going to solve the second problem by trying to get them across.
We have introduced this before, that is, with float:left;
Plus, the effect is
Of course, the problem is obvious at this point.
It's all packed together.
Of course this problem is very good, give Li plus padding on OK
But what's more serious than this is that when the child element floats, the height of the parent element becomes 0.
Which means UL's height is now 0.
I don't know if you've noticed that.
But there's got to be some dude to refute.
I don't see any good on this page.
Yes, it's good, now we'll add a border to UL and look at it.
Why is there a thick black line on the top of the text?
The reason is very simple, because the UL height became 0, so the upper and lower border squeezed together
As for the UL height became 0 the consequences of going through the front of the course, no more nonsense
And here we know what to do.
That's clear float.
The way to clear the float is to add the. Clear:after class to the parent.
This knowledge has been introduced before, we will not say more
<style type= "Text/css" > *{margin:0;padding:0;}Li{List-style:None;}. Clear:after{content:"";Display:Block;Clear:both;}. Navwrap{margin:100px;Border:1px solid Black;}. Navwrap Li{float: Left;padding:30px;}</style>
Looks like it came out, and finally some sort of cosmetic work.
We give Li a background, about the color of the background, a lot of nonsense
We used to basically use red, yellow, black to represent the color.
But how many colors do you think these words can represent?
So the color has another way of saying that is hexadecimal notation
This representation method uses a # number followed by a 3-bit or 6-digit hexadecimal number
Note that it is a hexadecimal number, so the number after # may be 0 1 2 3 4 5 6 7 8 9 a B c D E F
When the # number is followed by a three-digit hexadecimal number, each digit from left to right represents a red light, a strong green light, and a strong blue light.
When the # number is followed by a six-digit hexadecimal number, each of the two-bit groups from left to right represents the red light intensity, green light intensity, blue light intensity, respectively.
The intensity of light is the strength of light, and this is in physics that everyone should have been exposed to.
For example: #FF0000或者 #f00 is red
#00FF00或者 #0f0 on behalf of the Green
#00CC00或者 #0c0 represent a slightly darker green than #00ff00, because the light is weakened .
If the three-bit or six-digit hexadecimal number is written as 0, that is, #000000 or #000, it represents a light intensity of 0
That is, without light, it is black.
If the three-bit or six-digit hexadecimal number is written as F, either #ffffff or #fff
On behalf of the red, green, blue color of the three colors are the strongest light intensity irradiation
So it's white.
So the closer we get to the #fff, the whiter the color.
And the closer #000, the darker the color.
Here we give Li a background for the #333 color
Then you must change the color of the text to white, or a dark
So also add color: #FFF;
Okay, now it feels more and more like
But what color or color is the mouse move up?
So we'll add one last sentence. Navwrap li:hover{background: #777;}
The final code, I'll post it for you.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Xxx</title> <styletype= "Text/css"> *{margin:0;padding:0;}Li{List-style:None;}. Clear:after{content:"";Display:Block;Clear:both;}. Navwrap{margin:100px;Border:1px solid Black;}. Navwrap Li{float: Left;padding:30px;background:#333;Color:#FFF;}. Navwrap Li:hover{background:#777;} </style></Head><Body> <ulclass= "Clear Navwrap"> <Li>Course</Li> <Li>Plan</Li> <Li>Share</Li> <Li>Community</Li> </ul></Body></HTML>
Okay, see here, don't be so happy.
We have a lot of details on this navigation.
For example: In general, we can see the navigation mouse moved up to become a small hand
But none of ours.
Second, if we change the last li inside into a "community discussion" four words
Then the corresponding Li will automatically widen
Of course, you might think it's good, and you can adapt.
But it also brings with it a less beautiful problem.
Because we sometimes want the width of each item to be the same, so it looks a little more neat.
But our current program is difficult to achieve this effect.
So we have a lot to talk about this navigation.
We'll see you next class.
Web front end from getting started to mastering -12 CSS Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
