Showing source for: https://shaghayegh.blogsky.com/
Duration: 0.820792s
Server: WSGIServer/0.1 Python/2.6.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="شقایق" />
<title>شقایق</title>
<link href="https://www.blogsky.com/styles/bs_4-3-1" rel="stylesheet" />
<link href="https://www.blogsky.com/styles/blog?v=HAuGKxrswTR5CRV-Wo8DCWY_MiXnkvEGm8f_e3RmDjA1" rel="stylesheet" />
<script src="https://www.blogsky.com/scripts/common?v=CACPrxaTTw_oCcIuoCjL-YKojLsRhJBlKfNEKBGNxr01"></script>
<link rel="canonical" href="https://shaghayegh.blogsky.com" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"headline": "شقایق",
"alternativeHeadline": "شقایق",
"description": "شقایقازشقایق",
"publisher": {
"@type": "Organization",
"name": "شقایق",
"url": "https://shaghayegh.blogsky.com",
"logo": {
"@type": "ImageObject",
"url": "https://www.blogsky.com/images/site/default-blog-avatar-96x96.jpg",
"width": "96",
"height": "96"
}
},
"url": "https://shaghayegh.blogsky.com",
"author": {
"@type": "person",
"name": "خانم ش"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://shaghayegh.blogsky.com"
}
}
</script>
<meta property="og:site_name" content="بلاگ اسکای - سرویس رایگان وبلاگ فارسی" />
<meta property="og:url" content="https://shaghayegh.blogsky.com" />
<meta property="og:type" content="Blog" />
<meta property="og:title" content="شقایق" />
<meta property="og:description" content="شقایقازشقایق" />
<meta property="og:image" content="https://www.blogsky.com/images/site/default-blog-avatar-96x96.jpg" />
<meta property="og:image:width" content="96" />
<meta property="og:image:height" content="96" />
<meta property="og:image:alt" content="شقایق" />
<meta property="og:image:type" content="image/jpg" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:title" content="شقایق" />
<meta property="twitter:description" content="شقایقازشقایق" />
<meta property="twitter:url" content="https://shaghayegh.blogsky.com" />
<meta property="twitter:image" content="https://www.blogsky.com/images/site/default-blog-avatar-96x96.jpg" />
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
<meta name="DC.Identifier" content="https://shaghayegh.blogsky.com" />
<meta name="DC.Type" content="Blog" />
<meta name="DC.Title" content="شقایق" />
<meta name="DC.Description" content="شقایقازشقایق" />
<meta name="DC.Publisher" content="https://shaghayegh.blogsky.com" />
<meta name="DC.Creator" content="خانم ش" />
<meta name="DC.Format" content="text/html" />
</head>
<body class="color-blue-dark mb-2">
<div class="container-fluid main-container">
<div class="row fixed-top sticky-nav shadow mx-0 mx-lg-n3 rellax" data-rellax-speed="-3">
<div class="col-12 nav-wrapper p-relative">
<div class="row justify-content-center">
<nav class="col-12 col-xl-9 nav-bar d-flex align-items-center">
<button class="d-lg-none btn pr-0 pl-4" id="sidebar-button">
<i class="bx bx-menu"></i>
</button>
<a href="https://shaghayegh.blogsky.com" class="ml-3 text-decoration-none">خانه</a>
<a href="/posts" class="ml-3 text-decoration-none">عناوین مطالب</a>
<a href="/contact" class="ml-3 text-decoration-none">تماس با من</a>
</nav>
</div>
<progress class="reading-progress" min="0" max="100"></progress>
</div>
</div>
<div class="parallax-container row justify-content-center shadow-sm rellax" data-rellax-speed="-3">
<header class="col-12 hero-image" style="background-image:url('https://www.blogsky.com/images/art-theme/1-1920x318.jpg')">
<div class="row justify-content-center">
<div class="col-12 col-xl-9">
<div class="d-flex justify-content-between align-items-center">
<div class="blog-info d-flex align-items-center">
<div class="wrapper">
<h1 class="blog-title d-none d-md-block">
<a href="https://shaghayegh.blogsky.com" title="شقایق" class="text-decoration-none">شقایق</a>
</h1>
<span class="blog-description d-none d-md-block"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="blog-info-mobile" class="blog-info-mobile d-flex d-md-none flex-column position-static ml-auto px-3">
<h1 class="blog-title-mobile my-3">
<a href="https://shaghayegh.blogsky.com" title="شقایق" class="text-decoration-none text-body">شقایق</a>
</h1>
<small class="blog-description collapsable mb-3"></small>
</div>
</div>
<div class="row justify-content-center body-background content-container pt-md-4">
<div class="col-12 col-lg-4 col-xl-3 sidebar-wrapper">
<div class="sidebar" id="sidebar">
<div class="menu">
<h3 class="title mb-3">درباره من</h3>
<div class="about-wrapper">
<small>
http://shaghayegh.blogsky.com
<a href="/profile/6659548288" target="_blank" class="d-inline-block">ادامه...</a>
</small>
<div style="clear: both"></div>
</div>
</div>
<div class="menu link-box">
<div class="head d-flex justify-content-between align-items-start mb-3">
<h3 class="title">روزانهها</h3>
<a href="/dailylink" class="text-decoration-none">همه</a>
</div>
<ul>
<li>
<a href="/dailylink/?go=http%3a%2f%2fweblog.mehraban.ir%2fpersian_papers%2fnokte-mohem-gabl-az-kharid-service-adsl%2f&id=50" target="_blank" title="1387/12/10">نکته مهم قبل از خرید سرویس ADSL</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2frojina_luli.persianblog.ir&id=49" target="_blank" title="1387/12/01">وبلاگ روژینای سیزده ساله</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fimilad.com%2f1387%2f10%2f08%2fonline-bill-pay%2f&id=48" target="_blank" title="1387/11/21">راهنمای آموزش پرداخت قبوض به صورت الکترونیکی و آنلاین!</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fwww.iranbazi.net%2f&id=47" target="_blank" title="1387/11/20">بازیهای آنلاین رایگان</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fwww.kazeroon.net%2fgoonagoon%2femza.htm&id=46" target="_blank" title="1387/11/20">امضا شناسی</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fhendoone.wordpress.com%2f2009%2f02%2f06%2f24-fingers-and-toes%2f&id=45" target="_blank" title="1387/11/19">کودکی با 24 انگشت!</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fwww.shaboroz.com%2fsite%2findex.php%3fnewsid%3d309&id=44" target="_blank" title="1387/11/16">کودکی که صحنه مرگ خود را یک روز قبل نقاشی کرد</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fonestepahead.blogsky.com%2f1387%2f11%2f11%2fpost-4%2f&id=43" target="_blank" title="1387/11/11">صفحهی اول سایت یاهو از سال 1994 تا 2009</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2f1pezeshk.com%2farchives%2f2009%2f01%2fmixed-twins.html&id=42" target="_blank" title="1387/11/06">دوقلوهای سیاه و سفید</a>
</li>
<li>
<a href="/dailylink/?go=http%3a%2f%2fwww.businesspundit.com%2f25-hottest-women-of-business%2f&id=41" target="_blank" title="1387/10/26">زیباترین زنان دنیای تجارت</a>
</li>
</ul>
</div>
<div class="menu link-box">
<h3 class="title mb-3">پیوندها</h3>
<ul>
<li>
<a rel="nofollow noopener" href="http://www.writeage.com" target="_blank" title="l writeage عصر نوشتن">l writeage عصر نوشتن</a>
</li>
<li>
<a rel="nofollow noopener" href="http://fal4u.com" target="_blank" title="فال">فال</a>
</li>
<li>
<a href="http://121.blogsky.com" target="_blank" title="عشق دو نفره">عشق دو نفره</a>
</li>
<li>
<a href="http://www.alimehdipour.blogsky.com/" target="_blank" title="سفر یعنی زندگی">سفر یعنی زندگی</a>
</li>
<li>
<a rel="nofollow noopener" href="http://gijali.com" target="_blank" title="گیجعلی">گیجعلی</a>
</li>
<li>
<a rel="nofollow noopener" href="http://dayyertashbad.blogfa.com" target="_blank" title="دیر تش باد">دیر تش باد</a>
</li>
<li>
<a href="http://www.azfarshid.blogsky.com" target="_blank" title="ایران - خوزستان">ایران - خوزستان</a>
</li>
<li>
<a rel="nofollow noopener" href="http://aliha.ir/" target="_blank" title="خاطرات یک برنامه نویس">خاطرات یک برنامه نویس</a>
</li>
<li>
<a href="http://busy.blogsky.com" target="_blank" title="ژاله">ژاله</a>
</li>
<li>
<a rel="nofollow noopener" href="http://arvinonline.wordpress.com" target="_blank" title="آروین آنلاین">آروین آنلاین</a>
</li>
<li>
<a href="http://barname.blogsky.com" target="_blank" title="بهترین دانلودها">بهترین دانلودها</a>
</li>
<li>
<a href="http://vosogh.blogsky.com" target="_blank" title="عشق الکی">عشق الکی</a>
</li>
<li>
<a href="http://anymoanyma.blogsky.com" target="_blank" title="صبا و پرهام">صبا و پرهام</a>
</li>
<li>
<a href="http://darentezarmojeze.blogsky.com" target="_blank" title="نوشته های من">نوشته های من</a>
</li>
<li>
<a rel="nofollow noopener" href="http://www.medriss.com/" target="_blank" title="مجله اینترنتی مدریس">مجله اینترنتی مدریس</a>
</li>
<li>
<a rel="nofollow noopener" href="http://nilouyee.blogfa.com" target="_blank" title="دانشگاه با طعم باران">دانشگاه با طعم باران</a>
</li>
<li>
<a href="http://www.nahang.blogsky.com" target="_blank" title="نخلستان سعدی">نخلستان سعدی</a>
</li>
<li>
<a href="http://kingofdl.blogsky.com" target="_blank" title="پادشاه دانلود ایران">پادشاه دانلود ایران</a>
</li>
<li>
<a rel="nofollow noopener" href="http://www.sazesetar.blogfa.com" target="_blank" title="سه تار">سه تار</a>
</li>
<li>
<a rel="nofollow noopener" href="http://etehadeiranian.blogfa.com" target="_blank" title="اتحاد ایرانیان">اتحاد ایرانیان</a>
</li>
<li>
<a href="http://future.blogsky.com/" target="_blank" title="بانک مقالات کامپیوتری">بانک مقالات کامپیوتری</a>
</li>
<li>
<a rel="nofollow noopener" href="http://www.mlbk.33ir.com" target="_blank" title="MLBK">MLBK</a>
</li>
<li>
<a rel="nofollow noopener" href="http://khaneyeirani.persianblog.ir/" target="_blank" title="کدبانو">کدبانو</a>
</li>
<li>
<a rel="nofollow noopener" href="http://akbar13.com" target="_blank" title="زخمه">زخمه</a>
</li>
<li>
<a href="http://ketabkhaneh.blogsky.com/" target="_blank" title="کتابخانه">کتابخانه</a>
</li>
<li>
<a rel="nofollow noopener" href="http://weblog.mehraban.ir" target="_blank" title="مهربان بلاگ">مهربان بلاگ</a>
</li>
<li>
<a rel="nofollow noopener" href="http://www.araieshgah.ir/" target="_blank" title="آرایشگاه">آرایشگاه</a>
<small class="description">آگهی رایگان مراکز زیبایی</small>
</li>
<li>
<a rel="nofollow noopener" href="http://www.araieshgah.com" target="_blank" title="نیازمندیهای آرایشی">نیازمندیهای آرایشی</a>
<small class="description">بانک اطلاعات آرایشی</small>
</li>
</ul>
</div>
<div class="menu link-box">
<h3 class="title mb-3">دستهها</h3>
<ul>
<li class="d-flex">
<a href="/category/cat-1" title="رازهای گوگل">
رازهای گوگل
<small class="counter badge badge-pill badge-primary mr-1">
12
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-2" title="عکسهای جالب">
عکسهای جالب
<small class="counter badge badge-pill badge-primary mr-1">
10
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-3" title="هاست رایگان">
هاست رایگان
<small class="counter badge badge-pill badge-primary mr-1">
1
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-4" title="نوشته های شخصی">
نوشته های شخصی
<small class="counter badge badge-pill badge-primary mr-1">
19
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-5" title="فوتوشاپ">
فوتوشاپ
<small class="counter badge badge-pill badge-primary mr-1">
2
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-6" title="اینترنت و ابزار وابسته">
اینترنت و ابزار وابسته
<small class="counter badge badge-pill badge-primary mr-1">
11
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-7" title="طراحی وب و ابزار">
طراحی وب و ابزار
<small class="counter badge badge-pill badge-primary mr-1">
2
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-8" title="معرفی سایت">
معرفی سایت
<small class="counter badge badge-pill badge-primary mr-1">
6
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-9" title="موضوعات جالب">
موضوعات جالب
<small class="counter badge badge-pill badge-primary mr-1">
11
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-10" title="موبایل">
موبایل
<small class="counter badge badge-pill badge-primary mr-1">
5
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-11" title="خبر">
خبر
<small class="counter badge badge-pill badge-primary mr-1">
14
</small>
</a>
</li>
<li class="d-flex">
<a href="/category/cat-12" title="آموزش css -طراحی صفحات وب">
آموزش css -طراحی صفحات وب
<small class="counter badge badge-pill badge-primary mr-1">
3
</small>
</a>
</li>
</ul>
</div>
<div class="menu link-box">
<h3 class="title mb-3">برگهها</h3>
<ul>
<li>
<a href="/test" title="[ بدون عنوان ]">[ بدون عنوان ]</a>
</li>
</ul>
</div>
<div class="menu link-box">
<div class="head d-flex justify-content-between align-items-start mb-3">
<h3 class="title">جدیدترین یادداشتها</h3>
<a href="/posts" class="text-decoration-none" title="لیست کامل عناوین یادداشتها">همه</a>
</div>
<ul>
<li>
</li>
<li>
<a href="/1394/03/09/post-129/%d8%a8%d9%87-%d8%b1%d9%88%d8%b2-%d8%b1%d8%b3%d8%a7%d9%86%db%8c" title="1394/03/09">
به روز رسانی
</a>
</li>
<li>
</li>
<li>
<a href="/1388/02/07/post-127/" title="1388/02/07">
چرا نیستم؟
</a>
</li>
<li>
</li>
<li>
<a href="/1387/11/16/post-125/" title="1387/11/16">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت سوم)
</a>
</li>
<li>
</li>
<li>
<a href="/1387/10/29/post-124/" title="1387/10/29">
وبلاگ شقایق + یه عالمه دوست خوب
</a>
</li>
<li>
</li>
<li>
<a href="/1387/10/04/post-123/" title="1387/10/04">
پرشین بلاگ و رویای پدرخوانده گی
</a>
</li>
<li>
</li>
<li>
<a href="/1387/09/28/post-122/" title="1387/09/28">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS - (قسمت دوم)
</a>
</li>
<li>
</li>
<li>
<a href="/1387/09/23/post-121/" title="1387/09/23">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت اول)
</a>
</li>
<li>
</li>
<li>
<a href="/1387/09/17/post-120/" title="1387/09/17">
مبارکه ه ه ه ه ه
</a>
</li>
<li>
</li>
<li>
<a href="/1387/08/26/post-119/" title="1387/08/26">
عجایب قریب الوقوع ...
</a>
</li>
<li>
</li>
<li>
<a href="/1387/08/22/post-118/" title="1387/08/22">
همه چیز در باره متاتگ ها ( Meta tags )
</a>
</li>
</ul>
</div>
<div class="menu link-box">
<h3 class="title mb-3">بایگانی</h3>
<ul>
<li>
<a href="/1394/03" title="خرداد 1394">خرداد 1394</a>
<small class="counter badge badge-pill badge-primary mr-1">1</small>
</li>
<li>
<a href="/1388/02" title="اردیبهشت 1388">اردیبهشت 1388</a>
<small class="counter badge badge-pill badge-primary mr-1">1</small>
</li>
<li>
<a href="/1387/11" title="بهمن 1387">بهمن 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">1</small>
</li>
<li>
<a href="/1387/10" title="دی 1387">دی 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">2</small>
</li>
<li>
<a href="/1387/09" title="آذر 1387">آذر 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">3</small>
</li>
<li>
<a href="/1387/08" title="آبان 1387">آبان 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">9</small>
</li>
<li>
<a href="/1387/07" title="مهر 1387">مهر 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">2</small>
</li>
<li>
<a href="/1387/06" title="شهریور 1387">شهریور 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">8</small>
</li>
<li>
<a href="/1387/05" title="مرداد 1387">مرداد 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">18</small>
</li>
<li>
<a href="/1387/04" title="تیر 1387">تیر 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">41</small>
</li>
<li>
<a href="/1387/03" title="خرداد 1387">خرداد 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">14</small>
</li>
<li>
<a href="/1387/02" title="اردیبهشت 1387">اردیبهشت 1387</a>
<small class="counter badge badge-pill badge-primary mr-1">1</small>
</li>
</ul>
</div>
<hr />
<div class="copyright d-flex justify-content-between flex-column flex-md-row mb-2">
<span> آمار : 866654 بازدید</span>
<a class="mt-2 mt-lg-0" href="https://www.blogsky.com">Powered by Blogsky</a>
</div>
</div>
</div>
<div class="col-12 col-lg-8 col-xl-6 main-wrapper">
<div class="post-box p-4 ">
<div class="content-wrapper">
<h2 class="post-title">
<i class="bx bxs-pin pin-icon" title="یادداشت سنجاقشده"></i>
<a href="/1394/03/09/post-129/%d8%a8%d9%87-%d8%b1%d9%88%d8%b2-%d8%b1%d8%b3%d8%a7%d9%86%db%8c" class="post-title-link text-decoration-none">
به روز رسانی
</a>
</h2>
<p>به زودی ...</p>
</div>
<div class="post-info pt-4 mt-3 d-flex flex-column flex-sm-row align-items-center">
<div class="author-info d-flex flex-column ml-auto">
<small class="post-date">1394/03/09 ساعت 12:18 ب.ظ</small>
</div>
<div class="buttons-wrapper d-flex flex-row align-items-center mt-2 mt-md-0 mr-auto mr-md-0">
</div>
</div>
</div>
<div class="post-box p-4 ">
<div class="content-wrapper">
<h2 class="post-title">
<i class="bx bxs-pin pin-icon" title="یادداشت سنجاقشده"></i>
<a href="/1388/02/07/post-127/" class="post-title-link text-decoration-none">
چرا نیستم؟
</a>
</h2>
<form action="/1388/02/07/post-127/" method="post">
<div class="password-wrapper card px-1 py-2">
<div class="card-body">
<small class="mb-3 d-block">
این مطلب توسط نویسندهاش رمزگذاری شده است و برای مشاهدهی آن احتیاج به
وارد کردن رمز عبور دارید.
</small>
<div class="d-flex">
<input type="password" name="password" id="bs-input-post-password" class="bs-text-box bs-single-line bs-ltr" />
<input type="submit" value="ارسال" class="btn btn-primary btn-sm mr-2" />
</div>
</div>
</div>
</form>
</div>
<div class="post-info pt-4 mt-3 d-flex flex-column flex-sm-row align-items-center">
<div class="author-info d-flex flex-column ml-auto">
<small class="post-date">1388/02/07 ساعت 05:52 ب.ظ</small>
</div>
<div class="buttons-wrapper d-flex flex-row align-items-center mt-2 mt-md-0 mr-auto mr-md-0">
</div>
</div>
</div>
<div class="post-box p-4 ">
<div class="content-wrapper">
<h2 class="post-title">
<i class="bx bxs-pin pin-icon" title="یادداشت سنجاقشده"></i>
<a href="/1387/11/16/post-125/" class="post-title-link text-decoration-none">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت سوم)
</a>
</h2>
<p><p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">در ادامه آموزش طراحی
صفحات وب استاندارد به کمک <span lang="en-us">css </span>
امروز یک نوع صفحه پایه ی طراحی
<span lang="en-us">css</span> که فارسی شده و برای نوشتن مطالب فارسی
مناسب می باشد را برای دانلود در اختیارتان قرار میدهم. با کلیک روی
تصویر<span lang="en-us">
</span>پایین، آن را دانلود و کار را آغاز کنید.</font></p>
<p align="center" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<a rel="nofollow noopener" title="دانلود قالب فارسی برای طراحی سی اس اس css" href="http://shaghayegh63.persiangig.com/zip/2-column-no1.zip">
<img border="0" src="http://shaghayegh63.persiangig.com/image/css-learning/css-learning-3-1.gif" alt="دانلود قالب فارسی برای طراحی سی اس اس css" width="142" height="78"></a></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">فایلی را که دانلود کرده
اید یک فایل <span lang="en-us">zip. </span>است که بعد از
<span lang="en-us">extract </span>شدن (خارج شدن از حالت
<span lang="en-us">zip</span> ) فولدری را در اختیارتان قرار میدهد که
حاوی سه فایل میباشد:</font></p>
<p align="right" dir="ltr" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">
2-column.htm</font></p>
<p align="right" dir="ltr" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">
reset.css</font></p>
<p align="right" dir="ltr" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">
styles.css</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">فایل اول با پسوند
<span lang="en-us">htm. </span>همان صفحه اصلی است که در وب به نمایش
در می آید. فایل دوم فایل <span lang="en-us">reset.css </span>است
لطفا برای دریافت اطلاعات در این مورد به این <font color="#FF0000">
<a rel="nofollow noopener" title="فایل reset.css چیست" target="_blank" href="http://aliha.ir/2008/07/06/whats_reset_css/">
<span style="text-decoration: none; font-weight: 700">
<font color="#FF0000">اینجا</font></span></a></font> مراجعه کنید.
فایل سوم فایل <span lang="en-us">style.css </span>است که به صفحه
<span lang="en-us">htm.</span> دستور میدهد که چگونه محتویاتش را
نمایش دهد<span lang="en-us">.</span> </font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">صفحه <span lang="en-us">
htm. </span>و <span lang="en-us">styles.css </span>را که دانلود کرده
اید در یک ویرایشگر صفحه وب مانند <span lang="en-us">frontpage </span>
باز کنید<span lang="en-us">. </span>در حال حاضر صفحه ای مانند تصویر
زیر را در اختیار دارید که برای سهولت در ارائه توضیحات، ستونها را با
خطوط (<span lang="en-us">border</span>)<span lang="en-us"> </span>
کاملا واضح مشخص کرده ام.</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
</p>
<p align="center" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<img border="0" src="http://shaghayegh63.persiangig.com/image/css-learning/css-learning-3-2.gif" style="border: 1px solid #000000" alt="تصویر قالب دو ستونه برای طراحی سی اس اس css " width="652" height="399"></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
</p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">همان طور که قبلا هم توضیح
دادم قالبهایی را که مثلا دو ستونه می نامیم مانند قالبی که هم اکنون
برای کار در دست دارید ظاهرا دو ستونه است ولی در اصل با چندین ستون
سرو کار داریم. در این قالب پنج ستون داریم که با تغییرات در ظاهر آنها
میتوانیم به آنچه در نظر داریم نزدیک شده و طرح مورد نظرمان را اعمال
کنیم. </font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">اکنون به فایل
<span lang="en-us">styles.css </span>نگاهی می اندازیم. برای این که
به اهمیت این فایل بیشتر پی ببرید ابتدا فایل <span lang="en-us">htm.
</span>را در مروگر مشاهده کنید سپس فایل <span lang="en-us">
styles.css </span>را از درون فولدر، <span lang="en-us">delete </span>
کرده و مجددا فایل <span lang="en-us">htm. </span>را مشاهده کنید (اگر
صفحه شما در مرورگر باز است آن را <span lang="en-us">refresh </span>
کنید تا تغیرات را ببینید). برای اطلاعات بیشتر در مورد محتویات
<span lang="en-us">styles.css </span>اجزای آن را بررسی میکنیم:</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">شما در این فایل نوشته
هایی را مشاهده میکنید که هر کدام مربوط به یک ستون می باشد در ابتدا
باید بدانید که اسامی ستونها در فایل <span lang="en-us">styles.css
</span>با علامت </font><span lang="en-us">
<font face="Tahoma" color="#FF0000">#</font><font face="Tahoma" style="font-size: 9pt">
</font></span><font face="Tahoma" style="font-size: 9pt">مشخص
میشوند. مثلا: <font color="#FF0000">wrapper</font></font><BlogSky:Post Posts Body><font face="Tahoma" style="font-size: 9pt"><font color="#FF0000">#</font>
در فایل <span lang="en-us">styles.css </span>که در اختیار دارید
چگونگی نمایش ستون </font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt"><font color="#FF0000">
wrapper</font> را در صفحه <span lang="en-us">htm. </span>مشخص میکند.
کدهای <span lang="en-us">HTML </span>صفحه <span lang="en-us">htm.
</span>را در ویرایشگر خود مرور کنید و نام </font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">wrapper<span lang="en-us">
</span>را بیابید. این ستون، ظرف یا قالب اصلی کار شماست که در صفحه
<span lang="en-us">htm. </span>آن را برای شما با <span lang="en-us">
border </span>قرمز مشخص کرد<span lang="fa">ه ا</span>م و بقیه ستونها
مانند قطعات پازل در آن جای میگیرند.</font></BlogSky:Post Posts></p>
<p align="left" dir="ltr" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" color="#808080" size="2">#wrapper { <br>
margin: auto;<br>
direction: rtl;<br>
width: 922px;<br>
border: 1px solid #FF0000;<br>
}</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">نوشته هایی که در میان دو
علامت </font><b>
<BlogSky:Post Posts Body>
<font face="Tahoma" color="#FF0000" style="font-size: 9pt">{ }
</font>
</BlogSky:Post Posts></b><font face="Tahoma" style="font-size: 9pt">قرار
<span lang="fa">دارند</span> و زیر نام یک ستون قرار میگیرند دستوارتی
هستند که نحوه نمایش آن ستون را اعمال میکنند. همان طور که در دستور
بالا که قسمتی از فایل <span lang="en-us">styles.css </span>شماست و
متعلق به ستون
</font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">wrapper<span lang="en-us">
</span>میباشد<span lang="en-us"> </span>مشاهده میکنید به این ستون
دستور داده شده تا به حالت اتوماتیک (خودکار) در صفحه جای بگیرد (
</font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" color="#FF0000" size="2">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">margin:
auto</font><font face="Tahoma" color="#808080" size="2"> </font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">)، </font>
</BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">نوشته های درون آن از حالت
نوشتاری راست به چپ پیروی کنند<span lang="fa"> که برای نوشتار و تایپ
فارسی مناسب است</span> ( </font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" color="#FF0000" size="2">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" color="#FF0000" size="2">direction:
rtl</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" style="font-size: 9pt">
) منظور از مقدار <span lang="en-us"><font color="#FF0000">rtl</font> </span>
که در مقابل<span lang="en-us">
</span>کلمه <span lang="en-us">direction </span>نوشته شده همان
</font>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt"><span lang="en-us">right
to left </span>یا چپ به راست است،</font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">عرض آن 922 پیکسل باشد (
</font>
<BlogSky:Post Posts Body>
<font face="Tahoma" color="#FF0000" size="2">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">width:
922px</font><font face="Tahoma" color="#808080" size="2"> </font>
</BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">) و</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">اطراف آن را یک خط ممتد با
ضخامت 1 پیکسل و رنگ قرمز احاطه کند ( </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" color="#FF0000" size="2">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" color="#FF0000" size="2">border:
1px solid #FF0000</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
).</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">اکنون دستورات ستون دیگری
را<span lang="en-us"> </span>مرور میکنیم تا کدهای جدیدتری را پیدا
کنیم. در فایل <span lang="en-us">styles.css </span>به دنبال ستون
<font color="#FF0000">leftcolumn</font> بگردید دستورات این ستون را
در قسمت پایین مشاهده میکنید:</font></p>
<p align="left" dir="ltr" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" size="2" color="#808080">#leftcolumn { <br>
border: 1px solid #000000;<br>
background:#FFFFFF;<br>
margin: 0px 0px 5px 0px;<br>
padding: 10px;<br>
height: 350px;<br>
width: 204px;<br>
float: right;<br>
}</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">کدهای جدیدی که در این
قسمت مشاهده میکنید عبارت است از: </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">background</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
و </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">padding</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
و </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">height</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
و </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">float</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
.</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">این کدها به ستون </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">leftcolumn</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
دستور میدهند که: </font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">رنگ پس زمینه اش سفید باشد
( </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">background:#FFFFFF</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
)،</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">فاصله محتویات درونش مانند
تصاویر عکسها و ... از اطراف 10 پیکسل باشد ( </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">padding:
10px</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
)،</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">ارتفاع آن 350 پیکسل باشد
( </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">height:
350px</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
) و</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">جایگاه قرار گرفتنش در
صفحه سمت راست باشد ( </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" size="2" color="#FF0000">;</font></BlogSky:Post Posts><BlogSky:Post Posts Body><font face="Tahoma" size="2" color="#FF0000">float:
right</font></BlogSky:Post Posts><font face="Tahoma" style="font-size: 9pt">
).</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">شما میتوانید با تغییر
اندازه <span lang="en-us">width </span>(عرض) ستون </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
wrapper و ستونهای داخل آن شکل قالب را کاملا تغییر دهید. قصد دارم چند
طرح را مشخص کنم تا افرادی که این سری آموزشی را دنبال میکنند برای
تمرین از آن طرح ها به عنوان الگو استفاده کنند.</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
برای تمرین، اندازه عرض ستونها را تغییر دهید درست کردن قالبهایی به
شکل زیر را تمرین کنید تغییرات در کدهای اصلی را در قسمت بعد آموزش
میدهم.</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">الگوی
شماره یک:</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
wrapper<span lang="en-us"> = </span>چهارصد پیکسل (<span lang="en-us">400px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
header<span lang="en-us"> = </span>سیصدو هفتادو هشت پیکسل (<span lang="en-us">378px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
leftcolumn<span lang="en-us"> = </span>دویست و چهل و یک پیکسل (<span lang="en-us">241px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
rightcolumn<span lang="en-us"> = </span>صدو ده پیکسل (<span lang="en-us">110px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
footer<span lang="en-us"> = </span>
</BlogSky:Post Posts></font>
</BlogSky:Post Posts>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
سیصدو هفتادو هشت پیکسل (<span lang="en-us">378px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">الگوی
شماره دو:</font></BlogSky:Post Posts></p>
<BlogSky:Post Posts Body>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
wrapper<span lang="en-us"> = </span>هشتصد پیکسل (<span lang="en-us">800px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
header<span lang="en-us"> = </span>هفتصد و هفتادو هشت پیکسل (<span lang="en-us">778px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
leftcolumn<span lang="en-us"> = </span>دویست و یک پیکسل (<span lang="en-us">201px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
rightcolumn<span lang="en-us"> = </span>پانصد و پنجاه پیکسل (<span lang="en-us">550px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
footer<span lang="en-us"> = </span>
</BlogSky:Post Posts></font>
</BlogSky:Post Posts>
</BlogSky:Post Posts>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
هفتصد و هفتاد و هشت پیکسل (<span lang="en-us">778px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">الگوی
شماره سه:</font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
wrapper<span lang="en-us"> = </span>هفتصد و پنجاه پیکسل (<span lang="en-us">750px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">بقیه ستونها را خودتان
تنظیم کنید به صورتی که عرض ستون سمت چپ بیشتر از راست باشد.</font></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">الگوی
شماره چهار:</font></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">عرض </font>
<BlogSky:Post Posts Body>
<font face="Tahoma" style="font-size: 9pt">
<BlogSky:Post Posts Body>
wrapper<span lang="en-us"> = </span>ششصد پیکسل (<span lang="en-us">600px</span>)</BlogSky:Post Posts></font></BlogSky:Post Posts></BlogSky:Post Posts></p>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<font face="Tahoma" style="font-size: 9pt">عرض ستون چپ و راست برابر
باشد.</font></p>
<BlogSky:Post Posts Body>
<BlogSky:Post Posts Body>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<span lang="en-us">
<font face="Tahoma" style="font-size: 9pt" color="#D25AA2">
---------------------------------------------------------------------------------</font></span><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">-----------------</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">-----------------</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">-----------------</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">-------------</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">----</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">----</font></span></BlogSky:Post Posts><BlogSky:Post Posts Body><span lang="en-us"><font face="Tahoma" style="font-size: 9pt" color="#D25AA2">----</font></span></BlogSky:Post Posts></p>
<div align="right">
<table border="0" width="324" style="border-collapse: collapse" id="table2">
<tr>
<td align="center" dir="rtl">
<BlogSky:Post Posts Body>
<span lang="fa">
<font face="Tahoma" style="font-size: 9pt; font-weight: 700">
<BlogSky:Post Posts Body>
امتیاز این مطلب در سایت مهندس:</BlogSky:Post Posts></font></span></BlogSky:Post Posts></td>
<td align="center" width="100" dir="rtl">
<p dir="rtl">
</td>
</tr>
</table>
</div>
</BlogSky:Post Posts>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font style="font-size: 9pt" face="Tahoma">
<a title="آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS - قوانین و مفاهیم کلی در CSS (قسمت دوم)" href="http://www.shaghayegh.blogsky.com/1387/09/28/post-122/">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله <span lang="en-us">
CSS</span> - قوانین و مفاهیم کلی در <span lang="en-us">CSS </span>
(قسمت دوم)</a></font></BlogSky:Post Posts></p>
</BlogSky:Post Posts>
<p align="right" dir="rtl" style="line-height: 150%; margin-top: 0; margin-bottom: 0">
<BlogSky:Post Posts Body>
<font style="font-size: 9pt" face="Tahoma">
<a title="آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت اول)" href="http://www.shaghayegh.blogsky.com/1387/09/23/post-121/">
آموزش طراحی قالب وبسایت و وبلاگ به وسیله <span lang="en-us">
CSS </span>(قسمت اول)</a></font></BlogSky:Post Posts></p></p>
</div>
<div class="post-info pt-4 mt-3 d-flex flex-column flex-sm-row align-items-center">
<div class="author-info d-flex flex-column ml-auto">
<small class="post-date">1387/11/16 ساعت 04:00 ب.ظ</small>
</div>
<div class="buttons-wrapper d-flex flex-row align-items-center mt-2 mt-md-0 mr-auto mr-md-0">
</div>
</div>
</div>
<div class="pagination-wrapper row align-items-center justify-content-between">
<div class="col-auto flex-grow-1">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled d-none d-md-block">
<div class="total-counter page-link">101 <span id="total-label"></span></div>
</li>
<li class="page-item active disabled">
<a class="page-link" disabled="disabled"><span class="d-md-none">صفحه</span> 1</a>
</li>
<li class="page-item d-none d-md-block">
<a class="page-link" href="/page/2" title="صفحهی 2">2</a>
</li>
<li class="page-item d-none d-md-block">
<a class="page-link" href="/page/3" title="صفحهی 3">3</a>
</li>
<li class="page-item d-none d-md-block">
<a class="page-link" href="/page/4" title="صفحهی 4">4</a>
</li>
<li class="page-item d-none d-md-block">
<a class="page-link" href="/page/5" title="صفحهی 5">5</a>
</li>
<li class="page-item active disabled d-none d-md-block">
<a class="page-link" disabled="disabled">...</a>
</li>
<li class="page-item d-none d-md-block">
<a class="page-link" href="/page/34" title="صفحهی 34">34</a>
</li>
</ul>
</nav>
</div>
<div class="col-2 col-md-1 text-left mr-2">
<a href="/page/2" class="next-btn btn btn-primary shadow-sm" title="صفحهی بعد">
<i class="bx bx-chevron-left"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<script>
var sidebarButton = document.getElementById("sidebar-button"),
sidebar = document.getElementById("sidebar");
sidebarButton.addEventListener("click", function (event) {
event.stopPropagation();
document.body.setAttribute("data-scr", window.scrollY);
document.body.style.top = "-" + window.scrollY + "px";
document.body.classList.add("menu-open");
sidebar.classList.add("reveal");
})
sidebar.addEventListener("click", function (event) {
event.stopPropagation();
})
document.body.addEventListener("click", function () {
if (document.body.classList.contains("menu-open")) {
document.body.classList.remove("menu-open");
window.scrollTo(0, document.body.getAttribute("data-scr"));
sidebar.classList.remove("reveal");
}
})
blogsky.ajax.onPollVoteBegin = function (data) {
document.getElementById("submit-vote-button-" + data.id).setAttribute("disabled", "disabled");
document.getElementById("submit-vote-button-" + data.id).classList.add("loading");
}
blogsky.ajax.onPollVoteSuccess = function (data) {
document.getElementById("poll-vote-" + data.id).innerHTML = data.data;
}
blogsky.ajax.onPollVoteFailure = function (data) {
document.getElementById("submit-vote-button-" + data.id).removeAttribute("disabled");
document.getElementById("submit-vote-button-" + data.id).classList.remove("loading");
var pollVoteErrorMessage = document.getElementById("poll-vote-error-message-" + data.id);
pollVoteErrorMessage.innerHTML = data.error;
pollVoteErrorMessage.style.display = "block";
setTimeout(function () {
pollVoteErrorMessage.style.display = "none";
}, 5000);
}
blogsky.ajax.onPollResultBegin = function (data) {
document.getElementById("poll-results-button-" + data.id).setAttribute("disabled", "disabled");
document.getElementById("poll-results-button-" + data.id).classList.add("loading");
}
blogsky.ajax.onPollResultSuccess = function (data) {
document.getElementById("poll-vote-" + data.id).style.display = "none";
document.getElementById("poll-result-" + data.id).innerHTML = data.data;
}
blogsky.ajax.onPollResultFailure = function (data) {
var pollVoteErrorMessage = document.getElementById("poll-vote-error-message-" + data.id);
pollVoteErrorMessage.innerHTML = data.error;
pollVoteErrorMessage.style.display = "block";
setTimeout(function () {
pollVoteErrorMessage.style.display = "none";
}, 5000);
}
blogsky.ajax.onPollResultComplete = function (data) {
document.getElementById("poll-results-button-" + data.id).removeAttribute("disabled");
document.getElementById("poll-results-button-" + data.id).classList.remove("loading");
}
if (window.location.href.indexOf("/post-") > -1) {
window.onscroll = function () {
var articleElement = document.querySelector(".post-box");
var currentState = document.body.scrollTop || document.documentElement.scrollTop;
var pageHeight = articleElement.scrollHeight;
// var pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollStatePercentage = (currentState / pageHeight) * 100;
document.querySelector(".reading-progress").setAttribute("value", scrollStatePercentage);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.querySelector(".reading-progress").setAttribute("value", 100);
}
}
}
if (document.getElementById("total-label")) {
if (/^\/\d{4}\/\d{2}\/\d{2}\/post-\d+.*/i.test(window.location.pathname)) {
document.getElementById("total-label").innerHTML = "نظر";
} else if (window.location.pathname.indexOf("/dailylink") == 0) {
document.getElementById("total-label").innerHTML = "لینک";
} else if (window.location.search.indexOf("?q=") > -1) {
document.getElementById("total-label").innerHTML = "نتیجه";
} else if (window.location.pathname == "" || window.location.pathname == "/" || window.location.pathname.indexOf("/page/") == 0 || window.location.pathname.indexOf("/posts") == 0 || window.location.pathname.indexOf("/category/") == 0 || window.location.pathname.indexOf("/tag/") == 0 || window.location.pathname.indexOf("/author/") == 0 || /^\/\d{4}(\/\d{2})?(\/\d{2})?/i.test(window.location.pathname)) {
document.getElementById("total-label").innerHTML = "یادداشت";
} else {
document.getElementById("total-label").innerHTML = "نظر";
}
}
//more
(function (global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() :
typeof define === "function" && define.amd ? define(factory) :
(global = global || self, global.shave = factory());
}(this, function () {
"use strict";
function shave(target, maxHeight) {
var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (!maxHeight) throw Error("maxHeight is required");
var els = typeof target === "string" ? document.querySelectorAll(target) : target;
if (!els) return;
var character = opts.character || "…";
var classname = opts.classname || "js-shave";
var spaces = typeof opts.spaces === "boolean" ? opts.spaces : true;
var charHtml = "<span class=\"js-shave-char\">".concat(character, "</span>");
if (!("length" in els)) els = [els];
for (var i = 0; i < els.length; i += 1) {
var el = els[i];
var styles = el.style;
var span = el.querySelector(".".concat(classname));
var textProp = el.textContent === undefined ? "innerText" :
"textContent"; // If element text has already been shaved
if (span) {
el.removeChild(el.querySelector(".js-shave-char"));
el[textProp] = el[textProp];
}
var fullText = el[textProp];
var words = spaces ? fullText.split(" ") : fullText;
if (words.length < 2) continue;
var heightStyle = styles.height;
styles.height = "auto";
var maxHeightStyle = styles.maxHeight;
styles.maxHeight = "none";
if (el.offsetHeight <= maxHeight) {
styles.height = heightStyle;
styles.maxHeight = maxHeightStyle;
continue;
}
var max = words.length - 1;
var min = 0;
var pivot = void 0;
while (min < max) {
pivot = min + max + 1 >> 1;
el[textProp] = spaces ? words.slice(0, pivot).join(" ") : words.slice(0, pivot);
el.insertAdjacentHTML("beforeend", charHtml);
if (el.offsetHeight > maxHeight) max = spaces ? pivot - 1 : pivot - 2;
else min = pivot;
}
el[textProp] = spaces ? words.slice(0, max).join(" ") : words.slice(0, max);
el.insertAdjacentHTML("beforeend", charHtml);
var diff = spaces ? " ".concat(words.slice(max).join(" ")) : words.slice(max);
var shavedText = document.createTextNode(diff);
var elWithShavedText = document.createElement("span");
elWithShavedText.classList.add(classname);
elWithShavedText.style.display = "none";
elWithShavedText.appendChild(shavedText);
el.insertAdjacentElement("beforeend", elWithShavedText);
styles.height = heightStyle;
styles.maxHeight = maxHeightStyle;
}
}
return shave;
}));
shave(".collapsable", 25, { character: "<button class=\"btn btn-sm btn-link p-0 mr-1 d-inline\" style=\"cursor:pointer\"><small>ادامه...<small></button>" });
document.querySelector(".collapsable").addEventListener("click", function () {
if (this.querySelector(".js-shave")) {
this.querySelector(".js-shave-char").remove();
this.textContent += this.querySelector(".js-shave").textContent;
}
});
//Parallax
(function (n, h) { "function" === typeof define && define.amd ? define([], h) : "object" === typeof module && module.exports ? module.exports = h() : n.Rellax = h() })("undefined" !== typeof window ? window : global, function () {
var n = function (h, p) {
var a = Object.create(n.prototype), l = 0, r = 0, k = 0, t = 0, c = [], u = !0, B = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (a) { return setTimeout(a, 1E3 / 60) }, q = null, C = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame || clearTimeout, D = window.transformProp || function () { var a = document.createElement("div"); if (null === a.style.transform) { var b = ["Webkit", "Moz", "ms"], e; for (e in b) if (void 0 !== a.style[b[e] + "Transform"]) return b[e] + "Transform" } return "transform" }(); a.options = { speed: -2, center: !1, wrapper: null, relativeToWrapper: !1, round: !0, vertical: !0, horizontal: !1, callback: function () { } }; p && Object.keys(p).forEach(function (d) { a.options[d] = p[d] }); h || (h = ".rellax"); var m = "string" === typeof h ? document.querySelectorAll(h) :
[h]; if (0 < m.length) {
a.elems = m; if (a.options.wrapper && !a.options.wrapper.nodeType) if (m = document.querySelector(a.options.wrapper)) a.options.wrapper = m; else { console.warn("Rellax: The wrapper you're trying to use doesn't exist."); return } var w = function () {
for (var d = 0; d < c.length; d++)a.elems[d].style.cssText = c[d].style; c = []; r = window.innerHeight; t = window.innerWidth; x(); for (d = 0; d < a.elems.length; d++) {
var b = a.elems[d], e = b.getAttribute("data-rellax-percentage"), g = b.getAttribute("data-rellax-speed"), h = b.getAttribute("data-rellax-zindex") ||
0, l = b.getAttribute("data-rellax-min"), n = b.getAttribute("data-rellax-max"), v = a.options.wrapper ? a.options.wrapper.scrollTop : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; a.options.relativeToWrapper && (v = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) - a.options.wrapper.offsetTop); var f = a.options.vertical ? e || a.options.center ? v : 0 : 0, k = a.options.horizontal ? e || a.options.center ? a.options.wrapper ? a.options.wrapper.scrollLeft : window.pageXOffset ||
document.documentElement.scrollLeft || document.body.scrollLeft : 0 : 0; v = f + b.getBoundingClientRect().top; var m = b.clientHeight || b.offsetHeight || b.scrollHeight, p = k + b.getBoundingClientRect().left, q = b.clientWidth || b.offsetWidth || b.scrollWidth; f = e ? e : (f - v + r) / (m + r); e = e ? e : (k - p + t) / (q + t); a.options.center && (f = e = .5); g = g ? g : a.options.speed; e = y(e, f, g); b = b.style.cssText; f = ""; 0 <= b.indexOf("transform") && (f = b.indexOf("transform"), f = b.slice(f), f = (k = f.indexOf(";")) ? " " + f.slice(11, k).replace(/\s/g, "") : " " + f.slice(11).replace(/\s/g,
"")); c.push({ baseX: e.x, baseY: e.y, top: v, left: p, height: m, width: q, speed: g, style: b, transform: f, zindex: h, min: l, max: n })
} u && (window.addEventListener("resize", w), u = !1); z()
}, x = function () {
var d = l, b = k; l = a.options.wrapper ? a.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset; k = a.options.wrapper ? a.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset; a.options.relativeToWrapper &&
(l = ((document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset) - a.options.wrapper.offsetTop); return d != l && a.options.vertical || b != k && a.options.horizontal ? !0 : !1
}, y = function (d, b, e) { var c = {}; d = 100 * e * (1 - d); b = 100 * e * (1 - b); c.x = a.options.round ? Math.round(d) : Math.round(100 * d) / 100; c.y = a.options.round ? Math.round(b) : Math.round(100 * b) / 100; return c }, A = function () { x() && !1 === u && z(); q = B(A) }, z = function () {
for (var d, b = 0; b < a.elems.length; b++) {
d = y((k - c[b].left + t) / (c[b].width + t), (l -
c[b].top + r) / (c[b].height + r), c[b].speed); var e = d.y - c[b].baseY, g = d.x - c[b].baseX; null !== c[b].min && (a.options.vertical && !a.options.horizontal && (e = e <= c[b].min ? c[b].min : e), a.options.horizontal && !a.options.vertical && (g = g <= c[b].min ? c[b].min : g)); null !== c[b].max && (a.options.vertical && !a.options.horizontal && (e = e >= c[b].max ? c[b].max : e), a.options.horizontal && !a.options.vertical && (g = g >= c[b].max ? c[b].max : g)); a.elems[b].style[D] = "translate3d(" + (a.options.horizontal ? g : "0") + "px," + (a.options.vertical ? e : "0") + "px," + c[b].zindex +
"px) " + c[b].transform
} a.options.callback(d)
}; a.destroy = function () { for (var d = 0; d < a.elems.length; d++)a.elems[d].style.cssText = c[d].style; u || (window.removeEventListener("resize", w), u = !0); C(q); q = null }; w(); A(); a.refresh = w; return a
} console.warn("Rellax: The elements you're trying to select don't exist.")
}; return n
});
new Rellax(".rellax");
</script>
</body>
</html>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40870092-3', 'auto');
ga('send', 'pageview');
</script>