千峰实训
- 作者: fuhailong1998
- 日期:
- 分类: Java
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
辽公网安备 21132102000026号
发表评论