下图一,完成样式
H5代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ注册</title> <link rel="stylesheet" href="CSS/QQ.css"> </head> <body> <div class="left"> <img src="images/one.jpg" width="480"> </div> <div class="header"> <div class="top"> <ul> <li><img src="images/QQ.jpg" width="28" height="22"><a href="#">QQ靓号</a></li> <li><img src="images/icon.png"><a href="#">邮箱账号</a></li> <li><a href="#">简体中文</a></li> <li><a href="#">意见反馈</a></li> </ul> </div> </div> <div class="right"> <div class="main"> <div class="one"> <h4>欢迎注册QQ</h4> </div> <div class="two"> 每一天,乐在沟通。 </div> <div class="there"> <a href="#">免费靓号</a> </div> <form action="" method=""> <div class="input-outer"> <input type="text" name="text" id="text" maxlength="8"><span>昵称</span> </div> <div class="input-outer"> <input type="password" id="password" maxlength="16"><span>密码</span> </div> <div class="input"> <div class="input-type"> <select name="" id=""> <option value="">中国+86</option> <option value="">中国香港+852</option> <option value="">中国台湾+886</option> </select> </div> <div class="input-phone"> <input type="text" maxlength="11" minlength="11"><span>手机</span> </div> <div class="six"> <p>可通过该手机号找回密码</p> </div> </div> <div class="sub"> <input type="submit" value="立即注册"> </div> </form> <div class="type-radio"> <input type="radio" checked><span>同意开通QQ空间</span> <br> <input type="radio" checked><span>我已阅读并同意相关服务条款和隐私政策</span> </div> <div class="footer"> Copyright <span>©</span> 1998-2018Tencent All Rights Reserved </div> </div> </div> </body> </html>
CSS样式表代码块
* { margin: 0; padding: 0; } body { background-color: #ffffff; } li { list-style: none; } .left { width: 480px; float: left; } .header { width: 1040px; height: 100px; float: right; } .top { float: right; } .header li { float: left; padding: 0 50px; } .header li a { color: #c1c1c1; text-decoration: none; line-height: 100px; } .header li a:hover { font-weight: 400; color: black; } .right { width: 1040px; float: left; } .main { width: 500px; margin: 0 auto; } .one h4 { font-size: 44px; font-weight: 400; margin-bottom: 20px; } .two { font-size: 28px; color: #333333; margin-bottom: 64px; float: left; } .there { float: right; margin-bottom: 64px; } .there a { font-size: 28px; text-decoration: none; color: #359eff; } .there a:hover { color: #094683; } .input-outer input { height: 50px; width: 438px; margin-bottom: 40px; border-radius: 10px; border: 1px solid #c1c1c1; /*color: #c1c1c1;*/ font-size: 20px; } .input-outer span, .input-phone span { font-size: 25px; text-align: center; line-height: 50px; color: #333333; } .input-type select { height: 50px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; float: left; } .input-phone input { height: 50px; width: 268px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; margin-left: 20px; } .six p { color: #c1c1c1; font-size: 14px; } .sub input { height: 50px; width: 440px; margin: 40px 0; font-size: 20px; color: #ffffff; background-color: #3588ff; border: 1px solid #c1c1c1; border-radius: 10px; } .type-radio span { font-size: 14px; color: #c1c1c1; } .footer { margin: 40px 0; text-align: center; color: #c1c1c1; }
下面是需要用到的图片(可以自己添加喜欢的图片)
希望能够点赞