个人中心
gpt4 book ai didi

javascript - 当我添加更多 Material 时，我的内容不会超出一页

转载 作者：行者123 更新时间：2023-11-27 23:50:57 24 4
gpt4 key购买 nike

我是编码新手，我正在尝试为学校创建一个时间管理网站。这段代码我已经复制了好多次了，但是现在页面下好像没有继续下去了，不知道为什么。 

<html>
<style>
     
.title {
    text-align: center;
    font-size: 45px;
    color: #b72121;
}
     
    </style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
    <div> 
        <h2> Today <span class= "june13">June 13</span></h2> 
        <div class="line1">
            <div> 
			    <br />
                <div id= "bonus" />
                <input id= "first" type="text" name="firstname" value="Enter Task Here">
                <br />  
                <div>
                    <button class="button" onclick ="addtask()"> Add Task </button>
                    <div id="div">
                        <div> 
                            <h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2> 
                            <div class="line2"> 
                                <div>
               
                                    <div>
                                        <br /> 
                                        <div id= "bonus1" />
                                        <input id= "first1" type="text" name="firstname" value="Enter Task Here">
                                    </div>
                                    <button class="button1" onclick ="addtask1()"> Add Task </button>
                                </div>
                                <div> 
                                    <h2> Satuday <span class= "june14">June 15</span></h2> 
                                    <div class="line3"> 
                                        <div>
                                            <div>
                                                <br /> 
                                                <div id= "bonus2" />
                                                <input id= "first2" type="text" name="firstname" value="Enter Task Here">
                                            </div>
                                            <button class="button2" onclick ="addtask2()"> Add Task </button>
                                            <div>
                                            <div> 
                                                <h2> Sunday <span class= "june16">June 16</span></h2> 
                                                <div class="line4"> 
                                                    <div>
                                                        <div>
                                                            <br /> 
                                                            <div id= "bonus3" />
                                                            <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                                                        </div>
                                                        <button class="button3" onclick ="addtask3()"> Add Task </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div> 
                                                    <h2> Sunday <span class= "june16">June 16</span></h2> 
                                                        <div class="line4"> 
                                                            <div>
                                                                <div>
                                                                    <br /> 
                                                                    <div id= "bonus3" />
                                                                    <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                                                                </div>
                                                                <button class="button3" onclick ="addtask3()"> Add Task </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div/>
                </div> 
            </div>
        </div>
    </div>
<style>        
    .title {
        text-align: center;
        font-size: 45px;
        color: #b72121;
    }
             
    .june13 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line1 {
        width: 30%;
        height: 2px;
        background-color: #666;
        margin-bottom: 10px;
    }   
    
    .button {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    }

    .button:hover {
        background-color: #3e8e41
    }

    .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    input {     
        margin-bottom: 10px;
    }
             
    .june14 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line2 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button1 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    }

    .button1:hover {
        background-color: #3e8e41
    }

    .button1:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    .june15 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line3 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button2 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    
    }

    .button2:hover {
        background-color: #3e8e41
    }

    .button2:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }
             
    .june16 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line4 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
		
    .button3 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    
    }

    .button3:hover {
        background-color: #3e8e41
    }

    .button3:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    june17 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line5 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button4 {
  
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;  
    }

    .button4:hover {
        background-color: #3e8e41
    }

    .button4:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
}
    
</style>
</div> 
    <script>
        function addtask() {
            var first = document.getElementById("first").value;
            document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
        }
        
        function addtask1() {
            var first = document.getElementById("first1").value;
            document.getElementById("bonus1").innerHTML += "<p>"+first+"</p>";
        }
		 
        function addtask2() {
            var first = document.getElementById("first2").value;
            document.getElementById("bonus2").innerHTML += "<p>"+first+"</p>";
        }
		
        function addtask3() {
            var first = document.getElementById("first3").value;
            document.getElementById("bonus3").innerHTML += "<p>"+first+"</p>";   
        }
    </script>
</body>
</html>

我认为这是代码中问题较多的部分。 

<div>
    <div> 
        <h2>Sunday <span class= "june16">June 16</span></h2> 
        <div class="line4"> 
            <div>
                <div>
                    <br/> 
                    <div id= "bonus3" />
                    <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                </div>
                <button class="button3" onclick ="addtask3()">Add Task</button>
            </div>
        </div>
    </div>                      
</div>

我非常感谢您的帮助，一切都会好起来的。我基本上只是想做到这一点，以便您可以添加当天要执行的任务，然后将它们放在输入上方。我对代码很陌生。我也在尝试使用颜色设置优先级，但是，我真的不知道该怎么做。欣赏它:)

最佳答案

首先清理你的代码，类名应该用于对看起来相同的元素进行分组(例如在你的情况下 line1，line2 等应该都是名为行)。如果您需要单独访问元素，请使用 id(例如按钮)。

你的外观问题是 line 类的高度是 2px 并且因为它是整个部分的包装所以整个部分的高度为 2px。我清理了您的代码，这里是它的外观示例(请注意，类名 june13 也应重命名为 date 或类似名称)。要添加更多日期，只需复制该部分并更改 input id 和 button function 的值。

function addtask() {
    var first = document.getElementById("first").value;
    document.getElementById("bonus").innerHTML += "<p>" + first + "</p>";
}

function addtask1() {
    var first = document.getElementById("first1").value;
    document.getElementById("bonus1").innerHTML += "<p>" + first + "</p>";
}

function addtask2() {
    var first = document.getElementById("first2").value;
    document.getElementById("bonus2").innerHTML += "<p>" + first + "</p>";
}

function addtask3() {
    var first = document.getElementById("first3").value;
    document.getElementById("bonus3").innerHTML += "<p>" + first + "</p>";
}
.title {
	text-align: center;
	font-size: 45px;
	color: #b72121;
}

.june13 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #989da5;
	margin: 0px;
	padding: 0px;
}

.line1 {
	width: 30%;
	height: 2px;
	background-color: #666;
	margin-bottom: 10px;
}

.button {
	font-size: 10px;
	cursor: pointer;
	outline: none;
	color: #fff;
	background-color: #4CAF50;
	border: none;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	height: 25px;
	width: 70px;
}

.button:hover {
	background-color: #3e8e41
}

.button:active {
	background-color: #3e8e41;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

input {
	margin-bottom: 10px;
}
<html>
  <header>
    <title>ManageMe</title>
  </header>
  <body>
    <h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font>
    <br />
    <!--DAY SECTION START-->
    <h2> Today 
      <span class= "june13">June 13</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus"></div>
      <br>
      <input id= "first" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
    <!--DAY SECTION START-->
    <h2> Tomorrow 
      <span class= "june13">June 14</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus1"></div>
      <br>
      <input id= "first1" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask1()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
  </body>
</html>

关于javascript - 当我添加更多 Material 时，我的内容不会超出一页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56536440/

24 4 0
文章推荐： javascript - 返回元素的渲染而不换行
文章推荐： javascript - 为什么边距的设置会在桌面和移动设备上产生两个不同的值？
文章推荐： c++ - 如何将 LPTSTR 转换为 LPCTSTR&
文章推荐： javascript - 在 Semantic-ui 中使用 'segment' 元素内的列
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com