walid
11-01-2013, بتوقيت غرينيتش 01:41 PM
http://www.dzbatna.com/images/icons/icon16.gif [ط*طµط±ظٹط§ظ‹] : ط´ط±ط* ط¹ظ…ظ„ ظ‚ط§ط¦ظ…ظ‡ ظپظٹط¯ظٹظˆ ظپظٹ ط§ظ„ظ€[Css].. (http://www.dzbatna.com/t965532/)
بسم الله الرحمن الرحيم..
هذا شرح طريقة طريقه عمل قائمه فيديو بلغه الـCss وهي تتمتع بالمرونه والسهوله..
العمل النهائي كالصوره التاليه :
http://www.dzbatna.com/attachments/293320d1220818619-drakola_dzbatna.jpg
أولا نبدأ بكود code الـstyle ـ(Css)ـ ونشرح طريقة حبه حبه..
1 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
</code> </code>
هنا أنشئنا خصائص الخط الفاصل بين كل مقطع فيديو..
width: 565px; : طول الخط الفاصل..
padding: 10px 10px 10px 10px; : الفراغ الفاصل بين كل مقطع..
color:#B9B9B9; : لون الخطوط في الوصف والقائمه..
border-bottom:#666 1px dotted; هنا عرض ونوع ولون الخط الفاصل [ المنقط ]..
2 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-picture,
div.sr-description,
div.sr-information {
float:right;
width:125px;
}
</code> </code>
هنا أتجاه الجدول والمساحه بين الجدول والفيديو..
float:right; : إتجاه الجدول..
width:125px; : هنا المساحه بين المقطع الفيديو والوصف..
3 -
رمز PHP:
<code style="white-space:nowrap"> <code> .videodescriptiontext {
font-size: 12px;
font-family:tahoma;
}
</code> </code>
هنا حجم خط الوصف ونوعه..
font-size: 12px; : حجم الخط للوصف..
font-family:tahoma; : نوع الحجم..
4-
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description,
div.sr-information {
width:300px;
}
</code> </code>
هنا حددنا المساحه بين الوصف بالجدول..
width:300px; : مقدار المساحه..
5 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
</code> </code>
width:120px; : هنا بعد المسافه بين الوصف والقائمه التي يمين..
min-height:80px; height:auto; height:100px; : طول خط القائمه..
padding: 3px 3px 3px 5px; : المسافه بين العمود والتاريخ+الوقت..
border-right:#4A4A4A 1px solid; : لون العمود وعرضه ونوعه..
6 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 {
margin: 5px;
padding: 0;
}
</code> </code>
هنا البعد الطولي بين العمود والوصف..
margin: 5px; : هنا البعد بينهم..
padding: 0; : المسافه بين الوصف والعنوان..
7 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
</code> </code>
هنا لون وحجم خط العنوان والبعد بينهم..
مايحتاج أشرح طريقةه لأن جميعها مكرره فقط الاختلاف بالمقدار..
8 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-description p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
text-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
text-decoration: none;
}
div.clear {
clear:both;
}
</code> </code>
لايحتاج الشرح طريقة أيضاً فجميع الأكواد قد ذكرت مسبقاً..
.
أخيراً الكود code كامل + الـhtml..
رمز PHP:
<code style="white-space:nowrap"> <code> <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drakola</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style>
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
div.sr-picture,
div.sr-description,
div.sr-information {
float:right;
width:125px;
}
.videodescriptiontext {
font-size: 12px;
font-family:tahoma;
}
div.sr-description,
div.sr-information {
width:300px;
}
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
div.sr-description h3 {
margin: 5px;
padding: 0;
}
div.sr-description h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
div.sr-description h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-description p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
text-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
</code> </code>
.
أيضاً أي سؤال أنا حاظر..
ترقبو الشروحات الجديده..
جميع الحقوق محفوظه لـ[TraidnTـ]..
التعديل الأخير كان بواسطة Zain; 09 - 09 - 2014 الساعة 03:18
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم..
هذا شرح طريقة طريقه عمل قائمه فيديو بلغه الـCss وهي تتمتع بالمرونه والسهوله..
العمل النهائي كالصوره التاليه :
http://www.dzbatna.com/attachments/293320d1220818619-drakola_dzbatna.jpg
أولا نبدأ بكود code الـstyle ـ(Css)ـ ونشرح طريقة حبه حبه..
1 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
</code> </code>
هنا أنشئنا خصائص الخط الفاصل بين كل مقطع فيديو..
width: 565px; : طول الخط الفاصل..
padding: 10px 10px 10px 10px; : الفراغ الفاصل بين كل مقطع..
color:#B9B9B9; : لون الخطوط في الوصف والقائمه..
border-bottom:#666 1px dotted; هنا عرض ونوع ولون الخط الفاصل [ المنقط ]..
2 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-picture,
div.sr-description,
div.sr-information {
float:right;
width:125px;
}
</code> </code>
هنا أتجاه الجدول والمساحه بين الجدول والفيديو..
float:right; : إتجاه الجدول..
width:125px; : هنا المساحه بين المقطع الفيديو والوصف..
3 -
رمز PHP:
<code style="white-space:nowrap"> <code> .videodescriptiontext {
font-size: 12px;
font-family:tahoma;
}
</code> </code>
هنا حجم خط الوصف ونوعه..
font-size: 12px; : حجم الخط للوصف..
font-family:tahoma; : نوع الحجم..
4-
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description,
div.sr-information {
width:300px;
}
</code> </code>
هنا حددنا المساحه بين الوصف بالجدول..
width:300px; : مقدار المساحه..
5 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
</code> </code>
width:120px; : هنا بعد المسافه بين الوصف والقائمه التي يمين..
min-height:80px; height:auto; height:100px; : طول خط القائمه..
padding: 3px 3px 3px 5px; : المسافه بين العمود والتاريخ+الوقت..
border-right:#4A4A4A 1px solid; : لون العمود وعرضه ونوعه..
6 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 {
margin: 5px;
padding: 0;
}
</code> </code>
هنا البعد الطولي بين العمود والوصف..
margin: 5px; : هنا البعد بينهم..
padding: 0; : المسافه بين الوصف والعنوان..
7 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
</code> </code>
هنا لون وحجم خط العنوان والبعد بينهم..
مايحتاج أشرح طريقةه لأن جميعها مكرره فقط الاختلاف بالمقدار..
8 -
رمز PHP:
<code style="white-space:nowrap"> <code> div.sr-description h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-description p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
text-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
text-decoration: none;
}
div.clear {
clear:both;
}
</code> </code>
لايحتاج الشرح طريقة أيضاً فجميع الأكواد قد ذكرت مسبقاً..
.
أخيراً الكود code كامل + الـhtml..
رمز PHP:
<code style="white-space:nowrap"> <code> <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drakola</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style>
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
div.sr-picture,
div.sr-description,
div.sr-information {
float:right;
width:125px;
}
.videodescriptiontext {
font-size: 12px;
font-family:tahoma;
}
div.sr-description,
div.sr-information {
width:300px;
}
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
div.sr-description h3 {
margin: 5px;
padding: 0;
}
div.sr-description h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
div.sr-description h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-description p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
text-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-description">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videodescriptiontext">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
</code> </code>
.
أيضاً أي سؤال أنا حاظر..
ترقبو الشروحات الجديده..
جميع الحقوق محفوظه لـ[TraidnTـ]..
التعديل الأخير كان بواسطة Zain; 09 - 09 - 2014 الساعة 03:18
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
