Google Chrome අලුත්ම බ්‍රව්සරය

Official Google Blog: A fresh take on the browser

google chrome beta මෙතනින් බාගත කරන්න !

- ටැබ් වෙන වෙනම process වෙන අතරම එක ටැබයක්‌ crash වූවත් බ්‍රවුසරය අක්‍රිය නොවේ.

- අද කාලයේ වැදගත් අංගයක්‌ වන javascript කාර්යක්‍ෂමව ක්‍රිය කරයි.

- තවත් අංග ගනනාවක්‌ ඉතා ආකර්ශනීය ලෙස මෙම චිත්‍ර කතා පෙලේ පැහැදිලි කෙරේ

google chrome චිත්‍ර කතාව

css | සරල css ඉගි

බ්‍රවුසර් කවුලුවේ මැදට පිටුව ගන්න හැටි

හරිම ලේසියි. main container (උදාහරණය අනුව wrapper) එකේ margin පහත පරිදි දෙන්න. මෙහි 0 යන්නෙන් උඩ මාජින් (margin-top) සහ auto යන්නෙන් දකුණුපස මාජින් (margin-right) අගයන් පෙන්වයි.

html

<div id="wrapper">
    <div id="content">
        site content goes here
    </div>
</div>

css

#wrapper { margin:0 auto; width:500px; }

#content { }

සබැදිය බලන්න

තීරු (columns)

floating කියන්නෙ css වල වැදගත්ම කොටසක්‌. අපි බලමු සරල තීරු 2ක පිටුවක්‌.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

සබැදිය බලන්න

දැන් අපි එකට පසුබිම් වර්ණයක්‌ දාල බලමු

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

සබැදිය බලන්න

වැඩේ හරිගියේ නෑ නේද. ෆයර් ෆොක්‌ස්‌ හි wrapper එකට දාපු පසුබිම් වර්නය පිටුවෙ උඩ කොටසේ පමනයි පෙනෙන්නෙ. මේකට හේතුව කලින් තීරු float කිරීම. මෙය නිවැරදි කරන්න අපිට float එක clear කරන්න වෙනව. ඒ සදහා පහත පරිදි float clear කල හිස් div‌ එකක්‌ යොදාගන්න පුලුවන්.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
    <div class="clearfloat"></div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

.clearfloat{
    clear:both;
}

සබැදිය බලන්න

තවත් ඉගි පසුවට!