اشترك في مجموعة montadaphp.net حتى تصلك أخبار المنتدى  

بريدك الإلكتروني:

النتائج 1 إلى 6 من 6
شجرة الإعجاب1إعجاب
  • 1 Post By mohwaali

الموضوع: تصميم صفحة الدخول والتسجيل مثل فيس بوك

  1. #1
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    33
    المشاركات
    135
    معدل تقييم المستوى
    4

    افتراضي تصميم صفحة الدخول والتسجيل مثل فيس بوك

    مرحبا شباب رمضان كريم تقبل الله صيامنا وقيامنا امين
    المطلوب من الادارة تخصيص او تثبيت الموضوع لاقوم باكمال الشرح عسى ان نفيد به المبتدئين
    في لغة الستايل css3
    الصورة او الشكل النهائي للصفحة
    gfg00.jpg

    انا في انتضار الادارة والاعضاء لنبدا ان شاء الله
    المصغرات المرفقة المصغرات المرفقة 10488202_268123806724516_6170659405741306020_n.jpg  

  2. #2
    عضو فعال
    تاريخ التسجيل
    06-06-2013
    المشاركات
    284
    معدل تقييم المستوى
    5

    افتراضي رد: تصميم صفحة الدخول والتسجيل مثل فيس بوك

    الله يبارك فيك
    ابدأ بدون شروط

    لاتثبيت ولا غيره

    ولو كان الشرح يستحق الادارة تقوم بالتثبيت تلقائي


    بارك الله فيك

  3. #3
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    33
    المشاركات
    135
    معدل تقييم المستوى
    4

    Thumbs up رد: تصميم صفحة الدخول والتسجيل مثل فيس بوك

    نبدا على بركة الله
    اولا يجب القيام بالامور التالية
    انشاء مجلد جديد باسم مثلا login_and_reg
    ونضع داخله ملف
    index.php
    و مجلد ستايل style وداخله نضع اربعة ملفات
    1 table1.php
    2 table2.php
    3 table3.php
    4 style.css
    الان اليكم كود صفحة index.php
    كود:
    <?php session_start();
    if(isset($_SESSION['user'])){
    header("location:home.php");
    } ?>
    <html>
    <head><title>انشاء حساب مجانا في سوق الجزائر</title>
    <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body>
    <table width="100%"style="background:#383838;border-bottom:3px solid orange;margin-top:0px;">
    <?php include ("style/table1.php");?>
    </table>
    
    
    <table id="myDIV"width="100%" dir="rtl"border="0"style="background:#f1f1f1;">
    <?php include ("style/table2.php");?>
    </table>
    
    
    <table width="100%"style="height:150px;background:#383838;border-top:3px solid orange;">
    <?php include ("style/table3.php");?>
    </table>
    
    
    </body>
    </html>

    الان نقوم بشرح الكود
    اولا وضعنا جلسة وفي حال كان المستخدم عضوا اي ليس زائرا يتم توجيهه الي الصفحة الشخصية به
    الكود الخاص بالجلسة
    كود PHP:
    <?php session_start();if(isset($_SESSION['user'])){header("location:home.php");} ?>
    الان نبدا في شرح هيكل الصفحة
    كما رايتم في الكود الاول اننا وضعنا ثلاثة جداول وداخل كل جدول استدعينا جسم الجدول بواسطة الانكلود
    وكما هو موضح اننا وضعنا جسم الجداول داخل مجلد الستايل وهذا ما سنشرحه في المستقبل لا تقلق اعني في الدرس القادم
    الان نحن في الدرس القادم
    نبدا بمجلد الستايل
    ونضع في الجدول الاول الكود التالي
    table1.php
    كود:
    <tr>
    <td width="40%">
    <h1>سوق الجزائر</h1>
    </td>
    <td width="60%">
    <div align="left">
    <form  action="login.php" method="post">
    
    
     <table cellspacing="0"style="color:#fff;">
     <tbody>
     <tr>
     <td class="html7magic">
     <label for="email">البريد الإلكتروني أو الهاتف</label>
     </td>
     <td class="html7magic"><label for="pass">كلمة السر</label></td>
     </tr>
     <tr>
     <td><input type="text" class="name1" name="name1" id="email" value="" tabindex="1">
     </td>
     <td>
     <input type="password" class="inputtext" name="pass" id="pass" tabindex="2">
     </td>
     <td><label class="uiButton uiButtonConfirm" id="loginbutton" for="u_0_l">
     <input value="تسجيل الدخول" tabindex="4" type="submit" name="submit"></label></td>
     </tr>
     <tr>
     <td class="login_form_label_field">
     <div><div class="uiInputLabel clearfix uiInputLabelLegacy">
     <input id="persist_box" type="checkbox" name="persistent" value="1" tabindex="3" class="uiInputLabelInput uiInputLabelCheckbox">
     <label for="persist_box" class="uiInputLabelLabel">البقاء متّصلاً</label>
     </div><input type="hidden" name="default_persistent" value="0">
     </div>
     </td>
     <td class="login_form_label_field">
     <a rel="nofollow" href="situp.html">أيتعذر عليك تسجيل الدخول؟</a>
     </td></tr></tbody>
     </table>
     <input type="hidden" autocomplete="off" name="timezone" value="-60" id="u_0_m">
     <input type="hidden" name="lgnrnd" value="153336_F7-h"><input type="hidden" id="lgnjs" name="lgnjs" value="1404336678">
     <input type="hidden" autocomplete="off" id="locale" name="locale" value="ar_AR"></form>
    </div>
    </td>
    </tr>

    الان قم بلصق الكود التالي في ملف

    table2.php
    الموجود في مجلد style

    كود:
    <style> 
    #myDIV
    {
    background:red;
    animation:mymove 5s infinite;
    
    
    -webkit-animation:mymove 115s infinite;
    }
    
    
    @keyframes mymove
    {
    50% {background-color:violet;}
    }
    
    
    /*Safari and Chrome:*/
    @-webkit-keyframes mymove
    {
    50% {background-color:#FFE6FF;}
    }
    </style>
    <tr>
    <td width="60%"valign="top"><br/><br/>
    <h2>يساعدك سوق الجزائر في بيع ماتريده دون ان تدفع ولا مليم
    <br/>
    لديك جهاز محمول او اي شئ لست في حاجته هناك من هو محتاج اليه قم ببيعه الان 
    </h2>
    <br />
    <img src="img/momok.gif"alt=""style="width:100%;height:150px;">
    </td>
    
    
    <td width="40%"valign="top">
    <br/>
    <div class="mbs _52lq fsl fwb fcb"><span>
    <h2>افتح حسابك في سوق الجزائر مجانا</h2>
    </span></div>
    <br/>
    <h3>
    مجاني وسيبقى مجاني مدى الحياة
    </h3>
    <br />
    
    
    
    
    <form action="class_login.php"method="post">
    <table width="100%" dir="rtl">
    <tr>
    <td><input type="text"name="name1"id="ops"placeholder="اسمك الاول"required>
    </td>
    <td><input type="text"name="name2"id="ops"placeholder="اسم العائلة"required></td>
    </tr>
    
    
    <tr>
    <td colspan="2"><input type="email"name="email1"id="ops"placeholder="ادخل بريد اليكتروني"required></td>
    </tr>
    
    
    <tr>
    <td colspan="2"><input type="email"name="email2"id="ops"placeholder="ادخل بريد اليكتروني للتاكد"required></td>
    </tr>
    
    
    <tr>
    <td colspan="2"><input type="password"name="pass"id="ops"placeholder="اختر كلمة السر الخاصة بك"required></td>
    </tr>
    <tr>
    
    
    <tr>
    <td class="label"><b> انت او نتي </b></td>
    <td><div class="field_container">
    <div class="hidden_elem">
    <select class="select" name="sex" id="sex" aria-required="true"required>
    <option value="0"> تحديد الجنس </option>
    <option value="1">أنثى</option>
    <option value="2">ذكر</option>
    </select>
    </div>
    </td>
    </tr>
    <tr>
    <td class="label"><b> تاريخ الميلاد </b> </td>
    <td>
    <div class="field_container"> 
    <select name="day" id="birthday_day" aria-label="&#x627;&#x644;&#x64a;&#x648;&#x645;" class=""required>
    <option value="-1">اليوم:</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    </select> 
    <select name="month" id="birthday_month" aria-label="&#x634;&#x647;&#x631;" class="" onchange="return run_with(this, [&quot;editor&quot;], function() {editor_date_month_change(this, &quot;birthday_day&quot;, &quot;birthday_year&quot;);});"required>
    <option value="-1">الشهر:</option>
    <option value="1">يناير</option>
    <option value="2">فبراير</option>
    <option value="3">مارس</option>
    <option value="4">أبريل</option>
    <option value="5">مايو</option>
    <option value="6">يونيو</option>
    <option value="7">يوليو</option>
    <option value="8">أغسطس</option>
    <option value="9">سبتمبر</option>
    <option value="10">أكتوبر</option>
    <option value="11">نوفمبر</option>
    <option value="12">ديسمبر</option>
    </select>
     <select name="year" id="birthday_year" aria-label="&#x633;&#x646;&#x629;" class="" onchange="return run_with(this, [&quot;editor&quot;], function() {editor_date_month_change(&quot;birthday_month&quot;,&quot;birthday_day&quot;,this);});"required>
     <option value="-1">السنة:</option>
     <option value="2012">2012</option>
     <option value="2011">2011</option>
     <option value="2010">2010</option>
     <option value="2009">2009</option>
     <option value="2008">2008</option>
     <option value="2007">2007</option>
     <option value="2006">2006</option>
     <option value="2005">2005</option>
     <option value="2004">2004</option>
     <option value="2003">2003</option>
     <option value="2002">2002</option>
     <option value="2001">2001</option>
     <option value="2000">2000</option>
     <option value="1999">1999</option>
     <option value="1998">1998</option>
     <option value="1997">1997</option>
     <option value="1996">1996</option>
     <option value="1995">1995</option>
     <option value="1994">1994</option>
     <option value="1993">1993</option>
     <option value="1992">1992</option>
     <option value="1991">1991</option>
     <option value="1990">1990</option>
     <option value="1989">1989</option>
     <option value="1988">1988</option>
     <option value="1987">1987</option>
     <option value="1986">1986</option>
     <option value="1985">1985</option>
     <option value="1984">1984</option>
     <option value="1983">1983</option>
     <option value="1982">1982</option>
     <option value="1981">1981</option>
     <option value="1980">1980</option>
     <option value="1979">1979</option>
     <option value="1978">1978</option>
     <option value="1977">1977</option>
     <option value="1976">1976</option>
     <option value="1975">1975</option>
     <option value="1974">1974</option>
     <option value="1973">1973</option>
     <option value="1972">1972</option>
     <option value="1971">1971</option>
     <option value="1970">1970</option>
     <option value="1969">1969</option>
     <option value="1968">1968</option>
     <option value="1967">1967</option>
     <option value="1966">1966</option>
     <option value="1965">1965</option>
     <option value="1964">1964</option>
     <option value="1963">1963</option>
     <option value="1962">1962</option>
     <option value="1961">1961</option>
     <option value="1960">1960</option>
     <option value="1959">1959</option>
     <option value="1958">1958</option>
     <option value="1957">1957</option>
     <option value="1956">1956</option>
     <option value="1955">1955</option>
     <option value="1954">1954</option>
     <option value="1953">1953</option>
     <option value="1952">1952</option>
     <option value="1951">1951</option>
     <option value="1950">1950</option>
     <option value="1949">1949</option>
     <option value="1948">1948</option>
      <option value="1947">1947</option>
     <option value="1946">1946</option>
     <option value="1945">1945</option>
     <option value="1944">1944</option>
     <option value="1943">1943</option>
     <option value="1942">1942</option>
     <option value="1941">1941</option>
     <option value="1940">1940</option>
     <option value="1939">1939</option>
     <option value="1938">1938</option>
     <option value="1937">1937</option>
     <option value="1936">1936</option>
     <option value="1935">1935</option>
     <option value="1934">1934</option>
     <option value="1933">1933</option>
      <option value="1942">1942</option>
     <option value="1931">1931</option>
     <option value="1930">1930</option>
     <option value="1929">1929</option>
     <option value="1928">1928</option>
     <option value="1927">1927</option>
     <option value="1926">1926</option>
     <option value="1925">1925</option>
     <option value="1924">1924</option>
     <option value="1923">1923</option>
     <option value="1922">1922</option>
     <option value="1921">1921</option>
     <option value="1920">1920</option>
     <option value="1919">1919</option>
     <option value="1918">1918</option>
     <option value="1917">1917</option>
     <option value="1916">1916</option>
     <option value="1915">1915</option>
     <option value="1914">1914</option>
     <option value="1913">1913</option>
     <option value="1912">1912</option>
     <option value="1911">1911</option>
     <option value="1910">1910</option>
     <option value="1909">1909</option>
     <option value="1908">1908</option>
     <option value="1907">1907</option>
     <option value="1906">1906</option>
     <option value="1905">1905</option>
     </select>
     </div>
     </td>
     </tr>
    
    
    
    
    
    
    <td colspan="2">
    بالضغط على ‏فتح حساب في فيس بوك‏، أنت توافق على ‏شروطنا‏، وأنك قرأت ‏سياسة استخدام البيانات‏ لدينا، بما في ذلك ‏استخدام ملفات تعريف الارتباط‏.
    <br /><br />
    <button type="submit" class="_6j mvm _6wk _6wl _58mi _6o _6v" 
    name="websubmit" id="u_0_i">فتح حساب في سوق الجزائر</button>
    
    
    
    
    </td>
    </tr>
    </table>
    </form>
    </td>
    </tr>
    الان ضع الكود التالي في ملف
    table3.php
    الكود

    كود:
    <tr>
    <td style="color:#fff;">
    معلومات عامة
    <br/>من نحن<br/>ما هو سوق الجزائر<br/>كيف تبدا<br/>للاتصال بنا<br/>
    </td>
    <td style="color:#fff;">
    معلومات عامة
    <br/>من نحن<br/>ما هو سوق الجزائر<br/>كيف تبدا<br/>للاتصال بنا<br/>
    </td>
    
    
    
    
    <td style="color:#fff;">
    معلومات عامة
    <br/>من نحن<br/>ما هو سوق الجزائر<br/>كيف تبدا<br/>للاتصال بنا<br/>
    </td>
    
    
    <td style="color:#fff;">
    معلومات عامة
    <br/>من نحن<br/>ما هو سوق الجزائر<br/>كيف تبدا<br/>للاتصال بنا<br/>
    </td>
    </tr>
    بدل بما يناسبك

    الان وصلنا للاهم وهو ملف الستايل style.css

    اليك الكود كاملا مع بعض الزيادات الخاصة بصفحة home.php
    والتي سنشرع في برمجتها ولكن في دروس php
    اليكم كود الستايل
    كود:
    *{
    padding:0px;
    outline:0px;
    padding:0px;
    margin-top:0px;
    margin:0px;
    }
    table {
        border-collapse: collapse;
        
        
        
    }
    h1{
    font-family:tahoma;
    color:#ffffff;
    height:auto;
    font-size:35px;
      
    }
    th{
    background:#f1f1f1;
    
    
    }
    td{
    padding:5px;
    font-family:tahoma;
    font-size:16px;
    }
    a{
    text-decoration:none;
    color :orange;
    font-family:tahoma;
    font-size:16px;
    } 
    #img{
    border-radius:10px;
    
    
    
    
    }
    
    
    #home{
    width:100%;
    background: url("https://lh5.googleusercontent.com/-vtfGmFMdb2Q/UTSAFc6XF6I/AAAAAAAAALo/Eyfifa-pQ9g/s145/bg2.png") repeat 50% 50% #f1f1f1;
    
    
    margin-left:auto;
    margin-right:auto;
    position:relative;
    color:#000;
    margin:0px;
    }
    #header{
    padding:10px;
    text-align:right;
    color:;
    background: #fff;
    }
    #footer{
    padding:7px;
    background:#f1f1f1;
    border-top:4px solid #D81B67;
    text-align:center;
    }
    #nav{
    color:#383838;
    background:#fff;
    height:47px;
    width:100%;
    border:1px solid #f1f1f1;
    border-radius:10px;
    }
    #nav ul{
    list-style:none;
    color:#3b5998;
    }
    #nav ul li{
    float:right;
    }
    #nav ul li a{
    display:block;
    color:#3b5998;
    padding-left:20px;
    padding-right:3px;
    padding-top:10px;
    padding-bottom:10px;
    direction :rtl;
    font-family:tahoma;
    font-size:16px;
    }
    a:active{
    border-bottom:4px solid #D81B67;
    background:#f1f1f1;
    color:#fff;
    }
    #nav11 ul li a:hover{
    border-bottom:4px solid #fff;
    background:#f1f1f1;color:#383838;
    }
    #nav li.home{border:0;margin-top:0;height:40px}
    #nav li.home a{border-bottom: 5px solid #E6005C;direction: ltr;text-align: left;height:52px;border-left:0 none;text-indent:-9999px;width:55px;background-color:#373737;background-image:url('http://4.bp.blogspot.com/-BPpsKK84W2w/UJV6sFxkqDI/AAAAAAAAGgc/3TwsYkMwxsE/s1600/home+(1).png');background-repeat:no-repeat;background-position:50% 9px}
    #nav li.home a:hover{background-color:#FFBD68;}
    #nav li.home a:active {
        border-bottom:0
    }
    #index{
    margin:0px;
    padding:0px;
    width:97%;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    }
    #rb{
    width:180px;
    float:right;
    margin-left:5px;
    padding:5px;
    }
    #table{
    width:99%;
    height:200px;
    padding:px;
    height:px;
    background:#fff;
    margin:0px;
    
    
    }
    #lb{
    width:180px;
    float:left;
    margin-right:5px;
    padding:5px;
    }
    #cb{
    width:auto;
    margin-left:190px;
    margin-right:190px;
    padding:5px;
    }
    #cb2{
    width:auto;
    margin-right:190px;
    padding:5px;
    }
    #art11{
    float:right;
    margin:0px;
    width:30%;
    }
    #art11{
    float:right;
    margin:0px;
    width:70%;
    padding:20px;
    }
    #tali{
    float:right;
    border:1px solid #f1f1f1;
    width:200px;
    height:30px;
    background:#383838;
    padding:2;
    }
    #tali1{
    float:left;
    border:1px solid #f1f1f1;
    width:200px;
    height:30px;
    background:#383838;
    padding:2px;
    text-shadow: 0 -1.5px 0 red;
    }
    #tali2{
    float:center;
    border:1px solid #f1f1f1;
    width:20px;
    height:30px;
    background:#383838;
    padding:2px;
    border-bottom:4px solid orange;
    margin-top:10px;
    }
    #art11{
    float:right;
    margin:0px;
    width:30%;
    }
    #art11{
    float:right;
    margin:0px;
    width:400px;
    padding:20px;
    color:#fff;
    }
    #tali{
    float:right;
    border:1px solid #f1f1f1;
    width:200px;
    height:30px;
    background:#383838;
    padding:2;
    color:#fff;
    }
    #tali1{
    float:left;
    border:1px solid #f1f1f1;
    width:200px;
    height:30px;
    background:#383838;
    padding:2px;
    text-shadow: 0 -1.5px 0 red;
    color:#fff;
    }
    #tali2{
    float:center;
    border:1px solid #f1f1f1;
    width:20px;
    height:30px;
    background:#383838;
    padding:2px;
    border-bottom:4px solid orange;
    margin-top:10px;
    opacity:inline;
    }
    .bobyar{
    background-color:#fff;
    color:#383838;
    margin:0px 2px 7px 2px;
    text-align:justify;
    }
    .red{
    color:#E6005C;
    }
    .blue{
    color:f1f101;
    
    
    background:#;
    }
    .head{
    background-color:#e9eaed;
    margin:0px 0px 0px 0px;
    color:#3b5998;
    text-align:center;
    padding:14px;
    border-top:4px solid #383838;
    font-size:14;
    font-family:tahoma;
    }
    .body{
    background-color:#fff;
    margin:2px 2px 2px 2px;
    color:#383838;
    text-align:right;
    padding:7px;
    
    
    }
    .body a{
    background-color:#fff;
    color:#3B5998;
    padding:7px;
    display:block;
    position:black;
    text-align:right;
    }
    .body a:hover{
    background-color:#383838;
    color:#fff;
    }
    .ok{
    background :#f7ffd5;
    text-align:center;
    padding:50px;
    color:#ff0000;
    }
    .no{
    background :blue;
    text-align:center;
    padding:50px;
    color:#fff;
    }
    .page{
    background-color:#383838;
    color:#fff;
    border-bottom:4px solid #E6005C;
    padding:3px;
    margin :4px;
    padding-left:4px;
    padding-right:4px;
    }
    .page:hover{
    background-color:#fff;
    color:#383838;
    }
    .page2{
    background-color:#E6005C;
    color:#fff;
    border-bottom:4px solid #383838;
    padding:3px;
    margin :4px;
    padding-left:4px;
    padding-right:4px;
    }
    .page2:hover{
    background-color:#fff;
    color:#E6005C;
    
    
    }
    .bobypanel3{
    background-color:#f1f1f1;
    margin:0px 2px  7px 2px;
    color:#383838;
    text-align:center;
    padding:7px;
    
    
    }
    .clear{
    clear :both;
    }
    #form{
    display:inline;
    padding:7px;
    margin-top:10px;
    }
    #ops{
    height:35px;
    width:100%;
    padding:0px;
    border-radius:10px;
    font-family:tahoma;
    font-size:16px;
    margin:auto auto auto auto;
    border:1px solid #ccc;
    opacity:100%;
    padding-right:5px;
    }
    #ops1{
    height:25px;
    width:20%;
    padding:0px;
    border-radius:10px;
    font-family:tahoma;
    font-size:14px;
    margin:auto auto auto auto;
    border:1px solid #ccc;
    opacity:100%;
    padding-right:5px;
    }
    #ops_1{
    height:100px;
    width:100%;
    padding:0px;
    border-radius:10px;
    font-family:tahoma;
    font-size:16px;
    margin:auto auto auto auto;
    border:1px solid #ccc;
    opacity:100%;
    padding-right:5px;
    }
    
    
    #sub{
    
    
    height:25px;
    background:#fff;
    color:#383838;
    border:1px solid #ccc;
    border-radius:25px;
    font-family:tahoma;
    margin:auto auto auto auto;
    }
    .lir{
    background:#fff;
    padding:5px;
    color:blue;
    font-family:tahoma;
    border:1px solid #ccc;
    margin:5px;
    margin-top:10px;
    }
    
    
    element.style {
    }
    div.mbs._52lq.fsl.fwb.fcb {
    }
    ._52lp._59d- ._52lq {
    font-size: 37px;
    }
    ._52lp ._52lq {
    color: #141823;
    font-family: 'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 41px;
    font-weight: normal;
    white-space: nowrap;
    }
    .fcb {
    color: #333;
    }
    .fwb {
    font-weight: bold;
    }
    .fsl {
    font-size: 14px;
    }
    .mbs {
    margin-bottom: 5px;
    }
    element.style {
    }
    ._6wl:hover {
    background: -webkit-gradient(linear, center top, center bottom, from(orange), to(orange));
    background: -webkit-linear-gradient(orange, orange);
    }
    ._6j:hover {
    text-decoration: none;
    }
    .mvm {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    ._58mi {
    min-width: 100%;
    padding: 7px 20px;
    text-align: center;
    }
    ._6v {
    font-weight: bold;
    }
    ._6o {
    font-size: 20px;
    line-height: 126%;
    }
    ._6wl {
    background: -webkit-gradient(linear, center top, center bottom, from(#67ae55), to(#578843));
    background: -webkit-linear-gradient(#67ae55, #578843);
    background-color: #69a74e;
    -webkit-box-shadow: inset 0 1px 1px #a4e388;
    border-color:1px solid #3b6e22 #3b6e22 #2c5115;
    }
    ._6wk {
    padding: 20px 30px;
    }
    ._6j {
    border: 1px solid;
    -webkit-border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    }
    button {
    margin: 0;
    }
    body, button, input, label, select, td, textarea {
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 12px;
    }
    user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    padding: 1px 6px;
    }
    user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 2px 6px 3px;
    border: 2px outset buttonface;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
    }
    user agent stylesheetinput, textarea, keygen, select, button {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    }
    user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
    }
    user agent stylesheetbutton {
    -webkit-appearance: button;
    }
    Inherited from div.clearfix
    .clearfix {
    zoom: 1;
    }
    Inherited from div.clearfix
    .clearfix {
    zoom: 1;
    }
    Inherited from div#content.fb_content.clearfix
    .clearfix {
    zoom: 1;
    }
    Inherited from div#globalContainer.uiContextualLayerParent
    #globalContainer {
    margin: 0 auto;
    position: relative;
    zoom: 1;
    }
    Inherited from body.fbIndex.UIPage_LoggedOut.hasSmurfbar.hasSmurfbarLoggedOut.hasPrivacyLite.webkit.chrome.win.Locale_ar_AR
    body, button, input, label, select, td, textarea {
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 12px;
    }
    body {
    margin-top:0px;
    background: #383838;
    color: #333;
    line-height: 1.28;
    margin: 0;
    padding: 0;
    text-align: right;
    direction: rtl;
    unicode-bidi: embed;
    }
    
    
    .menu_login_container .login_form_label_field {
    padding-top: 4px;
    }
    .menu_login_container table tr td {
    padding: 0 14px 0 0;
    }
    td, td.label {
    text-align: right;
    }
    body, button, input, label, select, td, textarea {
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 12px;
    }
    user agent stylesheettd, th {
    display: table-cell;
    vertical-align: inherit;
    }
    Inherited from table
    user agent stylesheettable {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    }
    Inherited from div.clearfix.loggedout_menubar
    .clearfix {
    zoom: 1;
    }
    w3bphp معجب بهذا .

  4. #4
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    33
    المشاركات
    135
    معدل تقييم المستوى
    4

    افتراضي رد: تصميم صفحة الدخول والتسجيل مثل فيس بوك

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

  5. #5
    عضو مشارك الصورة الرمزية jafa34
    تاريخ التسجيل
    01-12-2012
    المشاركات
    82
    معدل تقييم المستوى
    5

    افتراضي رد: تصميم صفحة الدخول والتسجيل مثل فيس بوك

    بارك الله فيك أخي الكريم
    شرح مفيد
    نتمنى منك المتابعه و الإستمرار

  6. #6
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    33
    المشاركات
    135
    معدل تقييم المستوى
    4

    افتراضي رد: تصميم صفحة الدخول والتسجيل مثل فيس بوك

    اقتباس المشاركة الأصلية كتبت بواسطة jafa34 مشاهدة المشاركة
    بارك الله فيك أخي الكريم
    شرح مفيد
    نتمنى منك المتابعه و الإستمرار
    امين اخي الكريم تقبل الله الصيام والقيام

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

المواضيع المتشابهه

  1. مشكلة فى تصميم عند الدخول بلسيشن
    بواسطة php_haker في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 1
    آخر مشاركة: 20-09-2011, 01:17 AM
  2. استفسار مساعدة في تصميم صفحة تحميل الصور
    بواسطة sofiender في المنتدى دروس متقدمة
    مشاركات: 1
    آخر مشاركة: 10-09-2010, 10:09 PM
  3. ملف php خاص لتسجيل الدخول والتسجيل
    بواسطة abdalaziz في المنتدى دورة بناء برنامج منتديات بسيط مع PHP و MySQL
    مشاركات: 4
    آخر مشاركة: 03-05-2010, 04:12 PM
  4. ممكن المساعدة بخصوص تصميم صفحة
    بواسطة php_haker في المنتدى مشاكل وحلول تصميم الويب والأنماط الانسيابية CSS & CSS3
    مشاركات: 6
    آخر مشاركة: 29-10-2009, 03:15 PM
  5. مشكلة لا يتأكد تسجيل الدخول والتسجيل الجديد !!
    بواسطة السولافي في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 3
    آخر مشاركة: 29-10-2008, 02:12 PM

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •