css登陆对话框

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量280 收藏
点赞数
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liugf007/article/details/84357017
版权
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.title{font-family: verdana, tahoma, sans-serif;FONT-SIZE: 10px;font-weight:bold}
.grey{FONT-SIZE: 12px;color:#666666}

.orange {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600}
.orange A:link {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:visited {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:hover {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:active {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}

textarea, input, select{
background: #FFFFFF;
border: 1px solid #CCCCCC;
color: #000000;
font-family: verdana, tahoma, sans-serif;
font-size: 0.95em;}
.username{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}


.btn_mouseover {
#给button按钮添加样式；
BORDER-RIGHT: #7EBF4F 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #7EBF4F 1px solid;
PADDING-LEFT: 2px; FONT-SIZE: 15px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6);
BORDER-LEFT: #7EBF4F 1px solid;
CURSOR: hand;
COLOR: black; PADDING-TOP: 2px;
BORDER-BOTTOM: #7EBF4F 1px solid;
}
</style>
<script type="text/javascript">
function say(){

alert(1);
}

</script>
</head>

<body>
<div style="color: red; position: absolute; top: 50%; left: 50%; margin-top: 150px; margin-left: -210px;">
<table width="208" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F4F4F4" class="title">+ LOGIN</td>
</tr>
<tr>
<td class="grey" ><img src="images/warning.gif" width="16" height="16" align="absmiddle" style="display: display"> 请输入登陆的用户和密码</td>
</tr>
<tr>
<td class="title">Username</td>
</tr>
<tr>
<td><input name="Username" type="text" class="username" size="30"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="title">Password</td>
</tr>
<tr>
<td><input name="Password" type="password" class="password" size="30"></td>
</tr>
<tr>
<td class="orange"><a href="#">Get your Password ? </a></td>
</tr>
<tr>
<td align="right"><img οnmοuseοver="this.className='btn_mouseover'" οnmοuseοut="this.className='btn_mouseout'" src="images/loginin.gif" width="70" height="21" οnclick="say()"/></td>
</tr>
</table>

</div>
</body>
</html>
liugf007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+css实现点击导航条“登录”弹出登录框界面
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
Tailwind CSS
m0_58039950的博客
05-12 2099
Tailwind CSS Tailwind CSS是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面. Useful Links 传奇：官方资源 Website - 官方 Tailwind CSS 网站. Repository - 官方 Tailwind CSS 存储库. Discussions - 与其他社区成员就 Tailwind 进行联系的官方场所. Tailwind UI - 使用 Tailwind CSS 制作的组件库. Headless UI - 完全没有样式，完全可访问的
CSS对话框样式
爱吃鱼油
08-12 2646
MyButton Test .mybutton{ background-color: #3085d6; color: #fff; border: 0; box-shadow: none; font-size: 15px; font-weight: 500; border-radius: 5px; p
CSS命名整理
OUYANGYUER3的博客
06-07 247
container item-group thumbnail item-title item-rate comment-title page-btn-group page-btn item-header item-title item-detail left-detail item-sub-detail item-type item-show item-actors item.cover.image.small.url item-tags item-tags-title item-tags-list co
boostrap 对话框 学习
往前的娘娘
06-28 664
概述： 效果： 代码： × 用户登录 用户名： 密码：   登录 总结： 1、class="modal-backdrop in" 背景会显示灰色，背景按钮相关都不可用 2、class="modal in" 类似一块布，在这块布上画对话框 style="display:block" 表示显示这个块布
CSS命名规范
MrLiber的博客
04-12 385
作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范 1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core ...
css--笔记
weixin_50402587的博客
03-08 709
一.css与Html 1.1.自适应与响应式有啥区别？ 自适应是根据屏幕的宽高来调节元素的宽高和位置，因外面的改变而改变。 响应式是根据不同的宽高来响应不同的排版方式， bootstrap是响应式鼻祖，通过媒体查询来实现 前端主要就是**排版，调数据; 1.2.做过响应式页面吗？如果大于1000是黄色，小于1000是红色怎么做？刚好是1000的话你怎么做，怎么设置？ 2.css动画的实现？一个图片打开后不断的旋转？ 3.垂直居中有哪些方式？自定义高度的话 怎么居中？ ............
前端CSS规范整理
qq_35529427的博客
04-26 937
一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/ 电影 /css/movie/ 音乐 /css/music...
关于css的规范
nzjcnjzx
11-18 277
一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库/css/core通用UI元素样式库/css/libJS组件相关样式库/css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中： 读书/css/book/电影/css/movie/音乐/css/
点击按钮弹出登陆对话框
01-23
综上所述，“点击按钮弹出登陆对话框”是一个涵盖了前端开发多个方面的功能实现，它涉及到了用户界面设计、事件处理、数据验证、网络通信以及用户体验等多个层面的知识。通过熟练掌握这些技能，开发者可以创建出既...
div+css登陆页面
05-15
【标题】"div+css登陆页面"涉及到的核心技术是网页布局和样式设计，主要使用HTML的div元素结合CSS（层叠样式表）来构建一个登录界面。div元素是HTML中的一个块级元素，用于组合其他HTML元素，为网页提供结构化布局。...
点登陆弹出登陆对话框的层
07-26
"点登陆弹出登陆对话框的层"是一个常见的交互设计模式，常见于许多网站和应用程序中，如163博客。这种设计使得用户无需离开当前页面即可完成登录操作，提升了用户的操作便捷性。 登录对话框通常是通过JavaScript...
jquery弹出登录对话框
06-18
2. **CSS样式**：接下来，使用CSS定义对话框的外观，包括位置、大小、边框、背景等，以达到理想的视觉效果。 3. **jQuery代码**：然后，利用jQuery的事件处理和DOM操作来控制对话框的显示和关闭。例如： ```...
登录对话框显示登录信息
03-21
实现登录对话框可以采用多种技术，对于Web应用，HTML、CSS和JavaScript是基础，可以利用表单元素创建输入字段，并通过JavaScript进行客户端验证。在服务器端，通常会用到PHP、Java、Python等后端语言处理登录请求，...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 289
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1120
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 355
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 173
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
css实现对话框小尾巴
06-06
实现对话框小尾巴的关键是使用 CSS 的 `::before` 和 `::after` 伪元素来画出三角形。以下是一个简单的示例代码： HTML 代码： ```html <div class="dialogue"> <div class="bubble">这是一条对话</div> </div> ``` CSS 代码： ```css .dialogue { position: relative; } .bubble { position: relative; padding: 10px; background-color: #ffffff; border-radius: 5px; box-shadow: 0 0 5px #888888; font-size: 16px; color: #333333; } .bubble::before { content: ""; position: absolute; bottom: -10px; left: 50%; border: 10px solid transparent; border-top-color: #ffffff; transform: translateX(-50%); } .bubble::after { content: ""; position: absolute; bottom: -8px; left: 50%; border: 10px solid transparent; border-top-color: #888888; transform: translateX(-50%); } ``` 解释一下上述代码： - `.dialogue` 元素用来定位对话框和三角形。 - `.bubble` 元素是对话框的内容。注意，它的 `position` 属性必须是 `relative`，因为三角形是相对于它进行定位的。 - `.bubble::before` 伪元素用来画出白色的三角形。`border` 属性用来画出三角形，`border-top-color` 属性用来设置上边的边框颜色为白色。 - `.bubble::after` 伪元素用来画出阴影效果。同样使用 `border` 属性画出三角形，但是 `border-top-color` 属性设置为灰色，形成阴影效果。 这样就实现了一个简单的对话框小尾巴效果。你可以根据需要调整三角形的大小和位置，以及对话框的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值