how2j.cn

步骤 1 : 效果   
步骤 2 : 布局   
步骤 3 : 纯html   
步骤 4 : 加上样式   
步骤 5 : 样式讲解   
步骤 6 : 再整合在一起   

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> div.simpleLogo{ padding: 32px 0px; } img.loginBackgroundImg{ display: block; margin: 0px auto; } div.loginSmallDiv{ background-color: white; position: absolute; right: 80px; top: 180px; width: 350px; height: 400px; padding: 60px 25px 80px 25px; } div.login_acount_text{ color: #3C3C3C; font-size: 16px; font-weight: bold; } div.loginInput{ border: 1px solid #CBCBCB; margin: 20px 0px; } div.loginInput span.loginInputIcon{ margin: 0px; background-color: #CBCBCB; width: 40px; height: 40px; display:inline-block; } span.loginInputIcon span.glyphicon{ font-size: 22px; position: relative; left: 9px; top: 9px; color: #606060; } div.loginInput input{ display: inline-block; border: 0px solid transparent; width: 244px; height: 30px; position: relative; left: 6px; top: 6px; } body{ font-size: 12px; font-family: Arial; } a{ color:#999; } a:hover{ text-decoration:none; color: #C40000; } button.redButton{ color: white; background-color: #C40000; font-size: 14px; font-weight: bold; } </style> <div id="loginDiv"> <div class="simpleLogo"> <img src="https://how2j.cn/tmall/img/site/simpleLogo.png"> </div> <img src="https://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackgroundImg" id="loginBackgroundImg"> <div class="loginSmallDiv" id="loginSmallDiv"> <div class="login_acount_text">账户登录</div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name"> </div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input type="password" placeholder="密码" name="password" id="password"> </div> <div> <a href="#nowhere" class="notImplementLink">忘记登录密码</a> <a class="pull-right" href="#nowhere">免费注册</a> </div> <div style="margin-top:20px"> <button type="button" class="btn btn-block redButton">登录</button> </div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
布局
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <div id="loginDiv"> <div class="simpleLogo"> <img src="https://how2j.cn/tmall/img/site/simpleLogo.png"> </div> <img src="https://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackgroundImg" id="loginBackgroundImg"> <div class="loginSmallDiv" id="loginSmallDiv"> <div class="login_acount_text">账户登录</div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name"> </div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input type="password" placeholder="密码" name="password" id="password"> </div> <div> <a href="#nowhere" class="notImplementLink">忘记登录密码</a> <a class="pull-right" href="#nowhere">免费注册</a> </div> <div style="margin-top:20px"> <button type="button" class="btn btn-block redButton">登录</button> </div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> div.simpleLogo{ padding: 32px 0px; } img.loginBackgroundImg{ display: block; margin: 0px auto; } div.loginSmallDiv{ background-color: white; position: absolute; right: 80px; top: 180px; width: 350px; height: 400px; padding: 60px 25px 80px 25px; } div.login_acount_text{ color: #3C3C3C; font-size: 16px; font-weight: bold; } div.loginInput{ border: 1px solid #CBCBCB; margin: 20px 0px; } div.loginInput span.loginInputIcon{ margin: 0px; background-color: #CBCBCB; width: 40px; height: 40px; display:inline-block; } span.loginInputIcon span.glyphicon{ font-size: 22px; position: relative; left: 9px; top: 9px; color: #606060; } div.loginInput input{ display: inline-block; border: 0px solid transparent; width: 244px; height: 30px; position: relative; left: 6px; top: 6px; } body{ font-size: 12px; font-family: Arial; } a{ color:#999; } a:hover{ text-decoration:none; color: #C40000; } button.redButton{ color: white; background-color: #C40000; font-size: 14px; font-weight: bold; } </style> <div id="loginDiv"> <div class="simpleLogo"> <img src="https://how2j.cn/tmall/img/site/simpleLogo.png"> </div> <img src="https://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackgroundImg" id="loginBackgroundImg"> <div class="loginSmallDiv" id="loginSmallDiv"> <div class="login_acount_text">账户登录</div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name"> </div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input type="password" placeholder="密码" name="password" id="password"> </div> <div> <a href="#nowhere" class="notImplementLink">忘记登录密码</a> <a class="pull-right" href="#nowhere">免费注册</a> </div> <div style="margin-top:20px"> <button type="button" class="btn btn-block redButton">登录</button> </div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
步骤 6 :

再整合在一起

edit
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> div.simpleLogo{ padding: 32px 0px; } img.loginBackgroundImg{ display: block; margin: 0px auto; } div.loginSmallDiv{ background-color: white; position: absolute; right: 80px; top: 180px; width: 350px; height: 400px; padding: 60px 25px 80px 25px; } div.login_acount_text{ color: #3C3C3C; font-size: 16px; font-weight: bold; } div.loginInput{ border: 1px solid #CBCBCB; margin: 20px 0px; } div.loginInput span.loginInputIcon{ margin: 0px; background-color: #CBCBCB; width: 40px; height: 40px; display:inline-block; } span.loginInputIcon span.glyphicon{ font-size: 22px; position: relative; left: 9px; top: 9px; color: #606060; } div.loginInput input{ display: inline-block; border: 0px solid transparent; width: 244px; height: 30px; position: relative; left: 6px; top: 6px; } body{ font-size: 12px; font-family: Arial; } a{ color:#999; } a:hover{ text-decoration:none; color: #C40000; } button.redButton{ color: white; background-color: #C40000; font-size: 14px; font-weight: bold; } </style> <div id="loginDiv"> <div class="simpleLogo"> <img src="https://how2j.cn/tmall/img/site/simpleLogo.png"> </div> <img src="https://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackgroundImg" id="loginBackgroundImg"> <div class="loginSmallDiv" id="loginSmallDiv"> <div class="login_acount_text">账户登录</div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name"> </div> <div class="loginInput "> <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input type="password" placeholder="密码" name="password" id="password"> </div> <div> <a href="#nowhere" class="notImplementLink">忘记登录密码</a> <a class="pull-right" href="#nowhere">免费注册</a> </div> <div style="margin-top:20px"> <button type="button" class="btn btn-block redButton">登录</button> </div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-07-16 登录框定位溢出问题
飞鸟




可以把登录框div当做一个子div,然后给父div设置背景图片, 登录框再相对自己定位,这样无论窗口怎么变化,登录框都是根据自己相对位置来定位不会溢出图片
  div.loginBackgroundImg {
        width: 1190px;
        height: 600px;
        background-image: url(https://how2j.cn/tmall/img/site/loginBackground.png);
        z-index: -1;
        margin: 0px auto;
    }

    div.loginSmallDiv {
        background-color: white;
        position: relative;
        right: -800px;
        top: 100px;
        width: 350px;
        height: 400px;
        padding: 60px 25px 80px 25px;
    }

<div class="loginBackgroundImg">
            <div class="loginSmallDiv" id="loginSmallDiv">

                <div class="login_acount_text">账户登录</div>
                <div class="loginInput ">
                    <span class="loginInputIcon ">
                        <span class=" glyphicon glyphicon-user"></span>
                    </span>
                    <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name">
                </div>
                <div class="loginInput ">
                    <span class="loginInputIcon ">
                        <span class=" glyphicon glyphicon-lock"></span>
                    </span>
                    <input type="password" placeholder="密码" name="password" id="password">
                </div>
                <div>
                    <a href="#nowhere" class="notImplementLink">忘记登录密码</a>
                    <a class="pull-right" href="#nowhere">免费注册</a>
                </div>
                <div style="margin-top:20px">
                    <button type="button" class="btn btn-block redButton">登录</button>
                </div>
            </div>
        </div>

							


1 个答案

how2j
答案时间:2021-07-27
good and nice!



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-08-02 登录框定位
俗人




站长,你给的答案页面放大后登录框也会超出背景图哦,是不是应该在背景图和登录框外面再套一层div ,然后设置成相对定位,登录框在根据这个div进行绝对定位
加载中
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.simpleLogo{
    padding: 32px 0px;
}
img.loginBackgroundImg{
    display: block;
    margin: 0px auto;
}
div.loginSmallDiv{
    background-color: white;
    position: absolute;
    right: 80px;
    top: 180px;
    width: 350px;
    height: 400px;
    padding: 60px 25px 80px 25px;
}
div.login_acount_text{
    color: #3C3C3C;
    font-size: 16px;
    font-weight: bold;
}
div.loginInput{
    border: 1px solid #CBCBCB;
    margin: 20px 0px;
}
div.loginInput span.loginInputIcon{
    margin: 0px;
    background-color: #CBCBCB;
    width: 40px;
    height: 40px;
    display:inline-block;
}
span.loginInputIcon span.glyphicon{
    font-size: 22px;
    position: relative;
    left: 9px;
    top: 9px;
    color: #606060;
}
div.loginInput input{
    display: inline-block;
    border: 0px solid transparent;
    width: 244px;
    height: 30px;
    position: relative;
    left: 6px;
    top: 6px;
}
body{
    font-size: 12px;
    font-family: Arial;
}
a{
    color:#999;
}
a:hover{
    text-decoration:none;
    color: #C40000;
}
button.redButton{
    color: white;
    background-color: #C40000;
    font-size: 14px;
    font-weight: bold;
}
</style>
<div id="loginDiv">
    <div class="simpleLogo">
        <img src="http://how2j.cn/tmall/img/site/simpleLogo.png">
    </div>
    <img src="http://how2j.cn/tmall/img/site/loginBackground.png" class="loginBackgroundImg" id="loginBackgroundImg">
        <div class="loginSmallDiv" id="loginSmallDiv">
            <div class="login_acount_text">账户登录</div>
            <div class="loginInput ">
                <span class="loginInputIcon ">
                    <span class=" glyphicon glyphicon-user"></span>
                </span>
                <input type="text" placeholder="手机/会员名/邮箱" name="name" id="name">        
            </div>
            <div class="loginInput ">
                <span class="loginInputIcon ">
                    <span class=" glyphicon glyphicon-lock"></span>
                </span>
                <input type="password" placeholder="密码" name="password" id="password">           
            </div>
            <div>
                <a href="#nowhere" class="notImplementLink">忘记登录密码</a>
                <a class="pull-right" href="#nowhere">免费注册</a>
            </div>
            <div style="margin-top:20px">
                <button type="button" class="btn btn-block redButton">登录</button>
            </div>
        </div>   
</div>

							


1 个答案

how2j
答案时间:2019-08-03
答案页出现这个情况是因为它放在 iframe里, iframe 比较小所以会这样,如果直接浏览器打开就不会这样了。 比如: http://how2j.cn/tmall/login.jsp 不过,这里确实可以改进一下,比如给输入框加个右边距吧,就可以啦



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-05-04 提问错地方了 抱歉其实就是想问登陆框怎么通过绝对定位放在中间
2018-11-01 图标问题
2018-03-08 交互问题


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 3 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫前端-登录页面 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图