Home > Developer > Web Develop
#id
. class
These two are the first to remember. The ID is <a id= "Sth" > Sth,class is <ul class= "Oth" > in Oth, very good remember
Margin
Lao Kee Cheng Marign ... Seems to be align harm, the introduction is "layer of the border outside the blank"-in the film from here
:
That is, the outermost is the margin, the most inner is padding, is the box model {main definition Four regions: content, Border spacing (padding), boundary (border) and margin (margin)} Two of the most commonly used border decoration markers.
In combination with the above, here's an example
<HTML> <Head> <style>#header{margin:0;padding:0;}. Item{margin:0;padding:0;} </style> </Head> <Body> <DivID= "header"> <H1>Title<H1> </Div> <ulclass= "Item"> <Li><ahref="#">Academic information</a></Li> <Li><ahref="#">Contest information</a></Li> </ul> </Body></HTML>
The effect is this:
.. Well, the blue word, also underlined. So what about the blue <a> anchor?
A:link, a:visited {color:black; text-decoration: none;} a:hover, A:active {color:red; text-decoration: none;}Text-decoration:none, and color:black; the blue should be resolved in an instant, but also add a little light to the <a> anchor (hover property controls the mouse hover effect), high-end
The code is like this
<HTML> <Head> <style>#header{margin:0;padding:0;Color:Seagreen;}. Item{margin:0;padding:0;}. Item Li{List-style-type:None;}A:link, a:visited{Color:Black;text-decoration:None;}a:hover, A:active{Color:Red;text-decoration:None;} </style> </Head> <Body> <DivID= "header"> <H1>Title<H1> </Div> <ulclass= "Item"> <Li><ahref="#">Academic information</a></Li> <Li><ahref="#">Contest information</a></Li> </Body></HTML>
So look at the effect.
Chrome:theworld:
Sure enough or chrome is good-looking, some students should notice the title of the color changed, Seagreen this color is really good-looking, recommended!
Look at the effect of hover (mouse hovering).
It's much nicer, isn't it?
That's right.. Some browsers <ul> there will be small dots, it is suggested <ul style= "List-style-type:none", but this is not conducive to post-maintenance, it should be placed in CSS, I was so realized, in style add a sentence. Item li{ List-style-type:none;} Instantly solve the small dot of ul label.
Then also note that Chrome's cache problem is more serious, change the CSS does not change, it is necessary to see whether the cache harm, change a browser or clear the cache to try, also recommended the use of Firefox, installed on the Firebug is also very suitable for development, But there is no chrome launcher fast, how to choose to see a personal hobby it.
It's here today.
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
