拉勾网

标签：拉勾 height width background position boxLeft size

##html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拉勾网</title>
    <link rel="stylesheet" href="css/reset(1).css">
    <link rel="stylesheet" href="css/main(1).css">
</head>
<body>
<div id="green"></div>
<div id="box">
    <a href="" id="logo"></a>
    <div id="qr"></div>
    <div id="loginTips"></div>
    <div id="boxLeft">
        <div id="btnBox">
            <button>密码登录</button>
            <button>验证码登录</button>
        </div>
        <div id="underline">
            <div></div>
            <div></div>
        </div>
        <form action="">
            <input type="text" class="accountPassword" placeholder="请输入常用手机号/邮箱">
            <input type="password" class="accountPassword" placeholder="请输入密码">
            <a href="">忘记密码？</a>
            <input type="submit" class="accountPassword" value="登            录">
            <input type="checkbox"><span>进入即代表你已同意</span><a href="">《用户协议》</a><a href="">《隐私政策》</a>
        </form>
    </div>
    <div id="or"></div>
    <div id="boxRight">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

/*************************************华丽丽的分割线*************************************/


##css

body {
    background: #f8f9fc
}

#green {
    width: 100%;
    height: 360px;
    background: #00b38a;
}

#box {
    width: 700px;
    height: 455px;
    background: #fff;
    border: 1px solid rgb(220, 225, 230);
    position: relative;
    margin: -200px auto 0
}

#logo {
    display: inline-block;
    width: 314px;
    height: 24px;
    background: url("../img/1650342178498.png");
    background-size: 100% 100%;
    position: absolute;
    top: -80px;
}

#qr {
    width: 52px;
    height: 52px;
    background: url("../img/qrcode-normal_bb3ab97.svg");
    position: absolute;
    top: 6px;
    left: 6px
}

#qr:hover {
    background: url("../img/qrcode-click_1611a71.svg")
}

#loginTips {
    width: 158px;
    height: 34px;
    background: url("../img/scan_6b80f5c.png");
    background-size: 100% 100%;
    position: absolute;
    left: 52px;
    top: 8px
}

#boxLeft {
    width: 290px;
    height: 330px;
    position: absolute;
    top: 62px;
    left: 62px
}

#btnBox {
    border-bottom: 1px solid rgb(235, 235, 235);
    height: 44px
}

#btnBox > button {
    width: 50%;
    height: 33px;
    background: #fff;
    border: 0;
    cursor: pointer;
    float: left;
    font-size: 16px
}

#boxLeft .accountPassword {
    width: 100%;
    height: 44px;
    border: 0;
    outline: none;
    font-size: 14px;
    margin-top: 20px;
}

#boxLeft input[type="text"], #boxLeft input[type="password"] {
    border-bottom: 1px solid rgb(235, 235, 235);
}

#boxLeft input[type="text"]:focus, #boxLeft input[type="password"]:focus {
    border-bottom-color: #00b38a;
}

#boxLeft a:first-of-type {
    float: right;
    text-decoration: none;
    font-size: 14px;
    margin-top: 20px
}

#boxLeft > form > span {
    color: rgb(153, 153, 153);
    font-size: 12px
}

#boxLeft > form > a {
    color: #00b38a;
    font-size: 12px;
    text-decoration: none;
}

#boxLeft > form > a:hover {
    text-decoration: underline
}

#boxLeft input[type="submit"] {
    color: #fff;
    background-color: #00b38a;
    font-size: 18px;
    margin-bottom: 20px
}

#underline {
    width: 50%;
    height: 2px;
    background: #00b38a
}

#underline > div:first-child {
    width: 15px;
    height: 15px;
    background: #00b38a;
    margin: 0 auto;
    transform: translateY(-8px) rotate(45deg)
}

#underline > div:last-child {
    width: 15px;
    height: 15px;
    background: #fff;
    margin: 0 auto;
    transform: translateY(-19px) rotate(45deg)
}

#boxRight {
    width: 160px;
    height: 150px;
    position: absolute;
    top: 130px;
    right: 66px
}

#boxRight > ul {
    display: flex;
    justify-content: space-around;
}

#boxRight > ul > li {
    width: 20px;
    height: 16px;
    background: url("../img/icons.png");
    background-size: 80px;
}

#boxRight > ul > li:nth-child(1) {
    background-position: -60px 0
}

#boxRight > ul > li:nth-child(2) {
    background-position: -37px 0
}

#boxRight > ul > li:nth-child(3) {
    background-position: -17px 0
}

#boxRight > ul > li:nth-child(4) {
    background-position: 0 0
}

#boxRight > ul > li:hover {
    background-position-y: -23.5px
}

/*************************************华丽丽的分割线*************************************/


##css2

body, ul ,input{
    margin: 0;
    padding: 0
}
ul{list-style: none}

标签：拉勾,height,width,background,position,boxLeft,size
From： https://www.cnblogs.com/YueZhenkai/p/LaGouWang.html

相关文章

赞助商

阅读排行