HTML静态网页（html，css，js）

最新推荐文章于 2023-03-11 21:23:20 发布

「已注销」

最新推荐文章于 2023-03-11 21:23:20 发布

阅读量280

点赞数 1

文章标签： java html 开发语言 virtualenv django

本文链接：https://blog.csdn.net/webwb/article/details/125477284

版权

效果：

HTML:

<!DOCTYPE html>
<html lang="en">

<body>
<div id="head">
<ul>
<li><a>首页</a></li>
<li><a>博客</a></li>
<li><a>程序员学院</a></li>
<li><a>论坛</a></li>
<li><a>问答</a></li>
<li><a>代码</a></li>
<li><a>高校</a></li>
<li><a href="https://www.csdn.net/" target="blank">CSDN</a></li>
<li><a href="https://www.cnblogs.com/" target="blank">博客园</a></li>
<li><a>登录/注册</a></li>
<li><a>会员中心</a></li>
</ul>
</div>
<div
style="background-image: url(download.jfif); background-size:100% 100%;margin-left: auto;margin-right: auto;width: 100%;height: 635px;">
<section id="content">
<div class="header">
<a href="javascript:;" class="current">我要登录</a>
<a href="javascript:;">我要注册</a>
</div>
<div id=body>
<div class="dom" style="display: block;">
<form>
<div id="s1">
<h>账号</h>
<input id="input" type="text" placeholder="手机/邮箱/用户名">
</div>
<div id="s1">
<h>密码</h>
<input id="input" type="password" placeholder="密码">
</div>
<div id="s1">
<input type="checkbox">
<span>记住密码</span>
</div>
<input id="button" type="submit" value="登 录">
</form>
<div id="s1">
<a href="#">找回密码</a>
<span>|</span>
<span>还没有注册帐号?</span>
<a href="#">立即注册</a>
</div>
<div id="s2">
<span>使用第三方账号直接登录</span>
<div class="s3">
<a href="#">
<img src="images/qq.png" alt="">
</a>
<a href="#">
<img src="images/wechat.png" alt="">
</a>
</div>
</div>
</div>
<div class="dom">
<form>
<div id="s1">
<h>手机号码</h>
<input id="input" type="text" placeholder="填写你的手机号码作为登录账户">
</div>
<div id="s1">
<h>用户名</h>
<input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字">
</div>
<div id="s1">
<h>密码</h>
<input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写">
</div>
<div id="s1">
<h>短信验证码</h><br>
<input id="input1" type="text" placeholder="填写短信验证码">
<input id="button1" type="button" value="获取短信验证码">
</div>
<input id="button" type="submit" value="注 册">
</form>
<div id="s2">
<span>使用第三方账号直接登录</span>
<div class="s3">
<a href="#">
<img src="images/qq.png" alt="">
</a>
<a href="#">
<img src="images/wechat.png" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<script>
window.onload = function () {
// 1.1 获取需要的标签
let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');
let contents = document.getElementsByClassName('dom');

// 1.2 遍历
for (let i = 0; i < as.length; i++) {
// 1.2.1 取出单个对象
let a = as[i];
a.id = i;

// 1.2.2 监听鼠标的移动事件
a.onclick = function () {
// 让所有的a的class都清除
for (let j = 0; j < as.length; j++) {
as[j].className = '';
contents[j].style.display = 'none';
}

// 设置当前a的class
this.className = 'current';
// 从contents数组中取出对应的标签
contents[this.id].style.display = 'block';
}

}
}
</script>
</div>
</div>
<div id="foot">
<ul>
<li><a>关于我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>广告服务</a></li>
<li><a>开发助手</a></li>
<li><a>工作时间 8:30-22:00</a></li>
</ul>
</div>
<div align="center" style="color: grey; font-size:12px;">
Copyright © 2008-2020. All Rights Reserved
</div>
</body>

</html>

css:

body,

html,

div {

padding: 0;

margin: 0;

}

#head {

width: 100%;

height: 43px;

}

#head ul {

list-style-type: none;

margin: 0;

padding: 0;

}

#head ul li {

float: left;

}

#head ul li a {

display: block;

width: 139.6px;

color: black;

background-color: white;

text-align: center;

text-decoration: none;

margin: 0;

padding-top: 10px;

padding-bottom: 10px;

font-size: 18px;

}

#head ul li a:hover {

background-color: gray;

}

#foot {

width: 100%;

height: 42px;

margin-top: 10px;

}

#foot ul {

list-style-type: none;

margin: 0;

padding: 0;

}

#foot ul li {

float: left;

}

#foot ul li a {

display: block;

width: 250px;

color: grey;

background-color: white;

text-align: center;

padding: 4px;

text-decoration: none;

line-height: 30px;

font-size: 14px;

}

* {

text-decoration: none;

}

a {

color: blue;

}

input,

button {

outline: none;

}

#content {

border: solid 2px #e0e0e0;

width: 25rem;

height: 33rem;

background-color: white;

margin-top: 50px;

margin-left: 50%;

float: left;

}

.header a {

width: 50%;

height: 60px;

background-color: #f5f5f5;

display: inline-block;

float: left;

/*居中*/

text-align: center;

line-height: 60px;

color: #262626;

}

.header a.current {

background-color: transparent;

color: blue;

}

#body {

margin: 2rem;

}

.dom {

width: 100%;

display: none;

}

#input {

width: 100%;

height: 2rem;

margin-top: 0.5rem;

padding-left: 0.5rem;

border-radius: 5px;

border: 1px solid #cccccc;

}

#s1 {

margin-bottom: 1rem;

}

#button {

width: 100%;

height: 2rem;

border: none;

font-size: 1.5em;

color: #fff;

background-color: blueviolet;

border-radius: 3px;

margin-bottom: 1rem;

}

#s2 {

text-align: center;

}

#s3 {

margin-top: 1rem;

}

#input1 {

width: 60%;

height: 2rem;

margin-top: 0.5rem;

padding-left: 0.5rem;

border-radius: 5px;

border: 1px solid #cccccc;

}

#button1 {

width: 35%;

height: 2rem;

margin-top: 0.5rem;

padding-left: 0.5rem;

border-radius: 5px;

border: 1px solid #cccccc;

cursor: pointer;

}

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML静态网页（html，css，js）

效果：HTML:<!DOCTYPE html><html lang="en"><head> <meta charset=UTF-8"> <title>cute de cc</title> <link rel="stylesheet" href="5.css"></head><body> <div id="head"> ...
复制链接

扫一扫