web实验新浪邮箱、下拉小说列表、验证用户登录

于 2022-10-18 16:18:00 发布 551 收藏 3
分类专栏： web实践案例 前端 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/127390887
版权

html、css、js

新浪邮箱

1、制作以下的新浪 邮箱登录界面：
要求：
1）首先给文本框制作细边框样式，当鼠标放在文本框上时，输入框的边框颜色发生变化，当鼠标离开文本框时，文本框恢复初始状态；
2）当鼠标放在“登录”按钮上时，按钮的背景图片发生变化；当鼠标离开“登录”按钮时，登录按钮的背景图片恢复原始状态。


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->
<style>
*{
padding:0;
margin:0;
}
.box1{
width:300px;
height:200px;
border:2px solid black;
}
.box2{
margin:0px ;
}
label {
        display: inline-block;
        width: 100px;
        text-align: right;
}
.box6{
margin:10px 125px 10px;
border:1px solid black;
text-align:center;
}
a{
text-decoration:none;
color:black;
}
.box6:hover{
background-color:green;
}
input:hover{
border:2px solid green;
}
</style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <img src="921/top.jpg">
    </div>
<div class="box3">
    <div class="box5">
    <label class="text">邮箱名：</label>
    <input type="text" name="text" style="width:80px" />

    @sina.com
    </div>
    </br>
    <div class="box4">
   <label class="text2">密码：</label>
    <input type="password" name="text2"style="width:80px"/>
    </div>
    <div class="box6">
        <a href="#" style="width:80px">登录</a>
    </div>
    </div>

</div>

</body>
</html>

下拉小说列表

2、当鼠标移动到“小说”、“非小说”、“少儿 ”菜单上的时候，改变相应菜单的背景图片，鼠标移开后恢复原背景图;并且下面会显示对应菜单的子目录。（静态页面已经提供）
当鼠标移动到“小说“上的时候效果如图一，当鼠标移动到“非小说“上的时候效果如图

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记单词别打错了-->

    <style>
*{
padding:0;
margin:0;
}
.box{
 width:200px;
 height:400px;
 border:1px solid black;
 }
.a1{
color:orange;
font-weight:700;
}
.a2{
color:orange;
}
.a3{
color:yellow;
font-size:14px;
}
.A{
padding:10px;
}
.B{
display:block;
padding:10px;
}
.a4{
padding:10px;
}
.main_div{	/*主DIV*/
			width:169px;
			height:290px;
			background:url(images/bg.jpg) no-repeat;
			margin:0px auto;
		}
		.myTable{	/*表格样式*/
			width:145px;
			margin:0px auto;
		}

		.bg{		/*鼠标悬浮单元格样式*/
			background:url(images/menu1.gif) no-repeat;
			text-align:center;
			width:30%;
			height:25px;
		}

		.nobg{		/*鼠标离开单元格样式*/
			background:url(images/menu2.gif) no-repeat;
			text-align:center;
			width:30%;
			height:25px;
		}

		.menu{	   /*超链接默认样式*/
			color:#993366;
		}
		a.menu:hover{		/*鼠标悬浮超链接样式*/
			color:#FFFF99;
		}
		td{
			/*border:1px solid red;*/
			font-size:12px;
			line-height:20px;
			color:#414141;
		}
		a{
			color:#0033FF;
			text-decoration:none;
			line-height:24px;
		}
		a:hover{
			color:red;
			text-decoration:none;
			line-height:24px;
		}
    </style>
</head>
<body>
<div class="box">
    <div class="A">
    <span class="a1">图书周排行榜</span>&ensp;<span class="a2">TOP &ensp;100</span>
    </br>
    <span class="a3">近7天销量，每日更新</span>
    </div>
    <div class="a4">
    <tr>
        <td class="bg" id="bg1"><a href="#" class="menu">小说</a></td>
        <td class="nobg" id="bg2"><a href="#" class="menu">非小说</a><a></a></td>
        <td class="nobg" id="bg3"><a href="#" class="menu">少儿</a></td>
    </tr>
    <tr>
        <td colspan="3" style="padding-top:10px;padding-left:5px;text-align:left;">
            <div id="book1" style="display:block;">
                <a href="#" target="_blank">1.时间旅行者的妻子</a><br>
                <a href="#" target="_blank">2.女心理师（下）</a><br>
                <a href="#" target="_blank">3.鬼吹灯之精绝古城</a><br>
                <a href="#" target="_blank">4.女心理师（上）</a><br>
                <a href="#" target="_blank">5.小时候</a><br>
                <a href="#" target="_blank">6.追风筝的人</a><br>
                <a href="#" target="_blank">7.盗墓笔记2</a><br>
                <a href="#" target="_blank">8.输赢</a>
            </div>
            <div id="book2" style="display:none;">
                <a href="#" target="_blank">1.人生若只如初见</a><br>
                <a href="#" target="_blank">2.高效能人士的七个..</a><br>
                <a href="#" target="_blank">3.求医不如求己</a><br>
                <a href="#" target="_blank">4.人体使用手册</a><br>
                <a href="#" target="_blank">5.孩子，把你的手给我</a><br>
                <a href="#" target="_blank">6.别笑！我是英文单词书</a><br>
                <a href="#" target="_blank">7.人体经络使用手册</a><br>
                <a href="#" target="_blank">8.股市稳赚</a>
            </div>
            <div id="book3" style="display:none;">
                <a href="#" target="_blank">1.斯凯瑞金色童书·..</a><br>
                <a href="#" target="_blank">2.哈利·波特与“混..</a><br>
                <a href="#" target="_blank">3.不一样的卡梅拉（..</a><br>
                <a href="#" target="_blank">4.它们是怎么来的</a><br>
                <a href="#" target="_blank">5.五·三班的坏小子..</a><br>
                <a href="#" target="_blank">6.男生日记</a><br>
                <a href="#" target="_blank">7.哈利·波特与魔法石</a><br>
                <a href="#" target="_blank">8.噼里啪啦丛书(全7册)</a>
            </div>
        </td>
    </tr>
    </div>
    </tbody></table>
</div>

</div>
</body>
</html>

验证用户登录

3、使用正则表达式验证用户注册页面，使用焦点事件完成错误提示特效, 具体要求如下：
用户名为6-16个字符，包含字母、数字和下划线，前两位必须是字母,最后一位必须是数字
密码只能由英文字母和数字组成，长度为4-10个字符
邮箱格式必须按照常规邮箱格式写

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
*{
padding:0;
margin:0;
}
.main{
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.left{
text-align:right;
width:200px;
height:25px;
padding-right:5px;
}
.center{
width:135px;
}
.in{
width:130px;
height:16px;
border:solid 1px #79abea;
}
.red{
color:#cc0000;
font-weight:bold;
}
div{
color:#f00;
}
div a{
position:absolute;
width:40px;
height:25px;
border:2px solid pink;
background-color:skyblue;
<!--margin-left:400px;-->
margin-top:20px;
left:230px;
}
a{
display:block;
font-style:none;
text-decoration:none;
color:white;
text-align:center;
line-height:25px;

}
    </style>
</head>
<body>
<table class="main" border="0" cellspacing="0" cellpadding="0">
<from action="" methon="post" name="myform" onlick="return postBool();">
    <img src="921/logo.jpg" alt=""/>
    <tr>
        <td class="left">用户名：</td>
        <td class="center"><input id="user" type="text" class="in" onblur="userBtn();"/></td>
        <td><div id="userText">用户名为6-16个字符，包含字母、数字和下划线， 前两位必须是字母,最后一位必须是数字</div></td>
    </tr>
<tr>
    <td class="left">邮箱地址：</td>
    <td class="center"><input id="email" type="text" class="in" onblur="emailBtn();"/></td>
    <td><div id="emailText">必须按照常规邮箱格式写</div></td>
</tr>
    <tr>
        <td class="left">手机号码：</td>
        <td class="center"><input id="mobile" type="text" class="in" onblur="mobileBtn();"/></td>
        <td><div id="mobileText"></div></td>
    </tr>
    <tr>
        <td class="left">登录密码：</td>
        <td class="center"><input id="pwd" type="password" class="in" onblur="pwdBtn();"/></td>
        <td><div id="pwdText">只能由英文字母和数字组成，长度为4-10个字符</div></td>
    </tr>
    <tr>
        <td class="left">确认密码：</td>
        <td class="center"><input id="repwd" type="password" class="in" /></td>
        <td><div id="repwdText"></div></td>
    </tr>
    <tr>
        <td>
           <div><a href="#">提交</a></div>
        </td>
    </tr>
</from>
</table>
<script type="text/javascript">
    function userBtn(){
    var user=document.getElementById("user").value;
    var userReg=/^[a-zA-Z][a-zA-Z][a-zA-Z0-9]{4,14}$/;
    var userText=document.getElementById("userText");
    if(userReg.test(user)){
    userText.innerHTML="输入正确！";
    return true;
    }else{
    userText.innerHTML="输入不正确！";
    }
    return false;
    }

	function emailBtn(){
		var email=document.getElementById("email").value;
		var emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
		//alert(emailReg.test(email));
		var emailText=document.getElementById("emailText");
		if(emailReg.test(email)){
			emailText.innerHTML="输入正确!";
			return true;
		}else{
			emailText.innerHTML="输入不正确!";
		}
		return false;
	}
	function mobileBtn(){
		var mobile=document.getElementById("mobile").value;
		var mobileReg=/^[0-9]{11}$/;
		//alert(mobileReg.test(mobile));
		var mobileText=document.getElementById("mobileText");
		if(mobileReg.test(mobile)){
			mobileText.innerHTML="输入正确!";
			return true;
		}else{
			mobileText.innerHTML="输入不正确!";
		}
		return false;
	}
	function pwdBtn(){
		var pwd=document.getElementById("pwd").value;
		var pwdReg=/^[a-zA-Z0-9]{4,10}$/;
		//alert(pwdReg.test(pwd));
		var pwdText=document.getElementById("pwdText");
		if(pwdReg.test(pwd)){
			pwdText.innerHTML="输入正确!";
			var repwd=document.getElementById("repwd").value;
			var repwdText=document.getElementById("repwdText");
			if(pwd==repwd){
				repwdText.innerHTML="输入正确!";
				return true;
			}else{
				repwdText.innerHTML="第二次输入的密码与第一次不相同";
			}
		}else{
			pwdText.innerHTML="输入不正确!";
		}
		return false;
	}
	function postBool(){
		if(userBtn()&&pwdBtn()&&emailBtn()&&mobileBtn()&&birthBtn()){
			alert("提交成功!");
		}
	}
</script>

</body>
</html>
佳美不ERROR
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
新浪邮箱界面登录按钮效果制作
farmFun的学习笔记
12-19 3245
IMG,CSS <span style="font-family:宋体;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:"Times New Roman"">立体效果制作 <p class="MsoNormal" style="margin-left:18.0pt;text-indent:-18.0pt
html注册新浪邮箱代码,新浪博客美化代码：邮箱快速登录
weixin_39564368的博客
06-09 2342
新浪博客美化代码：如何给你的博客加上邮箱快速登录代码如下：href="http://blog.sina.com.cn/u/1191003304"target=_blank>color=#ff0000>三峡在线：分享生活经典align=center>method="post"target="_blank">请选择你的邮箱@sina.com@126.com网易50M帐号:nam...
Node.js 实现邮件发送功能的详细步骤（例如：QQ邮箱、新浪邮箱）
weixin_42995152的博客
03-06 1565
nodemailer 介绍 nodemailer 是 Node.js 中比较常用的用于发送邮件的一种中间件。 可以查看 nodemailer 在 npm 官网上的详细介绍： nodemailer 文档 注：邮箱验证就是通过POP3/SMTP等服务从一个邮箱发送内容给另一个邮箱去。 额外知识点 SMTP是一种提供可靠且有效的电子邮件传输的协议。SMTP是建立在FTP文件传输服务上的一种邮件服务，...
Vue-- 锚点实现左右两栏联动--scrollIntoView方法
hyduan_h5的博客
06-06 170
Vue-- 锚点实现左右两栏联动--scrollIntoView方法
vue 获取url地址的参数
花生日记
05-27 1949
url是一个 URL地址，我们在使用 vue的时候，经常需要获取 url的参数，获取方法有很多种，这里我只介绍一种获取 url参数的方法，那就是使用 Requests. urlset. newContext （）方法。下面是我的代码实现： 上面的代码中，我们传入的参数是一个字符串，其实可以直接将其转化为机器码并进行刷新，不过我认为这样做太过麻烦，因此我们选择了将其转化为机器码后再进行刷新。下面是一个简单的例子： 通过这个例子，我们可以看出， vue会将字符串中的汉字转化为机器码，然后再进行刷新。
JS的symbol数据类型
weixin_50975172的博客
06-06 169
JS的symbol数据类型
Firefox插件（拓展）开发
最新发布
@zhujj_的博客
06-06 95
JavaScript编写插件时，通常分为以下几个脚本：1.：用于操作网页内容，可以访问DOM和页面元素，可以修改页面样式和行为，与页面共享同一个JavaScript环境。2.：用于处理插件的后台任务，例如处理网络请求、管理插件状态、与其他插件通信等，与页面不共享JavaScript环境。3.：用于处理插件弹出窗口的交互逻辑，例如响应用户点击事件、发送消息给后台脚本等。4.：用于处理插件选项页面的交互逻辑，例如保存用户设置、发送消息给后台脚本等。
Vue中组件和插件有什么区别？
weixin_50975172的博客
05-29 1321
Vue中组件和插件有什么区别？
前端开发中的最佳实践
weixin_43263566的博客
06-04 1005
前端开发中的最佳实践
javascript基础七：说说你对Javascript中作用域的理解?
Allen-Ye博客
05-27 1155
说说你对Javascript中作用域的理解?
element-ui树形控件el-tree详解
m0_63040701的博客
05-26 767
我这里不是直接用data来传递整个树的数据，而是用懒加载的方式，当点击一个节点的时候再进行树结构的添加。这里我利用element-ui开发一个vue的树形组件。修改vite.config.js配置按需加载。安装element-plus。
前端如何实现Excel的上传下载？
weixin_40381947的博客
05-31 618
我们可以利用 HTML5 提供的 FileReader 实现将 Excel 文件读入内存，再使用 Blob 和 URL.createObjectURL 实现文件内容的下载。在此方案中，需要实现客户端将 Excel 文件上传至服务端，然后再由服务端返回 Excel 文件给客户端进行下载。一种是利用 HTML5 提供的 FileReader 和 Blob 对象实现本地文件的读取和下载。接口同样应该由后端进行实现，且返回的应该是 Excel 文件的二进制流数据。元素到页面中，模拟用户点击下载链接，下载文件。
NPM 制作命令行工具 - 入门案例
卡尔特斯
05-31 442
经常通过npm安装vue-cli之类的命令行工具，那么如何简单的制作一个命令行工具呢？只需要几步即可！
Web基础与HTTP协议
guyunbingyb的博客
05-30 546
Web基础与HTTP协议
vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建
乌龙茶不甜的博客
06-06 234
vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建
搭建一个AI对话机器人——前端ChatUI使用纪录
qq_24357165的博客
05-31 664
阿里 ChatUI的接入使用经验整理。ChatUI是一个适用于 React 项目的聊天机器人前端解决方案，包含丰富的对话组件，支持 PC/移动端样式响应式。使用简单，体积不算重，兼容性良好。不过文档及社区维护这块有提升的空间。
JavaScript undefined
smarten57的博客
06-03 322
在这个例子中，`obj`对象上不存在名为`property`的属性，因此访问它将返回`undefined`。在这个例子中，`obj`对象上不存在名为`property`的属性，因此访问它将返回`undefined`。在这个例子中，调用`myFunction`函数时没有传递参数，因此参数`parameter`的值是`undefined`。在这个例子中，调用`myFunction`函数时没有传递参数，因此参数`parameter`的值是`undefined`。
html&CSS-----CSS选择器（上）
m0_73633088的博客
06-03 410
详细介绍html中CSS的初级选择器，包括ID选择器、类选择器、标签选择器和通配选择器，进来看看吧！！！！
20230527----重返学习-React复合组件通信方案-TodoList组件拆分-React组件二次封装
seetoyou的博客
05-27 459
父子通信：属性「偶尔获取子组件实例/暴露方法」。备注：调用UI组件库中的组件，都是父子通信。所以虽然感觉父子组件间限制很多，但在业务中的应用场景反而是最多最常用的。小型项目中，非父子（或者也不是同一个父组件的），可以基于 祖先和后代「主要是上下文方案」进行处理！因为根组件必定可以是一个项目中所用到的所有业务组件的共同祖先元素。所以这种方式，理论上也可以当成是能通用的方式。但是一旦项目比较大，需要共享的信息多了，都放在祖先中也不方便维护和管理！
winform下拉列表
05-01
Winform下拉列表是一种常见的控件，用于在用户界面中提供选项列表供用户选择。它通常由一个下拉箭头和一个文本框组成，点击下拉箭头则会弹出一个选项列表，用户可以从中选择一个选项，选择后文本框中将显示所选项的值。 在Winform中，可以使用ComboBox控件来创建下拉列表。ComboBox控件可以在设计视图中直接拖拽添加到窗体上，并在属性窗口中设置选项列表的项和默认值。也可以在代码中通过添加ComboBox实例来创建控件，再通过Add方法添加选项项。 除了基本的下拉列表功能外，ComboBox控件还提供了一些其他的特性，如可以设置DropDownHeight属性来控制下拉列表的高度，可以通过DropDownStyle属性来设置下拉列表的样式（如下拉、简单下拉等），还可以通过SelectedIndexChanged事件来响应用户的选项选择。 总之，ComboBox控件作为Winform中常用的下拉列表控件，可以方便地在用户界面中提供选项列表供用户选择，是Winform开发者不可或缺的重要组成部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值