Question

当我在我的css文件中添加一些东西进行测试时，网页上没有任何反应。

随机文字，这样我就可以在没有要求提供更多细节的情况下发布。

<html>
<head>
<title>Basket Gifts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.displaybanner.com/images/sample_banner.jpg"   alt="Banner">

        </div> <!--ends the header-->

        <div id="main">
            <p>Mum & Baby girl gifts<br>
            <p>Mum & Baby boy gifts<br>
            <p>Nail & Beauty products<br>
            <p>Food Hamper<br>
            <p>Chocolate Hamper<br>
            <p>Fruit Basket<br>
            <P>Cheese & Biscuits Hamper<br>

            <br><br>
            <h3>Select your price range</h3>
            <form>
                <input type="radio" name="hi" value="value">$30-40</input><br>
                <input type="radio" name="hi" value="value">$40-50</input><br>
                <input type="radio" name="hi" value="value">$50-60</input><br>
                <input type="radio" name="hi" value="value">$60-70</input><br>
                    <br><br>
                <input type="text" name="Name" placeholder="Name"><br>
                <input type="text" name="Phone" placeholder="Address"><br>
                <input type="text" name="Address" placeholder="Phone Number"><br>
                <input type="text" name="email" placeholder="Email Address"><br>
                <input type="text" name="confirm email" placeholder="Confirm Email">
            </form>
        </div> <!--Ends the main content area-->

        <div id="footer">
        <p>Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.<br>
        </div> <!--ends the footer-->
    </div> <!--ends the container-->
</body>

这有什么问题？我的CSS没有链接到我的html文件。

的style.css：

#container {
background-color: red;
}

#header {
background-color: red;
}

p {
font-family: calibri;
}

任何帮助都将不胜感激。

Answer 1

我确实运行了你的代码，它运行正常。

如果即使没有更正您的代码，它也可以正常工作..我的意思是您的样式应用于html文件。

运行代码时（{3}}，这是Image

尽管如此，你错过了很多贴身标签，

这是更正后的代码，

<html>
<head>
<title>Basket Gifts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.displaybanner.com/images/sample_banner.jpg"   alt="Banner">

        </div> <!--ends the header-->

        <div id="main">
            <p>Mum & Baby girl gifts</p><br>
            <p>Mum & Baby boy gifts</p><br>
            <p>Nail & Beauty products</p><br>
            <p>Food Hamper</p><br>
            <p>Chocolate Hamper</p><br>
            <p>Fruit Basket</p><br>
            <P>Cheese & Biscuits Hamper</p><br>

            <br><br>
            <h3>Select your price range</h3>
            <form>
                <input type="radio" name="hi" value="value">$30-40</input><br>
                <input type="radio" name="hi" value="value">$40-50</input><br>
                <input type="radio" name="hi" value="value">$50-60</input><br>
                <input type="radio" name="hi" value="value">$60-70</input><br>
                    <br><br>
                <input type="text" name="Name" placeholder="Name"><br>
                <input type="text" name="Phone" placeholder="Address"><br>
                <input type="text" name="Address" placeholder="Phone Number"><br>
                <input type="text" name="email" placeholder="Email Address"><br>
                <input type="text" name="confirm email" placeholder="Confirm Email">
            </form>
        </div> <!--Ends the main content area-->

        <div id="footer">
        <p>
        Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.<br>
        </p>
        </div> <!--ends the footer-->
    </div> <!--ends the container-->
</body>
</html>

Answer 2

你的html代码中有几个错误，我为你添加了固定的html和css：

<!DOCTYPE html>
<html>
    <head>
        <title>Basket Gifts</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="header" >
            <h1>Basket Gifts</h1>
            <p>Would you like baskets made and delivered anywhere in New Zealand? Click on the link below to choose what types of basket you want,<br> choose the price range and the the delivery address, and the date required. once all the contact details and the direct credit payment is confirmed,<br> an email will be sent to you confirming delivery, and the number of the track and trace parcel Please allow for two weeks before the requested date.</p>
        </div> <!--ends the header-->

        <div id="main" >

            <p>Mum & Baby girl gifts</p>
            <p>Mum & Baby boy gifts</p>
            <p>Nail & Beauty products</p>
            <p>Food Hamper</p>
            <p>Chocolate Hamper</p>
            <p>Fruit Basket</p>
            <P>Cheese & Biscuits Hamper</p>

        <br><br>
        <h3>Select your price range</h3>
        <form>
            <input type="radio" name="hi" value="value" />$30-40<br>
            <input type="radio" name="hi" value="value" />$40-50<br>
            <input type="radio" name="hi" value="value" />$40-50<br>
            <input type="radio" name="hi" value="value" />$60-70<br>
                <br><br>
            <input type="text" name="Name" placeholder="Name" /><br>
            <input type="text" name="Phone" placeholder="Address" /><br>
            <input type="text" name="Address" placeholder="Phone Number" /><br>
            <input type="text" name="email" placeholder="Email Address" /><br>
            <input type="text" name="confirm email" placeholder="Confirm Email" />
        </form>

        </div> <!--Ends the main content area-->

        <div id="footer" >
            <p>Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.</p>
        </div> <!--ends the footer-->
    </body>
</html>

这是CSS

#container {
    background-color: red;
}

#header {
    background-color: red;
}

p {
    font-family: calibri;
}

#main, #footer, #container, #header {
    text-align: center
}

我的HTML出了什么问题？

2 个答案: