Yes , now we will do some work.I want to show my guests their browser deails.And i want to give advice to my guests about their browsers.
First you can see the online demo to see what it will look like :
www.lkq.net/details.html
www.lkq.net/details2.html
Whats your Browser ? ;
Here is the script :
<script type=”text/javascript”>
document.write(”<p><strong>Browser Type : “);
document.write(navigator.appName + “</p>”);
document.write(”<p>Version: “);
document.write(navigator.appVersion + “</p>”);
document.write(”<p>Platform: “);
document.write(navigator.platform + “</p>”);
document.write(”<p>Cookies enabled: “);
document.write(navigator.cookieEnabled + “</p></strong>”);
</script>
Alert msg and good or not script :
<script type=”text/javascript”>
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser==”Netscape”||browser==”Microsoft Internet Explorer”) && (version>=5))
{
alert(”I like your browser mate”);
}
else
{
alert(”Mate , you must upgrade your browser”);
}
}
</script>
BRB
hey its easy to do it …
”
<html>
<head>
<script type=”text/javascript”>
function message()
{
alert(”Its an alert box”);
}
</script>
</head>
<body onload=”message()”>
</body>
</html>
”
gotcha ?
You can beautify your links via css.Let me show something.
<style type=”text/css”>
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
and there is our text :
<b><a class=”one” href=”#” target=”_blank”>This link changes color</a></b>
like that …..
You should try this code
Its so easy to do it.Here is the DEMO : www.lkq.net/demo4.html
Now we can start ….
Here is css code :
<style type=”text/css”>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:darkblue;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
here is our text :
<ul>
<li><a href=”#”>Example 1</a></li>
<li><a href=”#”>Example 2</a></li>
<li><a href=”#”>Example 3</a></li>
<li><a href=”#”>Example 4</a></li>
</ul>
<style type=”text/css”>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
</style>
text :
<ul class=”disc”>
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”circle”>
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”square”>
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”none”>
<li>The “none” type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”decimal”>
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”decimal-leading-zero”>
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”lower-roman”>
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”upper-roman”>
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”lower-alpha”>
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class=”upper-alpha”>
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Online Demo : www.lkq.net/demo3.html
here is our css :
<style type=”text/css”>
td.example {padding: 1.5cm}
</style>
and here is our table :
<table border=”1″>
<tr>
<td class=”example”>
Example created by lkq.net
</td>
</tr>
</table>
its for top :
<style type=”text/css”>
p.example
{
border-color:red;
border-style: solid;
border-top-width: 15px
}
</style>
its for bottom :
<style type=”text/css”>
p.example
{
border-color:red;
border-style: solid;
border-bottom-width: 15px
}
</style>
here is our text :
<p class=”example”>Note : This is an important note </p>
here is the css code for top :
<style type=”text/css”>
a
{
border-top: medium solid red
}
</style>
here is the code for bottom :
<style type=”text/css”>
a
{
border-bottom: medium solid red
}
</style>
here is our text :
<a>Example</a>
Use top or bottom .
<style type=”text/css”>
p.up {text-transform: uppercase}
p.low{text-transform: lowercase}
p.cap {text-transform: capitalize}
</style>
text code :
<body>
<p class=”up”>example</p>
<p class=”low”>example</p>
<p class=”cap”>example</p>
</body>
here is our style css :
<style type=”text/css”>
a {text-decoration: overline}
b {text-decoration: line-through}
c {text-decoration: underline}
d {text-decoration: none}
</style>
here is text :
<a>Example 1</a>
<b>Example 2</b>
<c>Example 3</c>
<d>Example 4</d>
Online Demo : www.lkq.net/demo2.html