<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>唯品会网站登录</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" href="./images/3.png">
</head>
<body>
<!--主体的背景颜色-->
<div class="bgcr"></div>
<!--版心-->
<div class="type-area ">
<!--头部开始-->
<div class="header">
<div class="header-left fl"></div>
<div class="header-right fr"></div>
<!--<div class="clear"></div>
<div style="width:200px;height:200px;background:lime;"></div>-->
</div>
<!--头部结束-->
<!--主体开始-->
<div class="main">
<!--登录框-->
<div class="login fr">
<!--登录框上部分-->
<div class="login-top">
<!--可以使用font属性设置字体的大小，粗细，字体-->
<div id="login_left" class="login-top-left fl login-top-unify" onclick="cut2(this)"><h2>扫码登录</h2></div>
<div id="login_right" onclick="cut(this)" class="login-top-right fr login-top-unify"><h2>账户登录</h2></div>
</div>
<!--登陆框中间-->
<div id="big" class="login-main-big">
<div class="login-main">
<div class="login-main-border">
<img width="150" height="150" src="./images/y.jpg" alt="" />
</div>
</div>
<!--文字-->
<div class="login-main-txt tc"><span></span>打开<font color="#F10180">唯品会APP-个人中心</font>，扫一扫登录</div>
</div>
<!--登陆框的输入部分-->
<div id="login_form" class="login-main-form">
<div class="login-main-typearea">
<div class="login-user tc">
<span></span><input type="text" name="username" placeholder="手机号/用户名/邮箱"/>
</div>
<div class="login-user-hint"></div>
<div class="login-pwd tc">
<span></span><input type="password" name="pwd" placeholder="密码"/>
</div>
<div class="login-pwd-hint"></div>
<div class="login-forget">
</div>
<div class="login-forget-hint"></div>
<div class="login-submit">
<button>登录</button>
</div>
</div>
</div>
</div>
</div>
<!--主体结束-->
<!--尾部开始-->
<div class="footer tc">Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329</div>
<!--尾部结束-->
</div>
</body>
<script>
let login = document.getElementById('big');
let login_form = document.getElementById('login_form');
let login_left = document.getElementById('login_left');
let login_right = document.getElementById('login_right');
function cut(obj){
login.style.display = 'none';
login_form.style.display = 'block';
obj.style.color = '#f10180';
login_left.style.color = '#666666';
}
function cut2(obj){
login.style.display = 'block';
login_form.style.display = 'none';
obj.style.color = '#f10180';
login_right.style.color = '#666666';
}
</script>
</html>
用js做个简单的网页
5星 · 超过95%的资源 需积分: 48 139 浏览量
2018-09-30
13:17:11
上传
评论 6
收藏 117KB RAR 举报 
cx_r_5.rar （8个子文件） 
cx_r_5 css 
style.css 5KB images 
3.jpg 66KB y.jpg 11KB
2.png 44KB 3.png 564B
index.html 3KB .project 661B demo.html 2KB资源评论
LauraKuang2023-07-28这个文件提供了一个很好的起点，让我可以通过学习和自定义来创建更丰富的网页。
乔木Leo2023-07-28这个文件很棒，能够用简单的代码实现一个功能完善的网页。
坐在地心看宇宙2023-07-28这个文件虽然简单，但它展示了用Javascript创建网页的基本原理和技巧。
FloritaScarlett2023-07-28这个文件的示例代码很清晰易懂，即使对编程不太熟悉的人也能轻松上手。
Friday永不为奴2023-07-28这是一个非常实用的文件，帮助我迅速建立一个简单但有吸引力的网页。
