It may be very trivial or unimportant thing to most, but for me, it was a dream come true. I observed most of the people who do not work on HTML / UI Development, are really not interested in how do they create this UI, but not sure how, I am very fond of it.
After hearing much about jQuery and CSS, and observing www.bbc.com and www.google.org, I was wondering, how they have developed this site.
Just simply open these sites from FireFox browser - if you open those from IE you can see the html code but won't able to see the css behind those.
To start with, we will first see the www.bbc.com, which is full of css3 and jQuery. Image Rotation, Panels and number of things are with jQuery and definetly of css.
Here, we see how the right pan of bbc.com is made of...that is, when you scroll your mouse, numbering gets lighten.
Below is the basic code without applying css and it looks like below --
<html>
<div id="mostPopular_tabset_watched" class="selected panel">
<ul class="blq-clearfix">
<li class="ol0 first-child">
<a rev="mostpopular|homepage|na|r|t|i|text|content" href="http://www.bbc.co.uk/news/world-us-canada-15319106"><span class="livestats-icon livestats-1">1: </span>Mandar</a> </li>
<li class="ol1">
<a rev="mostpopular|homepage|na|r|t|i|text|content" href="http://www.bbc.co.uk/2/hi/8148527.stm"><span class="livestats-icon livestats-2">2: </span>Korea plane lands on its tail</a> </li>
<li class="ol2">
<a rev="mostpopular|homepage|na|r|t|i|text|content" href="http://www.bbc.co.uk/2/hi/asia-pacific/7874393.stm"><span class="livestats-icon livestats-3">3: </span>Australian pilot does a 'Hudson'</a> </li>
<li class="ol3">
<a rev="mostpopular|homepage|na|r|t|i|text|content" href="http://www.bbc.co.uk/2/hi/programmes/click_online/9615908.stm"><span class="livestats-icon livestats-4">4: </span>Ceatec - pushing a touch screen's buttons</a> </li>
<li class="ol4">
<a rev="mostpopular|homepage|na|r|t|i|text|content" href="http://www.bbc.co.uk/news/video_and_audio/"><span class="livestats-icon livestats-5">5: </span>One-minute World News</a> </li>
</ul>
</div>
</html>
No comments:
Post a Comment