Question

我正在为学校的班级制作假网站。出于某种原因，它不会让我滚动。有任何想法吗？我是一个初学者，所以你必须原谅我的无知。

直播网站

http://ec2-54-187-248-132.us-west-2.compute.amazonaws.com/pizzaplace/

来源：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>The Pizza Place</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            body{text-align: center;}
            table{margin-left:auto; margin-right:auto;}

            h1{font-style: italic;
               font-size: 450%;}
            div.title{
                position: fixed;
                top:10px;
                left:10px;
            }
            div.contents{
                background-color: red;
                position: fixed;
                top:200px;
                left:420px;
                padding:20px;
                -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            }
        </style>
    </head>
    <body>
        <h1>The Pizza Place</h1>
        <div class="title"><img src="pizza.gif"></div>
        <div class="contents"><br><br>

            <form name="orderdetail" action="MAILTO:ndespai7@bruinmail.slcc.edu" 
                  method="post" enctype="text/plain">
                <b>Name:</b><input type="text" name="Name" value="Enter Your Name" size="30" max length="30">
                <b>Phone:</b><input type="text" name="Phone" value="Enter Your Phone Number" size="30" max length="30"><br><br><br>
                <b>Size:</b> &nbsp; <input type="radio" name="size" value="S"/> Small &nbsp;&nbsp;
                <input type="radio" name="size" value="S"/> Medium &nbsp; &nbsp;
                <input type="radio" name="size" value="S"/> Large &nbsp; &nbsp;
                <input type="radio" name="size" value="S"/> Family Size &nbsp;&nbsp;
                <br><br><br>
                <b>Crust:</b> <select name="crust"><option value='Thin'>Thin Crust</option>
                    <option value="Original">Original Crust</option>
                    <option value="Stuffed Crust">Cheese Stuffed Crust</select><br><br>
                <div><b>Toppings:</b></div>
                <table>
                    <tr><td><input type="checkbox" name="toppings" value="P" checked/></td><td>Pepporoni</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="S" checked/></td><td>Sausage</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="GP" checked/></td><td>Green Peppers</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="C" checked/></td><td>Chicken</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="J" checked/></td><td>Jalapenos</td></tr>
                </table>
                <br><br><br>
                <input type="reset" value="Reset"> &nbsp;&nbsp;&nbsp;
                <input type="submit" value="Send"><br><br>
            </form>
            <br><br>
            </div>
        <br><br><br>



    </body>
</html>

Answer 1

那是因为你将所有内容都固定到位。从您的样式中删除position: fixed;中的div.contents。

Answer 2

我不确定你不想移动的是什么，但你可以通过替换 position: fixed;并使用样式中的position: relative;向下滚动

div.contents{
            background-color: red;
            position: fixed; /*replace This*/
            top:200px;
            left:420px;
            padding:20px;
            -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
        }

固定位置将div内容保持不变而不让它们出现。希望这有帮助。

已编辑的代码

div.contents{
                background-color: red; 
                position: relative;
                top:200px;
                left:420px;
                padding:20px;
                -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            }

网页不会向下滚动？

2 个答案: