这题我是用盒子模型来做的，分为左右2个盒子，左浮动与右浮动就可以完美的把盒子的位置给摆好
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1_2</title> <style> *{ padding: 0px; margin: 0px; } .box{ width: 500px; height: 200px; margin: auto; } .left{ width: 180px; height: 200px; float: left; } .right{ width: 300px; height: 200px; float: right; border: 1px solid #000000; } .p1{ font-family: "黑体"; font-size: 20px; } a{ text-decoration: none; } .p2{ background-color: #F1F1F1; } .header{ width: 300px; height: 50px; background-color: #EEE0E5; font-size: 16px; text-align: center; line-height: 50px; } .footer{ text-align: center; } input{ height: 20px; color: #AEAEAE; } button{ width: 45px; } a{ color: black; } </style> </head> <body> <div class="box"> <div class="left"> <p class="p1">手机扫描，安全登录</p> <center> <img src="../img/1_2pic.png" alt="二维码图片"> </center> <p class="p2">请使用<a href="#">手机app</a>扫描登录</p> </div> <div class="right"> <div class="header"> <p>会员登录</p> </div> <div class="footer"> <br /> <form> <p>用户名：<input type="text" value="请输入用户名"></p><br /> <p>密 码：<input type="text" value="请输入密码名"></p><br /> <button><a href="new.html">登录</a></button> <button>取消</button> </form> </div> </div> </div> </body> </html>图片自己去把路径写对了就可以了 这里我给大家补充一些知识： a{ text-decoration: none; } 清除超链接的下划线 line-height: 50px; 和height:50px;高度相同时文字会垂直居中 空格有2种符号&nbsq,&emsp
