know yourselves. information, computer, 7 wonders, various.

Wednesday, September 7, 2016

css_part21




Unordered list-এর ব্যবহার (list- style- type)
Unordered list গুলি Bullet বা Image দিয়ে লেখা হয়। list-style-type প্রোপার্টির Value হচ্ছে  none, circle, disc (ডিফল্ট) এবং square সুতরাং তৈরী করুন নিচের মত প্রোগ্রাম

নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS List Style </title>
<style>
ul.a {list-style-type:none;}
ul.b {list-style-type:circle;}
ul.c {list-style-type::disc;}
ul.d {list-style-type:square;}
</style>
</head>

<body>
<p>Unordered lists:</p>
<ul> <!for default value>
     <li> Photoshop.</li>
    <li> Illustrator.</li>
    <li> Page Maker.</li>
</ul>
<ul class="a">
     <li> Photoshop.</li>
    <li> Illustrator.</li>
    <li> Page Maker.</li>
</ul>
<ul class="b">
     <li> Photoshop.</li>
    <li> Illustrator.</li>
    <li> Page Maker.</li>
</ul>





<ul class="c">
     <li> Photoshop.</li>
    <li> Illustrator.</li>
    <li> Page Maker.</li>
</ul>
<ul class="d">
     <li> Photoshop.</li>
    <li> Illustrator.</li>
    <li> Page Maker.</li>
</ul>
</body>
</html>
</html>

ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।





নিচে Unordered Ordered লিষ্ট ব্যবহার করে একটি প্রোগ্রাম তৈরী করা হয়েছে । আপনিও করুন।


নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS List Style </title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

.u {float=left; list-style-type:none;}
.v {list-style-type:inherit;}
</style>
</head>
<body>
<ul class="a"> <li>Circle type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ul>

<ul class="b"> <li>Disc type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ul>
<ul class="c"> <li>Square type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ul>
<ol class="d"> <li>Armenian type</li> <li> Photoshop.</li>    <li> Illustrator.</li> </ol>
<ol class="e"> <li>Cjk-ideographic type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="f"> <li>Decimal type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="g"> <li>D.-leading-zero type</li><li> Photoshop.</li><li> Illustrator.</li> </ol>
<ol class="h"> <li>Georgian type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="i"> <li>Hebrew type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="j"> <li>Hiragana type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="k"> <li>H-iroha type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="l"> <li>Katakana type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="m"> <li>K-iroha type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="n"> <li>Lower-alpha type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="o"> <li>Lower-greek type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="p"> <li>Lower-latin type</li><li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="q"> <li>Lower-roman type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="r"> <li>Upper-alpha type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="s"> <li>Upper-latin type</li><li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="t"> <li>Upper-roman type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="u" > <li>None type</li><li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ol class="v"> <li>inherit type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ol>
<ul class="u" > <li>None type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ul>
<ul class="v"> <li>inherit type</li> <li> Photoshop.</li> <li> Illustrator.</li> </ul>
</body>
</html>
</html>

ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।

Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************
Next_


Part- 02:  Inline Style