اذهب إلى المحتوى
  • 0

ممكن مساعدتي في تنسيق وترتيب كودات تصميم صفحة الماستر بيج ل HTML

همسة احساس

السؤال

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="My_Project.MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Click to Chic:Elevate Your Style with Online Shopping</title>
    <link href="Mystyle.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

THIS STYLE SHEET :



body {
    background:  url('image/bg.png');
    margin: 0;
    font-size: 12pt;
    line-height: 1.75em;
    padding:0px;
    font-family: Arial, sans-serif;
}


#header {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 10px;
    width: 100%;
    height: 120px;
    text-align: right;
}


ul {
    margin-bottom: 1.5em;
}

#nav {
    position: absolute;
    right:-15px;
    height: 48px;
    top: 236px;
    font-family: Arvo, serif;
    font-size: 35px;
    padding-right:1.5px;
    width: 1317px;
}

#nav ul {
    list-style: none;
    width: 1319px;
}

#nav ul li {
    float: left;
    margin: 0 0.5em 0 0.5em;
    padding: 10px;
}


#nav li a {
        text-decoration: none;
        color: #030707;
        font-weight: bold;
    text-align: left;
}
#footer {
    position: relative;
    padding: 30px;
    width: 1297px;
    background: #001F3F;
    color: #FFF;
    top: 133px;
    left: -30px;
    height: 353px;
}
#footerSidebar {
    width: 1px;
    float: left;
}
#footerContent {
    width: 1018px;
    margin: 0px 0 0 265px;
    height: 172px;
}





    <style type="text/css">
        .auto-style8 {
            height: 0px;
        }
        #logo {
            height: 106px;
            width: 117px;
        }
        #bot_left {
            width: 1274px;
        }
        </style>


</head>
    <body>
        <form id="form1" runat="server">
      
                <div id="header">
                    <div id="logo">
                        <img src="image/logo.png" />&nbsp;&nbsp;&nbsp;
                     </div>

                    <div id="nav">
                        <ul>
                            <li><a href="home.aspx">Home</a></li>                           
                            <li class="auto-style8"><a href="Women.aspx">Women Clothes</a></li>
                            <li><a href="Men.aspx">Men Clothes</a></li>
                            <li><a href="About Us.aspx">About Us</a></li>
                            <li><a href="Contact Us.aspx">Contact Us</a></li>
                        </ul>
                    </div>
                            <asp:LoginView ID="LoginView1" runat="server">
                            <AnonymousTemplate>
                                Welcom!,&nbsp;
                                    <a href="Register.aspx">Register</a> &nbsp;|&nbsp;
                                    <a href="Login.aspx" style="text-align: right">Login</a>
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                  <asp:LoginName ID="Log_name" runat="server" FormatString="Hi {0}!" />
                                  <asp:LoginStatus ID="Log_stat" runat="server" LogoutText="Logout" LogoutPageUrl="~/default.aspx" LogoutAction="Redirect" LoginText="Login" OnLoggingOut="Log_stat_LoggingOut" />
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </div>

                    <div id="footer">
                    <div id="footerSidebar">
                        
                        <ul class="linkedList">
                            <li>
                                 <a href="https://www.whatsapp.com/"target="_blank">
                                    <img src="image/Whatsapp.PNG"  height="40" style="width: 50px"/>
                                </a>
                            </li>

                            <li>
                                <a href="https://www.twitter.com/"target="_blank">
                                    <img src="image/Twitter.png"  height="40" style="width: 50px"/>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.instagram.com/"target="_blank">
                                    <img src="image/Instgram.jpg"  height="40" style="width: 50px"/>
                                </a>

                            </li>
                            <li>
                                <a href="https://www.facebook.com/"target="_blank">
                                    <img src="image/Facebook.PNG"  height="40" style="width: 50px"/>
                                </a>
                            </li>                            
                        </ul>
                    
                    </div>
                    <div id="footerContent">
                        <h1>
                            Online Shopping
                        </h1>
                        <p>
                            Providing high-quality garments, shoes, and watches at a low price
                        </p>
                    </div>
                    <div id="bot_left">
                        2023 created by ALNABHANI
                    </div>         
         
                
        </form>            
    </body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الكود الخاص بك يعمل بشكل جيد، ولكنه بحاجة بعض التنظيم.

اليك بعض الملاحظات:

  1. يجب وضع جميع اكواد التصميم الخاصة بال css داخل </style><style> داخل ال </head><head>.
  2. يجب استخدام ال class عوضا عن ال id، وذلك لأن ال id يستخدم أكثر بكثير مع ال Javascript.
  3. لاداعي أبدا لوضع العنوان "THIS STYLE SHEET :" في المقدمة.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الكود بحاجة إلى إعادة كتابة بالكامل لهيكلة الصفحة بشكل جيد، ومبدأيًا سيكون شكل الكود كالتالي:

<!DOCTYPE html>
<html lang="en">

<head runat="server">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to Chic: Elevate Your Style with Online Shopping</title>
    <link rel="stylesheet" href="Mystyle.css">
    <style>
        body {
            background: #f8f8f8;
            margin: 0;
            font-size: 16px;
            line-height: 1.6;
            font-family: 'Arial', sans-serif;
        }

        header {
            background: #3498db;
            color: #fff;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #logo img {
            width: 100px;
            height: auto;
        }

        nav {
            display: flex;
            align-items: center;
        }

        nav ul {
            list-style: none;
            display: flex;
            margin: 0;
        }

        nav li {
            margin-right: 20px;
        }

        nav a {
            text-decoration: none;
            color: #fff;
            font-weight: bold;
            font-size: 1.1rem;
        }

        main {
            padding: 2rem;
            box-sizing: border-box;
        }

        #footer {
            background: #3498db;
            color: #fff;
            padding: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #footer .social-links {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        #footer .social-links li {
            margin-right: 10px;
        }

        #footer .social-links img {
            width: 40px;
            height: auto;
        }

        #footer-content {
            flex-grow: 1;
            margin-left: 2rem;
        }

        #bot-left {
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <header>
        <div id="logo">
            <img src="https://placehold.co/100x100" alt="Logo">
        </div>
        <nav>
            <ul>
                <li><a href="home.aspx">Home</a></li>
                <li><a href="Women.aspx">Women Clothes</a></li>
                <li><a href="Men.aspx">Men Clothes</a></li>
                <li><a href="About Us.aspx">About Us</a></li>
                <li><a href="Contact Us.aspx">Contact Us</a></li>
            </ul>
        </nav>
        <asp:LoginView ID="LoginView1" runat="server">
            <AnonymousTemplate>
                Welcom!,&nbsp;
                <a href="Register.aspx">Register</a> &nbsp;|&nbsp;
                <a href="Login.aspx" style="text-align: right">Login</a>
            </AnonymousTemplate>
            <LoggedInTemplate>
                <asp:LoginName ID="Log_name" runat="server" FormatString="Hi {0}!" />
                <asp:LoginStatus ID="Log_stat" runat="server" LogoutText="Logout" LogoutPageUrl="~/default.aspx"
                    LogoutAction="Redirect" LoginText="Login" OnLoggingOut="Log_stat_LoggingOut" />
            </LoggedInTemplate>
        </asp:LoginView>
    </header>

    <main>
        <!-- Your main content goes here -->
    </main>

    <footer id="footer">
        <div id="footer-sidebar">
            <ul class="social-links">
                <li>
                    <a href="https://www.whatsapp.com/" target="_blank">
                        <img src="https://placehold.co/40x40" alt="WhatsApp">
                    </a>
                </li>
                <li>
                    <a href="https://www.twitter.com/" target="_blank">
                        <img src="https://placehold.co/40x40" alt="Twitter">
                    </a>
                </li>
                <li>
                    <a href="https://www.instagram.com/" target="_blank">
                        <img src="https://placehold.co/40x40" alt="Instagram">
                    </a>
                </li>
                <li>
                    <a href="https://www.facebook.com/" target="_blank">
                        <img src="https://placehold.co/40x40" alt="Facebook">
                    </a>
                </li>
            </ul>
        </div>
        <div id="footer-content">
            <h1>Online Shopping</h1>
            <p>Providing high-quality garments, shoes, and watches at a low price</p>
			            2023 created by ALNABHANI

        </div>
      
    </footer>
</body>

</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...