javascript - 调整网络浏览器大小时如何防止调整 div 大小？

标签 javascript jquery html css

请帮我看看这段代码，如何在调整网页大小时防止 div 调整大小。

先生/妈妈对此代码有什么建议吗？

在此先感谢您的帮助。 抱歉我的英语不好 :D

/** to prevent inputing numbers in textbox enter your mobile number */
function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}/** to prevent inputing numbers in textbox enter your mobile number END */
/** For Checkbox */
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});});/** For Checkbox End*/ 
.plogo{
z-index:5;
position:absolute;
font-family: Georgia, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-style:italic;
font-size: 72px;
text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}

a {text-decoration: none;}
nav {
	width: 100%;
	height: 80px;
	background: rgb(2,189,138);
	position:absolute;
	z-index:4;
}



ul li {
	font: 13px Verdana, 'Lucida Grande';
	cursor: pointer;
	-webkit-transition: padding .05s linear;
	-moz-transition: padding .05s linear;
	-ms-transition: padding .05s linear;
	-o-transition: padding .05s linear;
	transition: padding .05s linear;
		font-weight:bold;
}
ul li.drop {
	position: relative;
}
ul > li {
	display: inline-block;
}
ul li a {
	color: #eee;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
ul li a:hover {
	color: #eee;
}

.dropOut .triangle {
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid white;
	top: -8px;
	left: 50%;
	margin-left: -8px;
}
.dropdownContain {
	width: 160px;
	position: absolute;
	z-index: 2;
	left: 50%;
	margin-left: -80px; /* half of width */
	top: -400px;
}
.dropOut {
	width: 160px;
	background: white;
	float: left;
	position: relative;
	margin-top: 0px;
	opacity: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.dropOut ul {
	float: left;
	padding: 10px 0;
}
.dropOut ul li {
	text-align: left;
	float: left;
	width: 125px;
	padding: 12px 0 10px 15px;
	margin: 0px 10px;
	color: #777;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: background .1s ease-out;
	-moz-transition: background .1s ease-out;
	-ms-transition: background .1s ease-out;
	-o-transition: background .1s ease-out;
	transition: background .1s ease-out;
}

.dropOut ul li:hover {
	background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

.wrapper {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100% auto;
  margin-top: -250px;
  overflow: visible;
}
.container {
  max-width: 600px;
  margin: 20px;
  padding: 80px 0;
  height: 100% auto;

}
.container h1 {
  font-size: 40px;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-put;
          transition-timing-function: ease-in-put;
  font-weight: 200;
}


.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

.cacc{
	z-index: 2;
	position:relative;
	height:10px;
	width:280px;
}
input[type='text']{
	font-size:18px;
	font-family:modern, tahoma;
}
/*---------- For username --------------------------------*/
input[type='text'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 10px 15px;
  display: block;
  font-size: 18px;
  color: #fff;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
    background-color: white;
  color: #53e3a6;
}
/*---------- For username End--------------------------------*/
input[type='password'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 10px 15px;
  display: block;
  font-size: 18px;
  color: #fff;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
    background-color: white;
  color: #53e3a6;}
  
  input[type='email'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 10px 15px;
  display: block;
  font-size: 18px;
  color: #fff;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
    background-color: white;
  color: #53e3a6;
  }
 .dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; }
 .cbox{ position:relative; z-index:2;}
 .logbutton {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: #fff;
  border: 0;
  padding: 10px 15px;
  color: #53e3a6;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
    position: relative;
  z-index: 2;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.logbutton:hover {
  background-color: #f5f7f9;
}
</head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<body style="background-color:#e8e8e8; margin:0px; padding:0px;">
<font class="plogo"> &nbspP . A . R . S</font>

<nav>			
		<ul>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
			<li><a href="#">Home</a></li> &nbsp&nbsp&nbsp
			<li><a href="plog.php">Log In</a></li>  &nbsp&nbsp&nbsp
			<li><a href="cacc.php">Create Account</a></li> 
			<li class="drop">
				<a href="#" style="	line-height: 80px; padding: 0 20px; height: 80px;">Advertisement</a>	
				<div class="dropdownContain">
					<div class="dropOut">
						<div class="triangle"></div>
						<ul>
							<li><a href="#" style="color:#777;">Job Hiring</a></li>
							<li><a href="#" style="color:#777;">Tourist Spot</a></li>
							<li><a href="#" style="color:#777;">Restaurant & Bar</a></li>
							<li><a href="#" style="color:#777;">Foods</a></li>
							<li><a href="#" style="color:#777;">Party Events</a></li>
						</ul>
					</div>
				</div>
			</li>
			<li><a href="#">About Us</a></li>
		</ul>
</nav>


    <div class="wrapper">
	<div class="container">
		<center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1>
		<?php
		
		?>
		<form action=""><font style="color:#fff; font-weight:bold; font-size:18px;">
			Choose your Username
			<input type="text" class="cacc" placeholder="Create Username" />
			Choose your Password
			<input type="text" class="cacc" placeholder="Create Password" />
			Your Email
			<input type="email" class="cacc" placeholder="Enter your email" />
			Your First Name
			<input type="text" class="cacc" placeholder="First name" />
			Your Last Name
			<input type="text" class="cacc" placeholder="Last name" />
			Your Mobie Number
			<input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" />
			Your Birthday<br />
			<select class="dlist">
				<option>Month</option>
				<option>123</option>
			</select>
			<select class="dlist">
				<option>Day</option>
			</select>
			<select class="dlist">
				<option>Year</option>
			</select><br />
			Your Gender<br />
			<select class="dlist">
				<option>Gender</option>
				<option>Male</option>
				<option>Female</option>
			</select><br />
			<input type="checkbox" class="cbox" id="accept" required />
			<br />
			<input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" />

		</font></form>
	</center></div>
	

</body>

请帮我看看这段代码，如何在调整网页大小时防止 div 调整大小。

先生/妈妈对此代码有什么建议吗？

在此先感谢您的帮助。 抱歉我的英语不好 :D

最佳答案

将 min-width CSS 属性添加到您不想调整到低于首选宽度的元素:

.YOUR_DIV_CLASS {
    min-width: 500px; // Or any other width you prefer.
}

或者使用width 属性并在px 中定义宽度，使div 具有静态宽度。

关于javascript - 调整网络浏览器大小时如何防止调整 div 大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33593557/

上一篇：jquery - 如何用信息叠加图像？

下一篇：html - 折叠时的 Bootstrap 3 导航/列表更改图标

相关文章：

javascript - 在 svg 图像上添加图层

javascript - 国家 map 上的 D3js 工具提示不会出现

JavaScript - 如何访问对象数组中的特定值

javascript - 使用 Babel 和 Rollup 转译 startsWith() 时出现问题

javascript - 如何通过单击自动生成列表的链接来设置变量？

php - .load 不起作用，我想我的概念错了？

php - 随机排列图像数组

javascript - 如何防止图像相互重叠

javascript - 具有弹跳效果的 slideToggle 不起作用

jquery - 单击按钮后在跨度文本中插入模型字符串

©2024 IT工具网  联系我们