1. هذا الموقع يستخدم ملفات تعريف الارتباط (الكوكيز ). من خلال الاستمرار في استخدام هذا الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط. تعرف على المزيد.
  2. مرحبا بك في Taswiqnet، يمكنك طرح ومناقشة مختلف مواضيع التسويق عبر الانترنت أو تقديم عروض خاصة ان كنت من اصحاب الخدمات. اشترك الان!
    إستبعاد الملاحظة
  3. حصريا على مجتمع المسوقين العرب تقوم إدارة المنتدى بإجراء قرعة للحصول على دومين مجاني لمدة سنة، جرب حظك!
  4. إضافة ووردبريس مرخصة لبناء صفحات الهبوط، يمكنك الحصول عليها مجانا فقط على مجتمع المسوقين العرب
  5. القوانين وضعت لتنظيم سير المنتدى فيرجى التقيد بها، كل موضوع لايتماشى مع القوانين سيتم حذفه دون سابق إنذار

انشاء قائمة جديدة بتقنية css للموقع

الموضوع في 'تطوير المواقع' بواسطة مشرف, بتاريخ ‏7 ديسمبر 2015.

  1. مشرف

    مشرف مسوق جديد

    السلام عليكم ورحمة الله وبركاته


    نقدم لكم اليوم قائمة تشبه إلى حد كبير قائمة ترايد نت العلوية


    مثال
    [​IMG]

    مع إضافة بعض التعديلات الاخري



    كود:
    <style type="text/css">[/B][/CENTER]
    [B]
    [CENTER]
    nav {
        background-color: #FFF;
        height: 70px;
        width: 100%;
        float: none;
        margin: 0px;
        padding: 0px;
        box-shadow: 0px 2px 4px #c1c9e9;
    
    }
    nav ul {
        float: right;
        width: 700%;
        height: 75px;
        padding-top: 9px;
    }
    nav ul li {
       
        text-decoration: none;
        text-align: right;
        float: right;
        text-decoration: none;
        padding-right: 50px;
        list-style-type: none;
    
    
    
    }
    nav ul li a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: #747b95;
        font-weight: normal;
        text-decoration: none;
        list-style-type: none;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        padding-bottom: 2px;
    }
    nav ul li a:hover {
        border-bottom-width: 3px;
        border-bottom-style: solid;
        padding-bottom: 16px;
        transition: padding-bottom 0.30s;
    }
    
    nav ul li a{
        border-bottom-style: solid;
        padding-bottom: 2px;
        transition: padding-bottom 0.30s;
    }
    </style>


    كود HTML

    كود HTML:
    <nav>
    <ul>
    <li><a href="www">خصوصية ترايدنت</a></li>
    <li><a href="www">التسجيل</a></li>
    <li><a href="www">المكتبة التعليمية</a></li>
    <li><a href="www">تحميل الملفات</a></li>
    <li><a href="www">انمي تون</a></li>
    <li><a href="www">الموقع</a></li>
    
    </ul>
    </nav>
    طبعا نقدر نغير المسميات والروابط من كود HTML مثال لتغيير الاسم والرابط

    وتقدر تغير الالوان والخط إلخ من خواص Css وكل شيء واضح


    اتمنى يكون الكود عجبكم وهو من تصميمي وكتابتي ولا اقبل النقل دون ذكر المصدر
    وهو حصري .. وشكله يختلف في البعض عن قائمة ترايدنت



     

مشاركة هذه الصفحة