Welcome to

爱上分享

Home / 未分类 / 千峰实训

千峰实训

Day01

小米官网登陆界面

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米账号 - 登录</title>
		<!-- rel设置标签属性 -->
		<link rel="shortcut icon" href="img/favicon.ico" />
	</head>
	<!-- 导入css样式 -->
	<link rel="stylesheet" type="text/css" href="css/milogin.css"/>
	<body>
		<!-- div标签划分容器 -->
		<div class="logo_div">
			<div class="div_head">
				<a href="https://www.mi.com/index.html">
					<img src="img/mistore_logo.png" >
				</a>
			</div>
		</div>
		
		<!-- 登陆部分 -->
		<!-- id选择器 -->
		<div id="content_div">
			<div class="div_content">
				<!-- 登陆白色模块 -->
				<div class="login_div">
					<!-- 登录切换容器 -->
					<div class="login_w">
						<div class="login_w">
							<!-- 内嵌css样式 -->
							<a href="#" style="color: #f56600;">帐号登录</a>
							<span class="line">|</span>
							<a href="#">扫码登录</a>
						</div>
					</div>
					<!-- 具体登录详情 -->
					<!-- 类型选择器,可以拥有两个以上的名字,用空格分隔 -->
					<div class="type_one type">
						<!-- form表单提交 -->
						<form id="form_one">
							<input id="username_one" placeholder="邮箱/手机号码/小米ID" />
							<br />
							<input type="password" id="password_one" placeholder="密码" />
						</form>
						<!-- 警告提示 -->
						<div id="err_tip">
							<!-- 图标 -->
							<span id="err_img">
								!
							</span>
							<span id="err_text">
								请输入账号0
							</span>
						</div>
						<!-- 登录按钮 -->
						<div id="button">
							登录
						</div>
					</div>
					<div class="type_two type"></div>
					<div class="type_three type"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/milogin.js" type="text/javascript" charset="utf-8"></script>
</html>

milogin.css

/* 设计网页样式的文件 */

*{
	/* margin外边距 */
	margin: 0px;
	/* padding外边距 */
	padding: 0px;
}
/* css选择器 */
/* 类选择器 */
.logo_div{
	width: 100%;
	height: 98px;
	/* 容器背景颜色 */
	background: #fff;
}

/* 派生选择器,针对路径选择,精准扶贫 */
.logo_div .div_head{
	width: 1130px;
	height: 98px;
	background: #fff;
	/* 容器居中属性 上下为0px 左右auto自适应 */
	margin: 0px auto;
}
/* id选择器 */
#content_div{
	width: 100%;
	height: 588px;
	/* 引入图片背景 */
	background: url(../img/aece569d6689b4c461bb53efd9eea9c7.jpg) no-repeat;
	/* 设置背景居中 */
	/* background: no-repeat; */
	background-position: center;
	
}

#content_div .div_content{
	width: 1130px;
	height: 588px;
/* 	background-color: aqua; */	
	margin: 0px auto;
/* 	border: 1px solid red; */
	/* 相对布局,添加之后内部容器设置位置都相对当前而言 */
	position: relative;
}

.login_div{
	width: 410px;
	background-color: #fff;
	/* 设置绝对布局 */
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.login_w{
	width: 410px;
	height: 82px;
/* 	background-color: aquamarine;
 */}

.type{
	width: 410px;
	height: 475px;
/* 	border: 1px solid red;
 */	/* 容器隐藏 */
	display: none;	
}

.type_one{
	/* 容器显示 */
	display: block;
	background-color: #fff;
}
.type_two{
	/* 容器显示 */
	display: none;
	background-color: darkblue;
}
.type_three{
	/* 容器显示 */
	display: none;
	background-color: darkslategrey;
}
/* 标签选择器 */
img{
	width: auto;
	height: auto;
}

.login_w a{
	/* 取消超连接默认样式 */
	text-decoration: none;
	color: #666;
	font-size: 24px;
}
.login_w{
	/* 设置内部元素内容居中 */
	text-align: center;
	/* 设置内容垂直居中 */
	line-height: 87px;
}


.login_w .line{
	font-size: 30px;
	color: #e0e0e0;
	/* 设置左右边距 */
	margin-left: 30px;
	margin-right: 30px;
}

/* 鼠标悬浮触发样式 */
.login_w a:hover{
	color: #f56600;
}

body{
	cursor: url(../img/yinxian.png), default;
}
a,img:hover{
	cursor: url(../img/huaji.png),default;
}

.type_one #form_one input{
	width: 326px;
	height: 48px;
	/* 取消输入框默认显示的样式 */
	outline: none;
	/* 输入框设置 */
	border: 1px solid #e0e0e0;
	margin-bottom: 10px;
	/* 内边距 */
	padding-left: 10px;
	padding-right: 10px;
	/* 边框圆角 */
	/* border-radius: 24px; */
}

/* 设置标题居中 */
.type_one #form_one{
	margin-left: 31px;
	margin-right: 31px;
}

#err_tip{
	width: 348px;
	height: 22px;
	/* border: 1px solid red; */
	margin: 0px 31px;
	display: none;
	
}
/* span行内元素不支持宽高设置,div是块元素支持宽高设置  */
#err_tip #err_img{
	width: 16px;
	height: 16px;
	background: #f36206;
	color: white;
	/* 行内元素转换为块元素 */
	/* inline-block既块元素又不换行 */
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	font-size: 12px;
}

#err_tip #err_text{
	color: #F36206;
}

#button{
	width: 348px;
	height: 50px;
	background: #F36206;
	margin: 0px 31px;
	color:#fff;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
	font-weight: bolder;
	margin-top: 10px;
}
<link></link>
	<!-- 这两段代码作用相同 -->
<link />

milogin.js

//点击事件
$("#button").click(function(){
	//检测用户是否登录
	if(username_one.value.length == 0){
		//通过代码修改css样式
		$('#username_one').css('border','1px solid #f36206')
		//更改提示警告显示
		$('#err_tip').show()
		//修改网页文字
		$('#err_text').html('请输入账号')
		//返回当前操作,停止运行
		return false;
	}
	if(username_one.value.length != 0&&password_one.value.length == 0){
		//通过代码修改css样式
		$('#password_one').css('border','1px solid #f36206')
		//更改提示警告显示
		$('#err_tip').show()
		//修改网页文字
		$('#err_text').html('请输入密码')
		//返回当前操作,停止运行
		return false;
	}
	if(username_one.value.length != 0&&password_one.value.length != 0){
		//通过代码修改css样式
		$('#password_one').css('border','1px solid #e0e0e0')
		$('#username_one').css('border','1px solid #e0e0e0')
		//更改提示警告显示
		$('#err_tip').css('display','none')
		//修改网页文字
		$('#err_text').html('请输入密码')
		//返回当前操作,停止运行
		return false;
	}
	
})

Day02

发表评论

电子邮件地址不会被公开。 必填项已用*标注

To get the latest update of me and my works

>> <<