1. Adding Divs
Switchable steps:
2. Adding border
div {
border: 1px solid hotpink;
}
3. Adding background color
4. Adding paragraph example
5. Adding width
6. Adding height
7. Adding float
8. Adding clear
9. Adding position
10. Adding margin to div except div footer
/* Remember that you already have 4 div: header div, left, right and footer. */
/* CSS code begin here */
/* Hey, please global first */
div {
border-radius: 1px;
background-color: hotpink;
}
/* <selector> { <style-style-style> } */
/* id is kress(#). Class is dot(.) */
#header {
border: 1px solid green;
height:10%;
position: relative;
}
.left {
border: 1px solid blue;
position: relative;
width: 10%;
height: 80%;
float:left;
margin-top:10px;
margin-bottom:10px;
}
.right {
border: 1px solid yellow;
position:relative;
width:89%;
height:80%;
float:right;
margin-top:10px;
margin-bottom:10px;
}
#footer {
border: 1px solid red;
position:relative;
width:100%;
height:10%;
clear:both;
}
<head>
<link type="text/css" href="mystylesheet.css" rel="stylesheet" />
</head>
<body>
<!--- We can use 2 types of naming upon a tag (for i.e. "div"): using 'id' and using 'class'--->
<div id="header"><p>This is header</p></div>
<div class="left"><p>This is left</p></div>
<div class="right">This is right</div>
<div id="footer">This is footer</div>
</body>
11. Adding content to each div. I mean replace the point (4) result.
Dealing with link
12. Adding list using external javascript
Method/Type 1:
Type 2:
13.
14. Manipulate the link styles point (12)
- text-decoration
- when not visited
- when visited
- when hover
14.
Switchable steps:
2. Adding border
div {
border: 1px solid hotpink;
}
3. Adding background color
4. Adding paragraph example
5. Adding width
6. Adding height
7. Adding float
8. Adding clear
9. Adding position
10. Adding margin to div except div footer
/* Remember that you already have 4 div: header div, left, right and footer. */
/* CSS code begin here */
/* Hey, please global first */
div {
border-radius: 1px;
background-color: hotpink;
}
/* <selector> { <style-style-style> } */
/* id is kress(#). Class is dot(.) */
#header {
border: 1px solid green;
height:10%;
position: relative;
}
.left {
border: 1px solid blue;
position: relative;
width: 10%;
height: 80%;
float:left;
margin-top:10px;
margin-bottom:10px;
}
.right {
border: 1px solid yellow;
position:relative;
width:89%;
height:80%;
float:right;
margin-top:10px;
margin-bottom:10px;
}
#footer {
border: 1px solid red;
position:relative;
width:100%;
height:10%;
clear:both;
}
<head>
<link type="text/css" href="mystylesheet.css" rel="stylesheet" />
</head>
<body>
<!--- We can use 2 types of naming upon a tag (for i.e. "div"): using 'id' and using 'class'--->
<div id="header"><p>This is header</p></div>
<div class="left"><p>This is left</p></div>
<div class="right">This is right</div>
<div id="footer">This is footer</div>
</body>
11. Adding content to each div. I mean replace the point (4) result.
Dealing with link
12. Adding list using external javascript
Method/Type 1:
document.getElementById("links").innerHTML = "<ul id='menu'>" +
"<li><a href='http://www.google.com'>News</a></li>"+
"<li><a href='http://www.yahoo.com'>Sports</a></li>"+
"</ul>";
Type 2:
13.
14. Manipulate the link styles point (12)
- text-decoration
- when not visited
- when visited
- when hover
14.
No comments:
Post a Comment