>> Site Map >> Forums >> JavaScript_HTML

Forum module - topics in forum:

JavaScript_HTML - tìm hiểu và trao đỏi các mã java để làm trang web bạn sinh động hơn, các thủ thuật code html css

CSS examples - Ví dụ về Thẻ CSS

Below is an example of a CSS menu. Copy the code into an html page

Code: :

[color=darkred]<style type="text/css">
#menu {
display: block;
border: solid 1px rgb(190,60,40);
list-style: none;
text-align: left;
width: 85px;
margin: 0px;
padding: 0px;
background-color: white;
}
#menu li {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
#menu a {
font-size: 16px;
font-weight: bold;
height: 18px;
text-decoration: none;
display: block;
color: rgb(79,79,79);
padding: 0px 0px 0px 6px;
background: rgb(244,244,244);
border-left: 4px solid rgb(200,200,200);
border-right: 4px solid rgb(200,200,200);
}
#menu a:hover {
background: rgb(232,232,232);
color: rgb(190,60,40);
border-left: 4px solid rgb(190,60,40);
border-right: 4px solid rgb(190,60,40);
}
</style>
<ul id="menu">
<li style="margin-top: 4px;"><a href="#" onfocus="this.blur();">Home</a></li>
<li><a href="#" onfocus="this.blur();">Music</a></li>
<li><a href="#" onfocus="this.blur();">Pictures</a></li>
<li><a href="#" onfocus="this.blur();">About</a></li>
</ul>[/color]

Below are some CSS centering techniques. Copy the code into an html page.

Code: :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body style="margin: 0px auto; width: 500px; border: solid 1px black; padding: 20px;">
this is how you can center a page by using CSS in the body
<div style = "width: 300px; margin: auto; border: solid 1px black;">
this is how you can center a division
</div>
<div style="position: absolute; top: 100px; left: 50%; width: 300px; margin-left: -150px; border: solid 1px black;">
this is how you can center in a specific spot
</div>

Below is an example a three column page using CSS. Copy the code into an html page.

Code: :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<body style="margin: 0px">
<div style="position: relative; width: 90%; margin: 10% auto; border: solid 1px black;">
<div style="margin-right: 200px; margin-left: 200px;">
this is the center column<br />it will resize
</div>
<div style="position: absolute; width: 200px; left: 0px; top: 0px; border-right: solid 1px black;">
this is the left column<br />it stays the same width
</div>
<div style="position: absolute; width: 200px; right: 0px; top: 0px; border-left: solid 1px black;">
this is the right column<br />it stays the same width
</div>
</div>

Below is an example using CSS for a PopUp. Copy the code into an html page.

Code: :

Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">here</span></a>
<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>
This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a></div>
</div>

Forum module - topics in forum:

Search from ALEXA