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

انشاء قائمة جديدة بتقنية 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 وكل شيء واضح


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



     

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