前端第四天

程序员文章站 2022-06-03 14:58:55

...

京东登陆页面

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <!-- 设置标题 -->
		<title>京东-欢迎登录</title>
        <!-- 设置网页图标 -->
        <link rel="icon" type="image/ico" href="./img/jd_logo.ico"/>
        
        <!-- 添加样式 -->
        <style type="text/css">
            /* 关闭标签自带的外边距和内边距 */
            *{
                margin: 0;
                padding: 0;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="./css/header.css"/>
        <link rel="stylesheet" type="text/css" href="./css/content.css"/>
        <link rel="stylesheet" type="text/css" href="./css/footer.css"/>
        
	</head>
	<body>
        <!--------------顶部------------------>
        <div id="header">
            <div id="logo">
                <!-- logo -->
                <div>
                    <a href=""><img src="img/logo-201305-b.png" ></a>
                    <img src="img/l-icon.png" >
                </div>
                
                <!-- 调查问卷 -->
                <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，调查问卷</a>
                
            </div>
            
            <!-- 隐私政策 -->
            <div id="privacy">
                <p><img src="img/icon-tips.png" >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
            </div>
        </div>
        
        
        <div id="content">
            
            <div id="box">
                <div id="box1">
                    <img src="img/icon-tips.png" >
                    <span>京东不会以任何理由要求您转账汇款，谨防诈骗。</span>
                </div>
                
                <div id="box2">
                    <button type="button">扫码登录</button>
                    <span>|</span>
                    <button type="button">账号登录</button>
                </div>
                
                
                <div id="box3">
                    <div id="b-username">
                        <label for="i-username"><img src="img/username.png" ></label>
                        <input type="text" id="i-username" placeholder="邮箱/用户名/登录手机"/>
                    </div>
                    <div id="b-password">
                        <label for="i-password"><img src="img/password_icon.png" ></label>
                        <input type="password" id="i-password" placeholder="密码"/>
                    </div>
                    
                    <a href="">忘记密码</a>
                    <button type="button">登&emsp;录</button>
                </div>
                
                
              
               
                <div id="box4">
                    <a id="qq"  href="">QQ</a>
                    <span>|</span>
                    <a id="weixin" href="">微信</a>
                    <a id='register' href="">立即注册</a>
                </div>
            </div>
        </div>
        
        
        
        <div id="footer">
            <div id="">
                <a href="">联系我们</a>
                <span>|</span>
                <a href="">关于我们</a>
                <span>|</span>
                <a href="">人才招聘</a>
                <span>|</span>
                <a href="">商家入驻</a>
                <span>|</span>
                <a href="">广告服务</a>
                <span>|</span>
                <a href="">手机京东</a>
                <span>|</span>
                <a href="">友情链接</a>
                <span>|</span>
                <a href="">销售联盟</a>
                <span>|</span>
                <a href="">京东社区</a>
                <span>|</span>
                <a href="">京东公益</a>
                <span>|</span>
                <a href="">English Site</a>
            </div>
            <p>Copyright © 2004-2020  京东JD.com 版权所有</p>
        </div>
	</body>
</html>

css代码

#content{
    /* background-color: seagreen; */
    height: 475px;
    background: url(../img/bg.png) no-repeat 160px center rgb(16,34,112);
    
    position: relative;
}

#box{
    width: 345px;
    height: 440px;
    background-color: white;
    
    position: absolute;
    top: 10px;
    right: 140px;
}


#box1{
    background-color: rgb(255,248,241);
    height: 40px;
    
    /* 让box1中的一行内容垂直方向居中 */
    line-height: 40px;
    
    /* 让box1中的内容水平方向居中 */
    text-align: center;
}

#box1>span{
    font-size: 12px;
    color: rgb(185,185,185);
}

#box1>img{
    vertical-align: middle;
}



/* ================================================= */
#box2{
    /* background-color: hotpink; */
    height: 55px;
    
    text-align: center;
    
    line-height: 55px;
}
#box2>button{
    height: 100%;
    width: 165px;
    
    border: 0;
    /* 取消选中时的outline属性 */
    outline: 0;    
    
    background-color: white;
    
    font-size: 20px;
    color: rgb(80,80,80);
    
    /* 设置字体的粗细：100~900 */
    font-weight: 400;
}
#box2>button:focus{
    color: rgb(226, 59, 65);
}


#box2>span{
    color: rgb(244,244,244);
}

/* ================================================= */
#box3{
    /* background-color: skyblue; */
    height: 295px;
    
    border-top: 1px solid rgb(244,244,244);
    border-bottom: 1px solid rgb(244,244,244);
    
    position: relative;
}

#box3>div{
    height: 40px;
    margin-left: 20px;
    margin-top: 20px;
    width: 305px;
    border: 1px solid rgb(187,187,187);
}

#box3>div img{
    height: 40px;
    width: 40px;
    border-right: 1px solid rgb(187,187,187);
}

#box3 input{
    border: 0;
    outline: 0;
    height: 100%;
    vertical-align: top;
    width: 255px;
    font-size: 15px;
}

#box3>#b-username{
    margin-top: 33px;
}


#box3>a{
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    
    color: rgb(136,136,136);
    font-size: 12px;
    text-decoration: none;
}
#box3>a:hover{
    color: rgb(226, 59, 65);
    text-decoration: underline;
}


#box3>button{
    position: absolute;
    left: 20px;
    bottom: 30px;
    width: 305px;
    height: 33px;
    border: 0;
    outline: 0;
    background-color: rgb(226, 59, 65);
    color: white;
    font-size: 20px;
}



/* ================================================= */
#box4{
    height: 50px;
    line-height: 50px;
    
    position: relative;
}

#qq,#weixin{
    color: rgb(98,98,98);
    font-size: 12px;
    text-decoration: none;
    padding-left: 25px;
}
#qq{
    margin-left: 20px;
    background: url(../img/qq.png) no-repeat 0 center rgba(0,0,0,0);
}
#weixin{
    background: url(../img/weixin.png) no-repeat 0 center rgba(0,0,0,0);
}
#register{
    position: absolute;
    right: 20px;
    color: rgb(180,31,35);
    text-decoration: none;
    font-size: 13px;
    background: url(../img/right.png) no-repeat 0 center rgba(0,0,0,0);
    padding-left: 25px;
}

#qq:hover,#weixin:hover{
    color: rgb(226, 59, 65);
    text-decoration: underline;
}
#register:hover{
    text-decoration: underline;
}

#box4>span{
    margin-left: 8px;
    margin-right: 5px;
    font-size: 12px;
    color: rgb(235,235,235);
#footer{
    /* background-color: skyblue; */
    /* height: 50px; */
}
#footer>div{
    height: 50px;
    text-align: center;
    line-height: 50px;
}

#footer a,#footer span{
    font-size: 12px;
    color: rgb(116,116,116);
    text-decoration: none;
}
#footer span{
    margin-left: 7px;
    margin-right: 7px;
}

#footer a:hover{
    color: rgb(226, 59, 65);
    text-decoration: underline;
}

#footer>p{
    text-align: center;
    font-size: 12px;
    color: rgb(116,116,116);
}
#header{
    /* background-color: khaki; */
    height: 120px;
}

/* ==========logo=========== */
#logo{
    height: 80px;
    position: relative;
}

/* 浮动实现效果 */
#logo>div{
    /* background-color: lavender; */
    float: left;
    margin-left: 140px;
    
    /* 垂直居中 */
    position: absolute;
    top: 50%;
    margin-top: -30px;
   
}

#logo>div>img{
    margin-left: 20px;
}

/* 调查问卷 */
#logo>a{
    float: right;
    margin-right: 140px;
    margin-top: 55px;
    
    color: rgb(175,175,175);
    font-size: 12px;
    
    /* 去掉下划线 */
    text-decoration: none;
    
    /*
    background: url(图片地址) 是否平铺 x坐标 y坐标 背景颜色;
    是否平铺 - no-repeat/repeat
    x坐标 - 坐标值/left/right/center
    y坐标 - 坐标值/top/bottom/center
    */
    background: url(../img/q-icon.png) no-repeat 0 center rgba(0,0,0,0);
    padding-left: 25px;
}

#logo>a:hover{
    text-decoration: underline;
    color: rgb(226, 59, 65); 
}


/* 定位实现效果 */



/* ===========privacy============ */
#privacy{
    background-color: rgb(255,248,241);
    height: 40px;
}
#privacy>p{
    /* background-color: yellow; */
    /* 文本内容在文字标签中水平方向居中 */
    text-align: center;
    
    /* 文本内容垂直方向居中 */
    height: 100%;
    line-height: 40px;
    
    color: rgb(185,185,185);
    font-size: 12px;
    vertical-align: bottom;
    
}

#privacy img{
    /* 设置标签垂直方向的对齐方式 
    top   -  顶部
    bottom - 底部
    middle  - 中间
    */
    vertical-align: middle;
    margin-right: 5px;
}

#privacy a{
    text-decoration: none;
    color: rgb(51,51,51);
}

#privacy a:hover{
    text-decoration: underline;
}

前端第四天

京东登陆页面

互联网八大技术岗位解析：前端+后端+移动+测试+大数据+管理等

JSP 前端数据本地排序实例代码

Visual Studio 2010 前端开发工具/扩展/插件推荐

详解Vue前端生产环境发布配置实战篇

互联网八大技术岗位解析：前端+后端+移动+测试+大数据+管理等

js替换字符串制定位置字符（前端字符串替换）

笔记本电脑参数解析：什么是前端总线

前端笔记知识点整合之JavaScript（七）深入函数&DOM那点事

前端（三）之选择器高级与盒模型

撩课-Web大前端每天5道面试题-Day6