.main { height: 300px; width: 1130px; margin-left: 20px; margin-top: 20px; } /* 左边的css */ .fenlei { border: 1px solid #e1e1e1; width: 813px; height: 275px; float: left; } /* 上 */ .fenlei .text { height: 40px; line-height: 40px; background-color: #f1f1f1; padding: 0px 14px; } .fenlei .text .text-l { font-size: 15px; color: #9c9c9c; font-weight: 300 } .fenlei .text .text-r { color: #006699; font-size: 10px; } .fenlei .text .text-r i { font-size: 10px; } /* 下 */ .menu { padding-left: 18px; } .menu li { width: 184px; height: 20px; margin-right: 14px; padding-top: 10px; padding-bottom: 9px; font-size: 10px; float: left; } .menu li i { color: #9c9c9c; font-size: 10px; } .menu li a { color: #4c4c4c; padding-left: 16px; } /* 右边的css */ .register { width: 300px; border: 1px solid #e1e1e1; float: right; } /* 登录注册 */ .register .register-t { width: calc(150px + 150px); height: 40px; line-height: 40px; font-size: 14px; color: #3e3e3e; text-align: center; } .register .register-t .register-t-l { font-weight: bold; width: 149px; display: block; float: left; border-bottom: 1px solid #fff; border-right: 1px solid #fff } .register .register-t .register-t-r { width: 149px; display: block; float: right; background-color: #f5f6f5; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; } /* 下 */ .register-b { font-size: 12px; width: 274px; height: 213.431px; padding: 10px 12px 10px 12px; } /* 两个框 */ .register-b .input { width: 272px; height: calc(58px + 58px); font-size: 14px; color: #cccccc; } .register-b .input .name { height: 18px; width: 262px; padding: 9px 4px; border: 1px solid #d5d5d5; float: left; margin: 10px 0px; } .register-b .input .password { height: 18px; width: 262px; padding: 9px 4px; border: 1px solid #d5d5d5; float: left; margin: 10px 0px; } /* zhong */ .register-b .zhuce { width: 274px; height: 19.44px; display: block; } .zhuce li { width: 60px; height: 16px; float: right; } .zhuce li ::after { content: " "; width: 1px; height: 10px; background: #9c9c9c; display: inline-block; margin-left: 6px; } .zhuce li:first-child ::after { width: 0 !important; } .zhuce li a { display: block; color: #006699; } /* 两个登录按钮 */ .button { width: 274px; height: 28px; margin-bottom: 10px; } .button .denglu { text-align: center; color: #fff; font-size: 14px; width: 130px; height: 28px; line-height: 28px; background: #3086f2; border: none; border-radius: 2px; font-weight: 700; float: left } .button .weixin { border-radius: 2px; width: 130px; height: 28px; text-align: center; border: none; background-color: #00be00; margin-left: 10px; float: left } .button .weixin img { display: inline-block; width: 22px; height: 18px; font-size: 22px; margin-top: 5px } .button .weixin .wx { border: none; background-color: #00be00; font-size: 14px; color: #fff; font-weight: 700; } /* QQ那排 */ .bottom { height: 20.1px; width: 274px; padding-top: 10px; margin-bottom: 10px; } .bottom li { width: 60px; height: 20px; float: left; font-size: 12px } .bottom li::after { content: " "; width: 0.5px; height: 10px; display: inline-block; background: #d0d0d0; } .bottom li a { display: inline-block; color: #3c3c3c; } .bottom li a img { display: inline-block; width: 15px; height: 15px; } .bottom li a :last-child { font-size: 12px; color: #126395; }