سرور مجازی NVMe

چگونه یک بلوک نظر رشته ای با HTML5 و CSS3 بسازیم

طراحی و توسعه نرم افزار

توسط تیم تولید محتوا آخرین بروزرسانی مهر ۱۴, ۱۴۰۳

چگونه یک بلوک نظر رشته ای با HTML5 و CSS3 بسازیم

سرفصلهای مطلب

زمان لازم برای مطالعه: 6 دقیقه

چگونه یک بلوک نظر رشته ای با HTML5 و CSS3 بسازیم

وبلاگ ها و انجمن ها اغلب پاسخ های نظر رشته ای در شبکه خود دارند. شبکه های اجتماعی محبوب Reddit و اخبار هکرها هر دو از نظرات رشته‌ای پشتیبانی می‌کنند، که به کاربران اجازه می‌دهد مستقیماً با نظرات پاسخ دهند و بدون گم شدن در این میان، نظر خود را ابراز کنند.

ما قصد داریم به ساخت یک طرح بندی نظرات رشته ای HTML5 و CSS3 ساده نگاه کنیم. ما از هیچ افکت jQuery استفاده نخواهیم کرد روی نظر بلوک می شود (اگرچه امکان گسترش این قابلیت وجود دارد). ما به ساختار سند HTML5 و روش قرار دادن عناصر با استفاده از CSS خواهیم پرداخت. از این الگوی پایه، برای توسعه‌دهندگان باید آسان باشد که سفارشی‌سازی‌های خود را انتخاب کرده و یک بلوک نظرات رشته‌ای را در هر طرح‌بندی وب‌سایت پیاده‌سازی کنند.

قبل از شروع، یک را انتخاب کنید به نسخه ی نمایشی نگاه کنید تا ببینیم چه خواهیم ساخت اگر بخواهید، می توانید منبع را از اینجا دانلود کنید.

ساخت هدر صفحه وب

من می خواهم با نگاه کردن به الگوی اصلی HTML استفاده شده در این طرح شروع کنم. من به Doctype HTML5 که در UTF-8 کدگذاری شده است، به همراه برخی عناصر دیگر HTML5 پایبند هستم. برای مرورگرهای وب قدیمی‌تر از اینترنت اکسپلورر 9، ما یک کپی از آن را اضافه می‌کنیم HTML5shiv اسکریپت میزبانی شده است روی سرورهای توسعه دهنده گوگل

<!doctype html>
<html lang="en-US">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>HTML5/CSS3 Threaded Comments Block</title>
 <meta name="author" content="Jake Rocheleau">
 <link rel="shortcut icon" href="https://www.webdesignerdepot.com/favicon.ico">
 <link rel="icon" href="https://www.webdesignerdepot.com/favicon.ico">
 <link rel="stylesheet" type="text/css" href="styles.css">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css؟family=Wellfleet">
<!--(if lt IE 9)>
 <script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!(endif)-->
</head>

این اجازه می دهد تا عناصر جدیدتر مانند <header>، <footer>، و <section> برای رندر مناسب در همه مرورگرها تنها مشکل اجرا شدن در مرورگرهای وب با غیرفعال بودن جاوا اسکریپت است، اما به نظر من شما نمی توانید خود را دیوانه کنید تا به تک تک کاربران غذا بدهید. من منبع خارجی دیگری را برای آن گنجانده ام فونت وب گوگل Wellfleet که سبک های page متن سرصفحه

(آیا این عالی نیست که ما در زمانی زندگی می کنیم که همه این منابع برای توسعه دهندگان رایگان است؟ این به ما امکان می دهد تا به سرعت یک الگوی نظرات را بدون دردسر زیاد نمونه سازی کنیم.)

محتوای درونی بدن

در داخل <body></body> برچسب‌ها می‌توانیم یک دسته کامل از نظرات داخلی را پیدا کنیم. کل page طرح بندی در داخل یک div با شناسه پیچیده شده است #w برای لفاف همه چیز متمرکز است روی را page با عرض ثابت 700 پیکسل.

را #container div چیزی است که سیستم نظر را دور از متن سرصفحه یا موارد دیگر نگه می دارد page عناصر هر رشته از نظرات در یک لیست نامرتب نگهداری می شود که در آن root

#نظرات

cmnt

<li>
<div><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></a></div>
<div>
<header><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);">Pikabob</a> - <span>posted 6 days ago</span></header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>

کامنت داخلی حاوی یک تصویر آواتار شناور به همراه div دیگری با استفاده از کلاس است .cmmnt-content. این تقسیم درونی container کمک می کند تا از ستون آواتار متمایز شویم، به طوری که محتوای ما صرفاً قرار می گیرد روی سمت راست این همچنین اجازه می دهد تا اتاق را قرار دهید <header> و <footer> برچسب‌های داخل بدنه نظر، که ممکن است پیوندهای اضافی برای ویرایش یا اشتراک‌گذاری داشته باشند.

نظرات داخلی از لیست های نامرتب داخلی با کلاس استفاده می کنند .پاسخ می دهد به هر کدام متصل شده است. این به ما امکان می‌دهد تا سطح نظرات ۳ یا حتی ۴ رشته عمیق را تکرار کنیم. برای این نسخه ی نمایشی، من فقط سبک هایی را برای پشتیبانی از نظرات سطح سه لایه ایجاد کرده ام. اما سفارشی کردن موضوعات برای عمیق‌تر شدن بسیار ساده است.

<li>
 <div><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></a></div>
 <div>
 <header><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);">DarkCubes</a> - <span>posted 1 week ago</span></header>
 <p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
 </div>
 <ul>
 <li>
 <div><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></a></div>
 <div>
 <header><a href="https://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/javascript:void(0);">Sir_Pig</a> - <span>posted 1 day ago</span></header>
 <p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
 <p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
 </div> 
 </li>
 </ul>
</li>

توجه داشته باشید که حتی پاسخ‌های رشته‌ای سطح پایین هنوز دقیقاً همان قالب‌بندی نظرات سطح بالا را دنبال می‌کنند. این بدیهی است که اگر این سبک ها را در یک CMS مانند وردپرس قرار دهید مفید است. سپس می توانید به صورت پویا نظرات را برای پر کردن همان الگو ایجاد کنید.

CSS Stylesheet بازنشانی می شود

من یک سند دیگر به نام styles.css ایجاد کرده ام که تمام کدهای اصلی CSS ما را برای موقعیت یابی و طراحی نگهداری می کند. page محتوا

من با بازنشانی های CSS سفارشی خودم شروع می کنم که مبتنی بر آن هستند روی قطعه کد اریک مایر. با این کار تمام فونت ها، حاشیه ها، padding و مهمتر از آن بازنشانی می شود box-sizing برای همه عناصر روی را page در هر مرورگر اصلی همچنین ممکن است متوجه شوید که من از برخی ویژگی ها برای به روز رسانی پویا رنگ هایلایت CSS استفاده می کنم.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }

::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

همانطور که به سمت پایین تر حرکت می کنیم، کدی را برای بازنشانی سبک های اصلی قرار داده ام روی عناصر و پاراگراف های h1 در page. ما باید یک ساختار اصلی برای لفاف و container divs در container من در واقع چند ویژگی سایه جعبه CSS3 را برای متمایز شدن از پس زمینه گنجانده ام.

h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }

p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }

a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }

/* page layout structure */ 
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }

#container { 
 display: block; 
 width: 100%; 
 background: #fff; 
 padding: 14px 20px; 
 -webkit-border-radius: 4px; 
 -moz-border-radius: 4px; 
 border-radius: 4px; 
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

یک ظاهر طراحی شده page نظرات

اکنون این آخرین بیت کدی که باید بررسی کنیم، تمام نظرات ما را تنظیم می کند روی را page.

#comments { display: block; }

#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }

#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img { 
 -webkit-border-radius: 3px; 
 -moz-border-radius: 3px; 
 border-radius: 3px; 
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -ms-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
 transition: all 0.4s linear;
}

#comments .cmmnt .avatar a:hover img { opacity: 0.77; }

برای شروع هر کدام cmnt آیتم فهرست طوری طراحی شده است که با هر

padding-left: 65px;

من همچنین چند CSS3 منحصر به فرد را اعمال کردم border-radius جلوه ها و انتقال به تصاویر آواتار. همانطور که ماوس را بر روی هر یک قرار می دهید، کدورت به تدریج در عرض 400 میلی ثانیه به 77٪ کاهش می یابد. این یک اثر بسیار جالب است که تنها با چند خط کد کوتاه می توانید داشته باشید. حتی برای تکرار چیزی نزدیک به این انتقال به جاوا اسکریپت طولانی نیاز داشت.

#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; } 
#comments .cmmnt .replies { margin-bottom: 7px; }

در این بخش آخر کد CSS، تمام کاری که ما انجام می‌دهیم این است که محتوا را برای داشتن padding اضافی و به‌روزرسانی طرح‌های رنگی قرار دهیم.

افکار نهایی

قلمرو توسعه وب فرانت اند بسیار بزرگ است و انواع زیادی از رابط های کاربری را در بر می گیرد. در این آموزش ما گزینه هایی را بررسی کرده ایم که به کاربران اجازه می دهد با یکدیگر ارتباط مستقیم بیشتری داشته باشند. این احتمالا ساده ترین راه حل برای ارائه نظرات به دلیل روش ظاهر شدن مکالمات لایه ای است روی یک مانیتور

آیا شما یک سیستم نظر برای یک سایت ساخته اید؟ چه چالش هایی در طراحی مکالمه وجود دارد؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر نظرات از طریق Shutterstock.

(برچسب‌ها برای ترجمه t) توسعه وب

منتشر شده در 1403-10-05 04:18:02

منبع نوشتار

امتیاز شما به این مطلب

پیشنهاد می‌کنیم بخوانید: روش اجرای اسکریپت پایتون در لینوکس VPS