|
خواننده های سایت را بدین وسیله خوشحال کنید!
این قسمت از قالب مربوط به مدل شناسی و معرفی کلاس های CSS قالب برای استفاده در ویرایشگر سایت می باشد.دانستن قسمتی از اطلاعات زبان ابرمتن HTML به استفاده کامل از این کلاس ها و قابلیت ها کمک می کند.
این قست مثالی از Heading 1 می باشد.
استفاده از تگ هدر 1 بسیار ساده می باشد. کافی است داده های خود را بین یک تگ باز و بسته h1 قرار دهید.
این قسمت مثالی از Heading 2 می باشد.
مانند قسمت قبل برای استفاده از کلاس هدر2 باید داده خود راداخل تگ h2 قرار دهید.
در صورتی که می خواهید قطعه کدی را داخل سایت قرار دهید و آن را از دیگر بخش ها متمایز کنید :
<pre> or <div class="code">
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
مثالی از تگ Heading 3 می باشد
بایستی از یک تگ باز و بسته h3 استفاده نمایید.
- این قسمت می تواند مثالی برای یک لیست شماره بندی شده باشد.
- کافیست از تگ ol به همراه li استفاده شود.
- شماره بندی ها بصورت خودکار انجام خواهد شد.
- مرورگر اینترنت اکسپلور6 این ویژگی را پشتیبانی نمی کند.
-
این قسمت مثالی از یک لیست بدون شماره بندی است.
-
کافیست از تگ های ul و li استفاده نمایید.
-
عملیات نقطه گذاری بصورت خودکار انجام خواهد شد.
-
این ویژگی در مرورگر اینترنت اکسپلورر6 پشتیبانی می شود.
-
قابلیت دیگر استفاده از چک لیست می باشد که می تواند بجای مورد بالا استفاده گردد.
-
به این منظور کافیست که کلاس ul خود را از نوع checklist تعریف کنید.
-
مسلما جذابیت چک لیست نیز مناسب می باشد.
< div class="bubble1"> <div> <div> <div> <div> متن حباب شما اینجا قرار بگیرد </div> </div> </div> </div></div>
حباب با لبه های هموار.
< div class="bubble2"> <div> متن حباب شما اینجا قرار بگیرد </div></div>
حباب با لبه های تیز.
< div class="bubble3"> <div> <div> <div> <div> متن حباب شما اینجا قرار بگیرد </div> </div> </div> </div></div>
حباب فکر با لبه های هموار.
< div class="bubble4"> <div> متن حباب شما اینجا قرار بگیرد </div></div>
حباب فکر با لبه های تیز.
<p class="stickynote">متن شما اینجا قرار بگیرد</p>
<p class="pinnote">متن شما اینجا قرار بگیرد</p>
<p class="clipnote">متن شما اینجا قرار بگیرد</p>
<p class="newspaper">متن شما اینجا قرار بگیرد</p>
<blockquote>متن نقل قول خود را اینجا قرار دهید</blockquote>
<div class="blockquote"><blockquote>متن نقل قول خود را اینجا قرار دهید</blockquote></div>
<div class="quote-hilite"><blockquote>متن نقل قول خود را اینجا قرار دهید</blockquote></div>
01<p class="blocknumber"><span class="bignumber">01</span>Your content goes here!</p>
02<p class="blocknumber"><span class="bignumber">02</span>Your content goes here!</p>
03<p class="blocknumber"><span class="bignumber">03</span>Your content goes here!</p>
<p class="error">متن اخطار را اینجا قرار دهید</p>
<p class="message">متن اطلاع رسانی خود را اینجا قرار دهید</p>
<p class="tips">متن خود را اینجا قرار دهید</p>
متن برجسته شده
<span class="highlight">متن برجسته خود را اینجا قرار دهید</span>
<p class="box-grey">کادر ساده به این صورت ایجاد می شود</p>
<p class="box-hilite">کادر برجسته به این صورت استفاده می شود</p>
متن عنوان کادر
<div class="captionBox"><h3>عنوان کادر</h3>متن داخل کادر اینجا قرار می گیرد</div>
متن عنوان کادر
<div class="captionBox-hilite"><h3>عنوان کادر</h3>متن داخل کادر اینجا قرار می گیرد</div>
متن عنوان کادر
<div class="story-hilite"><h3>عنوان کادر</h3>متن داخل کادر اینجا قرار می گیرد</div>
مثالی از قرار دادن کادر دور عکس :
<img src="your url" title="Your title" alt="Image name" class="border" />
|
مدل شناسی قالب 
