div css-类似这种login登录框用div+css如何布?不用table实现类似效果

问题描述

类似这种login登录框用div+css如何布?不用table实现类似效果

如下图:

解决方案

不是很简单的css?

input设置border:none;border-bottom:solid 1px #666,padding-left:你的背景图片宽度,background-image:url(你的北京图片)

就好了

如果连这些基础的css都不会就多补习下css知识了

解决方案二:

不知道楼主说的具体难度是在那方面,正如一楼所说,input之外加div,对其设置小图片的背景,hover来控制图标颜色的改变。border-radius这个可以设置登录按钮圆角,属于css3里面。给背景,border设置为none;这样就差不多了

解决方案三:

如果不用背景图片那?可以实现这个效果吗?input旁边的是图标,如何和input框放在一行,还有那个下划线如何处理?可以来点示例代码看看吗?我是css小白,好久没弄了

时间: 2024-09-12 21:22:49

div css-类似这种login登录框用div+css如何布?不用table实现类似效果的相关文章

Bootstrap弹出带合法性检查的登录框实例代码【推荐】_javascript技巧

最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 效果如下: 图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏 涉及到登录时,登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路: 在body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角. 登录框默认的display属性为none.触发登录时,将该属性改为block 附上示例代码: <!DOCTYPE html> <

JS当前页面登录注册框,固定DIV,底层阴影的实例代码_javascript技巧

这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

文本框在div块中居中,css该怎样写?

问题描述 文本框在div块中居中,css该怎样写? 文本框在div块中居中,css该怎样写? 写text-align:center不行.可能是因为文本框不是文本的原因吧 解决方案 利用margin设置边距. 解决方案二: <div style="text-align:center"> abc<input type="text" />bb </div> 居中了,有什么问题? 解决方案三: 解决方案四: <div> <

JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)_javascript技巧

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery

具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

HTML 透明登录框的实现

html登录界面,看似简单,无非就是一个底图,一个名称,一个登录,一些底部信息,在没有美工的情况下,纯代码实现还是有些坑. 本文详解透明的登录框的CSS实现. 设计界面元素 在把主页面的 html 的元素规定好.主要由底图.名称.登录表单.底部信息组成.如下: <img src="img/bg.jpg" /> <div id="login_id"> <h1>wwww.waylau.com<br/>信息管理系统</

JQuery+CSS3实现封装弹出登录框效果

原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个项目,但是由于不使用Bootstrap自带的JS插件,所以这个弹出登录框就自己实现封装来调用,做出来的效果其实和Bootstrap自带的效果差不多.OK,看一下效果图: 其实很简单,首先是html结构: <div id="mask"></div> <!-- 半

jQuery显示隐藏层插件实例登录框的演示

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"     "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

js+CSS实现弹出居中背景半透明div层的方法

 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1