Home > Developer > Web Develop
9. Class of CSS and ID selector
The difference between ID and class is that the same ID can only be used once for a page, and class can be unrestricted.
Similarly, you can use a selector after the HTML selector to specify special HTML elements, such as the p.jam{value}, to act on the paragraph with the ' Jam ' class attribute.
10. This is almost forgotten. Page layout
Clear float disply and so on, about the website with div+css mainly use this good.
Summary: Basically all the same, the concept of CSS has a understanding, we must be doing web development, but css,html front-end we can not know, to know a ballpark, check the data also know how to check on the line. So I'm going to do a demo to show it next. Tonight, I hope that you support the Black Knight, I am also a very old rookie, now step into the web between, I hope we can help, thanks ~
11. Walkthrough Html+css
Since my goal is to learn web development, so this html+css does not require too fine, to understand the approximate, in the future I get an instance can change on the line, this is my purpose. Don't know what everyone is asking for.
Next I will change the Baidu page, because I am more lazy, than the larger page may not have the patience to do, just imitate Baidu Bar, do not know this two days to learn the line.
First of all see this cloth, I first analyze the structure, using HTML to get the structure out, and then look at the way the expression is defined by CSS.
Code to copy code as follows
<title>html+css baidu.com demo</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link href= "Css/css.css" rel= "stylesheet" type= "Text/css"/>
<body>
<div id= "box" >
<div id= "Login" ><a href= "#" > Login </a></div>
<div id= "Log" ></div>
<div id= "TXT" >
<ul>
<li><a href= "#" > News </a></li>
<li><a href= "#" > Web </a></li>
<li><a href= "#" > Paste </a></li>
<li><a href= "#" > Know </a></li>
<li><a href= "#" >MP3</a></li>
<li><a href= "#" > Pictures </a></li>
<li><a href= "#" > Video </a></li>
</ul>
</div>
<div id= "IPT" > (www.111cn.net)
<input type= "Text"/>
<input type= "button" value= "Baidu a Bit" id= "btn"/>
</div>
<div id= "Help" >
<ul>
<li><a href= "#" > Help </a></li>
<li><a href= "#" > Search </a></li>
</ul>
</div>
<div id= "link" >
<ul>
<li><a href= "#" > Corporate Promotion </a></li>
<li><a href= "#" > Search Leaderboards </a></li>
<li><a href= "#" > About Baidu </a></li>
<li><a href= "#" >about baidu</a></li>
</ul>
</div>
<div id= "Copy" >& #169, Baidu <a href= "#" > Use Baidu Pre-read Beijing ICP Card No. No. 030173 </a></div>
</div>
</body>
body{
width:98%;
margin:0px Auto;
}
#login {
Float:right;
font-size:12px;
padding-top:7px;
}
#log {
Background-image:url (.. /images/log.gif);
height:129px;
padding:0;
Background-repeat:no-repeat;
Background-position:center;
}
#txt ul{
Float:left;
}
Input #btn {
Color:blue;
}
#nav {
margin:0px Auto;
height:200px;
}
#link ul{
margin:0px Auto;
Color:black;
Float:left;
}
#copy {
Clear:both;
Text-align:center;
Color: #7777cc;
font-size:12px;
}
#copy a{
Color: #7777cc;
}
From:http://www.111cn.net/cssdiv/56/f4164fcc3cd74141c519e1e5313289c4.htm
CSS class and ID selector
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
