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

همسة احساس · 1 ديسمبر 2023

<%@ 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>

محمد سعد شحرور · 1 ديسمبر 2023

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

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

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

Mustafa Suleiman · 4 ديسمبر 2023

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

<!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>

همسة احساس · 7 ديسمبر 2023

السلام عليكم أريد مساعدة صممت صفحات الموقع ويظهر لي مشكلة ما عرفت الخطأ

هل بالامكان مساعدتي وأن ارسل له الملف

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

السؤال

همسة احساس

3 أجوبة على هذا السؤال

Recommended Posts

محمد سعد شحرور

Mustafa Suleiman

همسة احساس

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية