WEB阶段_CSSJS篇（附代码笔记）

（一）、使用DIV+CSS布局首页

1、HTML的块标记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		
		<span>span1</span>
		<span>span2</span>
	</body>
</html>

2、CSS的入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{
				color:blue;
				font-size: 40px;
			}
		</style>

		
	</head>
	<body>
		<h1>标题1</h1>
		<h1 style="color:red;font-size: 300px;">标题2</h1>
	</body>
</html>

3、CSS的引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<h1>标题3</h1>
	</body>
</html>

4、CSS的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border:1px solid blue;
				width:40px;
				height:45px;
			}
			
			#d1{
				border:2px solid red;
			}
			
			.divClass{
				border:2px solid yellow;
			}
		</style>
	</head>
	<body>
		<div id="d1">DIV1</div><br />
		<div>DIV2</div><br />
		<div class="divClass">DIV3</div><br />
		<div class="divClass">DIV4</div><br />
		<div>DIV5</div><br />
	</body>
</html>

5、CSS的浮动

在浮动的div外套一个设置死宽度和高度的div，就可以让他和别的div分割，但是在这个设置死宽度的div内，其他的div子元素还是要清除浮动才可以！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.divClass{
				border:1px solid blue;
				width:200px;
				height:220px;
			}
			.divClass1{
				border:2px solid red;
				width:200px;
				height:220px;
			}
			
			#d1{
				float:left;
			}
			#d2{
				float:left;
			}
			#d3{
				float:right;
			}
			.clear{
				clear:both;
			}
			#d4{
				float:left;
			}
			
		</style>
	</head>
	<body>
		<div id="d1" class="divClass">DIV1</div>
		<div id="d2" class="divClass">DIV2</div>
		<div id="d3" class="divClass">DIV3</div>
		<div class="clear">清除浮动，从这</div>
		<div style="width: 1400px;height: 500px; border: 5px solid yellow ;">
			<div id="d4" class="divClass" style="width: 500px;height: 500px;">DIV4</div>
			<div class="divClass1" style="width: 500px;height: 500px;">div5</div>
		</div>
		
	<!--<div class="clear">清除浮动，从这</div>-->
		<div class="divClass1" style="width: 500px;height: 500px;">div5</div>
		<!--<div id="d4" class="divClass">div6</div>-->
	</body>
</html>

6、CSS的其他选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type="text"]{
				background-color: red;
			}
			
			
			
			/*h1 strong{
				color:red;
			}*/
			
			h1 > strong{
			   color:red;
			}

			
			
		</style>
	</head>
	<body>
		<form>
			<input type="text" name="username"><br/>   <!--被选中的选择器-->
			<input type="password" name="password"><br/>
		</form>
		
		<hr/>
		
		<em>em是斜体</em>
		
		<h1>
			This is <strong>very</strong> <strong>very</strong> important.
		</h1>
		
		<h1>This is 
			<strong>very</strong>
			<strong>very红</strong>
			<em>really 
				<strong>very</strong>
			</em> 
				important.
		</h1>
		
		
		<div style="border: 1px solid blue;" width="500px">你好</div>
		
		
	</body>
</html>

7、综合：案例一：网站首页的DIV+CSS的布局

【注意】：要设置清除浮动，否则下个div就会到上个div（有设置浮动）的位置。不然就在浮动的div外套一个设置死宽度和高度的div，就可以让他和别的div分割，但是在这个设置死宽度的div内，其他的div子元素还是要清除浮动才可以！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#bodyDiv{
				border:1px solid blue;
				width:100%;
			}
			
			.logoDiv{
				border:1px solid lightpink;
				width:33%;
				float:left;
				height:50px;
			}
			
			.clear{
				clear:both;
			}
			
			#menuDiv{
				width:100%;
				height:50px;
				border:1px solid yellow;
				background-color: black;
			}
			
			#menuDiv a{
				font-size: 17px;
				color: white;
			}
			
			#imgDiv{
				width:100%;
				border:1px solid blue;
			}
			
			
			.productClass{
				width:100%;
				border:1px solid yellow;
			}
			.contentClass{
				width:100%;
				border:1px solid red;
			}
			.contentClass font{
				font-size: 30px;
				color: black;
				
			}
		</style>
	</head>
	<body>
		<!-- 整体的DIV -->
		<div id="bodyDiv">
			<!-- logo的DIV -->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="48">
				</div>
				<div class="logoDiv">
					<img src="../img/header.png" height="48">
				</div>
				<div class="logoDiv">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">购物车</a>
				</div>
				
			</div>	
			<!--logodiv全部向左浮动后清除浮动，便于往后的div的正常运行-->
			<div class="clear"></div>
			
			<!-- 导航栏Menu的DIV -->
			<div id="menuDiv">
				<a href="">首页</a>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</div>	
			
				
			<!-- 导航栏下方图片滚动的DIV -->
			<div id="imgDiv">
				<img src="../img/1.jpg" width="100%">
			</div>	
			
			<!-- 热门商品的DIV -->
			<div class="productClass">
				<!-- 文字+图片部分的DIV -->
				<div class="contentClass">
					<font>热门商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV ，先分出两个div往左浮动，这样就分成了两列-->
				<div style="width:100%;border:1px solid yellow;">
					<!--第一列为手机占两行那个-->
					<div style="width:15%;height: 460px;border:1px solid yellow;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					<!--然后将第二列的分成两行，搞两个不设置浮动的div即可，-->
					<div style="width:84%;height: 460px;border:1px solid yellow;float:left;">
						<div >
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<!--<div class="logoDiv"></div>-->
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			
			<!--热门商品下方的 广告的DIV -->
			<div style="width:100%;border:1px solid blue;">
				 <img src="../img/ad.jpg" width="100%" height="80">
			</div>	
			
			<!-- 最新商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>最新商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 页脚的DIV -->
			<div  style="width:100%;border:1px solid blue;">
				<img src="../img/footer.jpg" width="100%">
			</div>	
			<!-- 友情链接及版权的DIV -->
			<div style="width:100%;border:1px solid blue;">
				<center>
					

    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>

Copyright © 2008-2030 老韩商城 版权所有 
				</center>
			</div>	
		</div>
	</body>
</html>

（二）、使用DIV+CSS布局注册页面

1、综合：案例二：使用DIV+CSS布局注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			div{
				border:1px solid blue;
			}
			
			#bodyDiv{
				width: 100%;
			}
			
			#bodyDiv > div{
				width: 100%;
			}
			
			.logoDiv{
				width: 33%;
				height: 50px;
				float: left;
			}
			
			.clear{
				clear: both;
			}
			
			ul li{
				display: inline;
				color: white;
			}
			
			#bodyDiv a:link{   /*起初效果*/
				color: yellow;
			}
			#bodyDiv a:visited{  /*访问过后效果*/
				color: red;
			}
			#bodyDiv a:hover{   /*鼠标移动到链接时效果*/
				color: greenyellow;
				font-size: 20px;
			}
			#bodyDiv a:active{  /*鼠标摁住链接时效果*/
				color: black;
				font-size: 50px;
			}
	
		</style>
		
	</head>
	<body>
		<!--整体div-->
		<div id="bodyDiv">
			<!--第一行-->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="100%"/>
				</div>
				<div class="logoDiv">
					<img src="../img/header.jpg" height="100%"/>
				</div>
				<div class="logoDiv" style="height:35px; padding-top: 15px;" >
					<a href="#">登录1</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
				<div class="clear"></div>  <!-- 未设置浮动时，若宽度设置的好，虽然文字和图片不能代替之前的位置，但是背景颜色可以，所以保险起见还是要设置-->
			</div>
			<!--第二行-->
			<div style="height: 50px;background: lightskyblue; color: red; font-size:20px ;display: block; ">
				<ul>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</div>
			<!--第三行-->
			<div style="height: 420px;background-image: url(../img/regist_bg.jpg)">
				<div style="border: 5px solid gray;background-color: white; position:absolute; left:450px;top: 150px;width: 600px ;">
					<form>
						<table border="0" cellpadding="10">
							<tr>
								<td>用户名</td>
								<td><input type="text" name="username"></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input type="password" name="password"></td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td><input type="password" name="repassword"></td>
							</tr>
							<tr>
								<td>性别</td>
								<td><input type="radio" name="sex" value="男" checked="checked">男
									<input type="radio" name="sex" value="女">女</td>
								
							</tr>
							<tr>
								<td>籍贯</td>
								<td>
									<select name="province">
										<option>--请选择--</option>
										<option value="广东" selected="selected">广东</option>
										<option value="广西">广西</option>
										<option value="云南">云南</option>
									</select>
									<select name="city">
										<option>--请选择--</option>
										<option value="广东">广东</option>
										<option value="广西" selected="selected">广西</option>
										<option value="云南">云南</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>爱好</td>
								<td>
									<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
									<input type="checkbox" name="hobby" value="足球">足球
									<input type="checkbox" name="hobby" value="排球">排球
									<input type="checkbox" name="hobby" value="羽毛球">羽毛球
									<input type="checkbox" name="hobby" value="蛋球" checked="checked">蛋球
								</td>
							</tr>
							<tr>
								<td>邮箱</td>
								<td><input type="text" name="email"></td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="注册"></td>
							</tr>
							
						</table>
					</form>
				</div>
			</div>
			<!--第四行-->
			<div>
				<img src="../img/ad.jpg" width="100%" height="80px"/>
			</div>
			
			
			
		</div>
	</body>
</html>

（三）、使用JS完成注册页面的简单校验

1、首页index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#bodyDiv{
				border:1px solid blue;
				width:100%;
			}
			
			.logoDiv{
				border:1px solid lightpink;
				width:33%;
				float:left;
				height:50px;
			}
			
			.clear{
				clear:both;
			}
			
			#menuDiv{
				width:100%;
				height:50px;
				border:1px solid yellow;
				background-color: black;
			}
			
			#menuDiv a{
				font-size: 17px;
				color: white;
			}
			
			#imgDiv{
				width:100%;
				border:1px solid blue;
			}
			
			
			.productClass{
				width:100%;
				border:1px solid yellow;
			}
			.contentClass{
				width:100%;
				border:1px solid red;
			}
			.contentClass font{
				font-size: 30px;
				color: black;
				
			}
		</style>
	</head>
	<body>
		<!-- 整体的DIV -->
		<div id="bodyDiv">
			<!-- logo的DIV -->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="48">
				</div>
				<div class="logoDiv">
					<img src="../img/header.png" height="48">
				</div>
				<div class="logoDiv">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">购物车</a>
				</div>
				
			</div>	
			<!--logodiv全部向左浮动后清除浮动，便于往后的div的正常运行-->
			<div class="clear"></div>
			
			<!-- 导航栏Menu的DIV -->
			<div id="menuDiv">
				<a href="">首页</a>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</div>	
			
				
			<!-- 导航栏下方图片滚动的DIV -->
			<div id="imgDiv">
				<img src="../img/1.jpg" width="100%">
			</div>	
			
			<!-- 热门商品的DIV -->
			<div class="productClass">
				<!-- 文字+图片部分的DIV -->
				<div class="contentClass">
					<font>热门商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV ，先分出两个div往左浮动，这样就分成了两列-->
				<div style="width:100%;border:1px solid yellow;">
					<!--第一列为手机占两行那个-->
					<div style="width:15%;height: 460px;border:1px solid yellow;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					<!--然后将第二列的分成两行，搞两个不设置浮动的div即可，-->
					<div style="width:84%;height: 460px;border:1px solid yellow;float:left;">
						<div >
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<!--<div class="logoDiv"></div>-->
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			
			<!--热门商品下方的 广告的DIV -->
			<div style="width:100%;border:1px solid blue;">
				 <img src="../img/ad.jpg" width="100%" height="80">
			</div>	
			
			<!-- 最新商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>最新商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 页脚的DIV -->
			<div  style="width:100%;border:1px solid blue;">
				<img src="../img/footer.jpg" width="100%">
			</div>	
			<!-- 友情链接及版权的DIV -->
			<div style="width:100%;border:1px solid blue;">
				<center>
					

    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>

Copyright © 2008-2030 老韩商城 版权所有 
				</center>
			</div>	
		</div>
	</body>
</html>

2、综合：案例三：使用JS完成注册页面的简单校验

 JS：另存为js文件，，那么不需要<Script></Script>,若在HTML文件中写JS代码，那么要在此标签内完成

//	alert("hello")
		function checkForm(){
			//获得文本框的值，通过标签的id	
			var username = document.getElementById("username").value;
	//				var val = username.value; //获得文本框的值，通过value是该标签的值，用链式表达式如上
	//				alert(username);
			if(username == ""){
				alert("用户名不能为空");
				return false;//表示form表单那里提交不了
			}
			
			// 校验密码：
			var password = document.getElementById("password").value;
			if(password == ""){
				alert("密码不能为空");
				return false;
			}
			
			// 校验确认密码:
			var repassword = document.getElementById("repassword").value;
			if(repassword != password){
				alert("两次密码输入不一致！");
				return false;
			}
			
			// 校验邮箱:
			var email = document.getElementById("email").value;
			// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
			// str.match("正则表达式");  正则.test("字符串");
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){   //day08截图有解释，//表示开始和结束（作为字符串形式），^表示字符串开始位置，匹配字母数字_-任意个，匹配@符号....
				alert("邮箱格式不正确！");
				return false;
			}
			
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			div{
				border:1px solid blue;
			}
			
			#bodyDiv{
				width: 100%;
			}
			
			#bodyDiv > div{
				width: 100%;
			}
			
			.logoDiv{
				width: 33%;
				height: 50px;
				float: left;
			}
			
			.clear{
				clear: both;
			}
			
			ul li{
				display: inline;
				color: white;
			}
			
			#bodyDiv a:link{   /*起初效果*/
				color: yellow;
			}
			#bodyDiv a:visited{  /*访问过后效果*/
				color: red;
			}
			#bodyDiv a:hover{   /*鼠标移动到链接时效果*/
				color: greenyellow;
				font-size: 20px;
			}
			#bodyDiv a:active{  /*鼠标摁住链接时效果*/
				color: black;
				font-size: 50px;
			}
		</style>
		
		<script src="../js/check.js"></script>
		
	</head>
		
	
	<body>
	
		
		<!--整体div-->
		<div id="bodyDiv">
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="100%"/>
				</div>
				<div class="logoDiv">
					<img src="../img/header.jpg" height="100%"/>
				</div>
				<div class="logoDiv" style="height:35px; padding-top: 15px;" >
					<a href="#">登录1</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
				<div class="clear"></div>  <!-- 未设置浮动时，若宽度设置的好，虽然文字和图片不能代替之前的位置，但是背景颜色可以，所以保险起见还是要设置-->
			</div>
			
			<div style="height: 50px;background: lightskyblue; color: red; font-size:20px ;display: block; ">
				<ul>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</div>
			
			<div style="height: 420px;background-image: url(../img/regist_bg.jpg)">
				<div style="border: 5px solid gray;background-color: white; position:absolute; left:450px;top: 150px;width: 600px ;">
					<form action="index.html" method="get" onsubmit="return checkForm()">
						<table border="0" cellpadding="10">
							<tr>
								<td>用户名</td>
								<td><input type="text" id="username" name="username"></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input type="password" id="password" name="password"></td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td><input type="password" id="repassword" name="repassword"></td>
							</tr>
							<tr>
								<td>性别</td>
								<td><input type="radio" name="sex" value="男" checked="checked">男
									<input type="radio" name="sex" value="女">女</td>
								
							</tr>
							<tr>
								<td>籍贯</td>
								<td>
									<select name="province">
										<option>--请选择--</option>
										<option value="广东" selected="selected">广东</option>
										<option value="广西">广西</option>
										<option value="云南">云南</option>
									</select>
									<select name="city">
										<option>--请选择--</option>
										<option value="广东">广东</option>
										<option value="广西" selected="selected">广西</option>
										<option value="云南">云南</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>爱好</td>
								<td>
									<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
									<input type="checkbox" name="hobby" value="足球">足球
									<input type="checkbox" name="hobby" value="排球">排球
									<input type="checkbox" name="hobby" value="羽毛球">羽毛球
									<input type="checkbox" name="hobby" value="蛋球" checked="checked">蛋球
								</td>
							</tr>
							<tr>
								<td>邮箱</td>
								<td><input type="text" id="email" name="email"></td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="注册"></td>
							</tr>
							
						</table>
					</form>
				</div>
			</div>
			
			<div>
				<img src="../img/ad.jpg" width="100%" height="80px"/>
			</div>
			
			
			
		</div>
		
		
		
	</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/41519.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

青岛大学_王卓老师【数据结构与算法】Week05_06_栈的顺序表示_学习笔记

青岛大学_王卓老师【数据结构与算法】Week05_06_栈的顺序表示_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…
阅读更多...
No.2(3)——双指针算法实现平方数组排序

No.2(3)——双指针算法实现平方数组排序

双指针算法指的是&#xff0c;从数组的两侧开辟指针变量进行查找&#xff0c;这类问题往往通过暴力&#xff08;双循环&#xff09;可以解出&#xff0c;而采用双指针相当于用空间换取时间&#xff0c;省略双层循环中重复的部分。 对于一个含有负数的有序数组&#xff0c;要求保…
阅读更多...
一本通1910：【00NOIP普及组】计算器的改良题解

一本通1910：【00NOIP普及组】计算器的改良题解

今天是编程集训的第二天&#xff0c;也是我来到CSDN整整1年。感谢所有阅读过我的文章的人&#xff0c;谢谢。 今天的比赛难度略低于昨天&#xff0c;但这道题也卡了我好久。 进入正题 题目&#xff1a; 题目描述&#xff1a; NCL是一家专门从事计算器改良与升级的实验室&a…
阅读更多...
项目名称:智能家居边缘网关项目

项目名称:智能家居边缘网关项目

一&#xff0c;项目介绍 软件环境: C语言 硬件环境: STM32G030C8TX单片机开发板 开发工具: Linux平台GCC交叉编译环境以及ukeil (1)边缘网关概念 边缘网关是部署在网络边缘侧的网关&#xff0c;通过网络联接、协议转换等功能联接物理和数字世界&#xff0c;提供轻量化的联接管…
阅读更多...
C#基础--进程和线程的认识

C#基础--进程和线程的认识

C#基础–进程和线程的认识 一、基础概念 1. 什么是进程&#xff1f; 进程并不是物理的东西&#xff0c;是虚拟出来的&#xff0c;是一种概念。当一个程序开始运行时&#xff0c;它就是一个进程&#xff0c;进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又…
阅读更多...
小白入门C#编写MVC登录小案例

小白入门C#编写MVC登录小案例

一、C#编写MVC登录小案例 &#x1f680;1. 新建MVC项目。 &#x1f680;2. 在Models文件夹下创建一个User类&#xff0c;包含登录所需要的用户名和密码属性。 namespace MvcLogin.Models {public class User{public string UserName{get; set;}public string Password{get;se…
阅读更多...
unity01 界面布局

unity01 界面布局

布局 坐标系 遵循左手定则&#xff0c;中指是y轴、食指是x轴、大拇指是z轴。 可以理解为x轴代表东西方向&#xff0c;z轴代表南北方向&#xff0c;y轴代表上下方向。 常用快捷键 鼠标中键&#xff1a;移动地图 右键&#xff1a;移动视角 shift鼠标左键单击gimo导航器的小方…
阅读更多...
【C++】设计模式-单例模式

【C++】设计模式-单例模式

目录 一、单例模式 单例模式的三个要点 针对上述三要点的解决方案 常用的两类单例模式 二、懒汉模式实现 1.基本实现 2.锁静态成员析构单例 3.双层检查锁定优化 4.双层检查锁定智能指针 三、饿汉模式实现 1.基础实现 2.嵌套内部类解决内存泄漏 3.智能指针解决内存泄…
阅读更多...
linux 系统修改已经打好jar包的yml配置文件

linux 系统修改已经打好jar包的yml配置文件

工作中可能回遇到&#xff0c;jar包已经打好&#xff0c;并且文件已经上传了&#xff0c;但是突然发现配置文件中的某一个参数写错了&#xff0c;怎么办&#xff1f;重新打包&#xff1f;如果重新打包再上传的话太影响效率了。那么我们可以通过以下方法&#xff0c;修改已经上传…
阅读更多...
SuperMap iServer新增支持FlatGeobuf数据格式，查询渲染性能提升2-3倍

SuperMap iServer新增支持FlatGeobuf数据格式，查询渲染性能提升2-3倍

导语 FlatGeobuf是一种地理数据存储格式&#xff0c;采用了二进制编码&#xff0c;相比其他文本或XML格式更高效&#xff0c;可以显著减小文件大小&#xff0c;这使得数据的传输和存储更加快速和高效。 SuperMap iServer 11i(2023) &#xff08;以下简称SuperMap iServer11.1&a…
阅读更多...
Pandas Groupby：在Python中汇总、聚合和分组数据

Pandas Groupby：在Python中汇总、聚合和分组数据

GroupBy是一个非常简单的概念。我们可以创建一个类别分组&#xff0c;并对这些类别应用一个函数。这是一个简单的概念&#xff0c;但它是一种在数据科学中广泛使用的非常有价值的技术。在真实的的数据科学项目中&#xff0c;您将处理大量数据并一遍又一遍地尝试&#xff0c;因此…
阅读更多...
elementUI el-radio 无法点击的问题

elementUI el-radio 无法点击的问题

<el-form-item label"B端客户类型" prop"user_type"><template slot"label"><span>B端客户类型</span><el-tooltip effect"dark" placement"top" content"B端大客户账期有效,只有设置该类型…
阅读更多...
【Go】实现一个代理Kerberos环境部分组件控制台的Web服务

【Go】实现一个代理Kerberos环境部分组件控制台的Web服务

实现一个代理Kerberos环境部分组件控制台的Web服务 背景安全措施引入的问题SSO单点登录 过程整体设计路由反向代理登录会话组件代理YarnHbase 结果 背景 首先要说明下我们目前有部分集群的环境使用的是HDP-3.1.5.0的大数据集群&#xff0c;除了集成了一些自定义的服务以外&…
阅读更多...
寻找下一个生成式 AI 独角兽，亚马逊云科技创业加速器火热招募中!

寻找下一个生成式 AI 独角兽，亚马逊云科技创业加速器火热招募中!

生成式AI让人工智能技术又一次破圈&#xff0c;带来了机器学习被大规模采用的历史转折点。它正在掀起新一轮的科技革命&#xff0c;为人类带来前所未有的颠覆性的影响&#xff0c;而诸多创业者也应势而上&#xff0c;寻求创新机遇。生成式AI可以创造全新的客户体验、提高企业内…
阅读更多...
fastapi初使用，构建自己的api

fastapi初使用，构建自己的api

文章目录 1、安装2、api实现2.1、 app.get("/1")2.2、app.get("/{a}")2.3、app.get("/{a}{b}")2.4、函数和api分离 3、运行 原文链接&#xff1a;https://wangguo.site/posts/d98bb3c9.html fastapi 是一个基于 Python 的 API 构建框架&#xff…
阅读更多...
044、TiDB特性_PlacementPolicy

044、TiDB特性_PlacementPolicy

Placement Rules in SQL之前 跨地域部署的集群&#xff0c;无法本地访问无法根据业务隔离资源难以按照业务登记配置资源和副本数 Placement Rules in SQL之后 跨地域部署的集群&#xff0c;支持本地访问根据业务隔离资源按照业务等级配置资源和副本数 配置 labels 设置 Ti…
阅读更多...
Windows Cluster 分布式算法

Windows Cluster 分布式算法

在分布式系统中&#xff0c;都需要解决分布式一致性问题。那么&#xff0c;在Windows 集群中&#xff0c;使用了什么算法来保证集群的一致性呢——Paxos。Windows Server 故障转移集群 (WSFC) 使用 Paxos 算法在整个系统中同步更改。通过记录 Paxos Tag 值并保留历史记录&#…
阅读更多...
vue 如何发布并部署到服务器

vue 如何发布并部署到服务器

一般情况npm run build即可 从而生成vue代码直接放到服务器即可 这里的具体情况要看package.json里面的配置从而使用命令 会生成dist就是该项目的发布包
阅读更多...
Inno Setup打包winform、wpf程序可判断VC++和.net环境

Inno Setup打包winform、wpf程序可判断VC++和.net环境

Inno Setup打包winform、wpf程序可判断VC和.net环境 1、下载Inno Setup2、新建打包文件、开始打包1、新建打包文件2、填写 应用名称、版本号、公司名称、公司官网3、选择安装路径 Custom是指定默认路径、Program Files folder是默认C盘根目录4、选择程序启动exe文件 以及Addfol…
阅读更多...
Ubuntu下安装、配置及重装CUDA教程

Ubuntu下安装、配置及重装CUDA教程

安装CUDA 前往Nvidia CUDA Tools官网选择对应的架构和版本下载CUDA 以如下架构和版本为例&#xff1a; 查看显卡驱动 nvidia-smi如果显卡驱动已经装了&#xff0c;那么在CUDA安装过程中不用再勾选安装driver 下载并安装CUDA wget https://developer.download.nvidia.co…
阅读更多...
最新文章

Copyright @ 2022~2023