百度登录框

已于 2023-06-12 10:25:08 修改
阅读量139 收藏
点赞数
文章标签： bootstrap
于 2023-06-10 16:09:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71499021/article/details/131143229
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>百度登录框</title>
        <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
        <script src="../第四章/jquery-3.5.1.js"></script>
        <script src="../bootstrap-3.4.1-dist/js/bootstrap.js"></script>
        <style>
            .mybox{
                        margin: 20px;
                    }
                    /* 加高模态框 */
            .myd{
                        margin-bottom: 20px;
                    }
            a{
                        margin-left: 60%;
                    }
                    /* 登录右移 */
            .container{
                    margin-top: 30px;
            }
            /* 上外边距 */
        </style>
    </head>
    <body>
        <a  href="#mymodal" class="btn btn-primary mybtn" data-toggle="modal">登录</a>
        <!-- 栅格系统百度表单 -->
        <div class="container row">
            <div class="col-md-6 col-md-offset-3"><!-- 栅格系统共占6 -->
                <!-- col-md-offset-3向右偏移3 -->
                <div class="input-group">
                    <!-- 输入框 -->
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">百度一下</button>
                        <!-- btn btn-primary 蓝色样式按钮 -->
                    </span>
                </div>
            </div>
        </div>
        <!-- 弹出模态框 -->
        <div id="mymodal" class="modal fade bs-example-modal-sm"><!-- 淡入淡出效果 -->
            <div class="modal-dialog modal-sm"><!-- 小型模态框尺寸 -->
                <div class="modal-content"><!-- 模态框边距颜色 -->
                <!-- 模态框头部：登录 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <!-- close用于定位右侧按钮样式   data-dismiss="modal"关闭模态框-->
                        <h4 class="modal-title">登录百度账号</h4>
                    </div>
                    <br>
                    <!-- 模态框主体 -->
                    <div class="media-body">
                        <!-- 表单 -->
                            <div class="mybox col-md-10 col-md-offset-1">
                                <input class="form-control" type="text" placeholder="手机/邮箱/用户名"/>
                                    </div>
                            <div class="mybox col-md-10 col-md-offset-1">
                                <input class="form-control" type="text" placeholder="密码"/>
                                    </div>
                            <div class="mybox col-md-10 col-md-offset-1">
                                 <input type="checkbox" />下次自动登录
                                 <!-- 选择框多选 -->
                                    </div>
                            <!-- 模态框底部 -->
                            <div class="modal-footer">                
                                <div class="myd col-md-12">
                                     <input class="btn btn-primary form-control" type="submit" value="登录"/>
                                    </div>
                                </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

星离er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js拖拽仿百度弹出登录框代码
06-24
2. **CSS样式布局**：为了达到仿百度登录框的效果，CSS样式是关键。这包括设置登录框的尺寸、边框、背景色、圆角、阴影等视觉效果，以及定位方式（通常使用绝对定位），确保它可以自由移动。同时，还需要考虑响应式...
腾讯课堂小白训练——仿百度登陆页面
sun_shine9394的博客
04-21 1442
 首先好好研究了百度的登陆界面，用QQ截图工具丈量好了尺寸，还将需要用到的图标都截图保存了。做好准备工作以后就开始了HTML的结构设计，然后使用CSS进行装饰。做出来的效果图如图所示： 具体的HTML结构代码如下： 登陆百度账号 短信快速登陆 换一张 立即注册
Bootstrap练习：百度登录框
斜键仙的博客
11-03 2735
练习：点击登录，弹出一个登录表单，运用到了bootstrap模态框知识和js的插件，练习源文件在下面给出自行下载。 目录一、练习目录结构二、练习源码三、运行效果小结 一、练习目录结构 二、练习源码 index.html文件代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
模态框（百度登录框）
最新发布
2202_75366341的博客
06-26 292
登录百度账号</button><input type="text" class="form-control" id="firstname" placeholder="请输入百度账号/邮箱"><button class="btn btn-primary" type="button">百度一下
基于HTML5的移动Web应用——Bootstrap 样式案例：制作百度登录框
sem00000的博客
05-13 3043
需求说明 使用模态框布局登录框的页面结构和样式 使用栅格系统布局登录的表单内容 通过点击“登录”按钮触发弹出登录框。并且弹出的登录框是小型的 运行效果 参考代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>百度登录框</title> <meta name="viewport" conte
用html+css模仿百度登录页
AKK188888881的博客
02-21 2083
用html+css模仿百度登录页
jQuery实现百度登录框的动态切换效果
12-03
在本示例中，我们将探讨如何使用jQuery实现类似百度登录框的动态切换效果。这个效果主要是通过点击右下角的图片来切换登录状态，比如从账号密码登录切换到短信快捷登录。下面我们将详细分析实现这一功能的关键代码和...
js实现百度登录框鼠标拖拽效果
01-19
以百度的登录窗口为例，学习鼠标拖拽效果如何实现，拖拽范围限定以及登录窗口自动居中。学会如何制作弹出窗口特效，了解把元素设置为可拖拽的原理。 知识点： 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发...
bootstrap做登录注册页面带验证
10-18
用bootstrap做的登录，注册页面，使用validate进行表单验证，是本人从空白页面搭建的，亲测可用，1积分算是我的辛苦费吧。 我会通过博客注明知识点：http://blog.csdn.net/qq_19558705； 希望能帮到大家。没有积分的小伙伴可以私信我，我加qq发给你
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
由于H5页面在使用bootstrap的自适应导致从高度上总是自动排列，导致登录框不能自动居中。项目中发现一个动态居中办法，很好用，可以让Bootstrap登录框自适应水平居中、垂直居中。
bootstrap弹出登录框【带合法性检查】
会开花的树
12-21 6656
最近做的网站涉及到访问控制，在访问需要登录才能使用的页面或功能时，会弹出登录框： 效果如下： 图 1-点击用户名时，如未登录弹出登录框对这个功能的详细描述： 不涉及到登录时，登录框隐藏 涉及到登录时，登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路： 在body结束标签之前插入登录的div,设其定位方式为absolute，位置在左上角。 登录框默认的display属性为none。触
[百度搜索框Bootstrap模仿]
斗志昂扬
12-03 5917
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度搜索框提示功能</title> <!-- Bootstrap CSS样式配置--> <link rel="stylesheet" href="http://cdn.static.runoob.com/li
HTML基于bootstrap的登录弹出框
一穷二白的博客
09-08 2362
登录弹出框             ×                 登录                                                         用户名：
8-bootstrap笔记-类似百度的输入框
qq_25956141的博客
01-03 853
使用bootstrap生成一个类似百度的组合输入框，当然还可换成其他类型的组合下拉列表，单选框，复选框等等。 代码展示<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initail-scale=1,shrin
bootstrap实现登录注册界面
热门推荐
hugejihu9的专栏
10-17 6万+
文章来自：源码在线https://www.shengli.me/css/65.html；   Bootstrap是一个Web前端开发框架，使用它提供的css、js文件可以简单、方便地美化HTML控件。Bootstrap框架为各种控件定义好了很多的类（class），在引入相关文件后，为控件添加相应的类，就可以看到想要的样子了，它使开发更快捷，更简单了......   bootstrap官网地...
页面布局及百度登录框
JudyLliu的博客
04-23 1404
一、简单的页面布局的步骤 1.构思。在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事情。当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去。 2.粗略布局。在这个阶段，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求。创造出物体的形象。页面的整体形象，应该是一个整体。 3.完善布局。当我们已经有一个很好的框
练习1:百度前端技术学院 - 零基础 HTML 编码
RecordStudy
07-18 538
http://www.earnfish.com/article/1494078696419<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>网站的一级标题???</h1> <ul> <li>导
百度新闻的的登录框怎么用js写
05-17
百度新闻的登录框可以使用以下代码实现： HTML部分： ``` 用户名: 密码: 登录"> ``` CSS部分： ``` .login-box { position: fixed; top: 50%; left: 50%; transform: translate(-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值