登录页面的开发-样式开发

需求分解

1、使用css样式设计整体框架样式

2、设置控件样式

3、设置文字样式

 

 

1、绘制外边框

2、设置外边框横向居中显示

3、设置外边框上边距

4、设计文本框居中

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--magin边距设置-->
<div style="width: 400px;height: 500px;border: 2px solid #000000; margin: auto; margin-top: 200px">

</div>

</body>
</html>

知识点补充



给区块设置边框




border: 1px solid black;




给控件设置圆角边框




border-radius:5px


 






 




  <div style="font-size: 30px;line-height: 100px;font-weight: bold;text-align: center">
    注册用户
  </div>






 




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--magin边距设置-->
<div style="width: 400px;height: 500px;border: 2px solid #000000; margin: 200px auto auto;text-align: center;">
  <div style="font-size: 35px;line-height: 120px;font-weight: bold" ;>
    注册用户
  </div>
  <div style="width: 300px;margin-left: auto;margin-right: auto">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">用户名:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left;"><input type="text"
                                                                                                  placeholder="请输入用户名"
                                                                                                  style="width: 220px">
    </div>
  </div>
  <div style="width: 300px; margin-left: auto;margin-right: auto">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">密码:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left"><input type="password"
                                                                                                 placeholder="请输入密码"
                                                                                                 style="width: 220px">
    </div>
  </div>
  <div style="width: 300px;margin-left: auto;margin-right: auto">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">确认密码:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left"><input type="text"
                                                                                                 placeholder="请再次输入密码"
                                                                                                 style="width: 220px;">
    </div>
  </div>
  <div style="margin-left: auto; margin-right: auto ; width: 300px;">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">性别:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left">男:<input
      type="radio">&nbsp;女:<input type="radio"></div>
  </div>
  <div style="margin-left: auto; margin-right: auto ;width: 300px;">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">爱好:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left">
      <input type="checkbox" name="运动">运动&nbsp;
      <input type="checkbox" name="旅游">旅游&nbsp;
      <input type="checkbox" name="美食">美食
    </div>
  </div>
  <div style="margin-left: auto; margin-right: auto ;width: 300px;">
    <div style="width: 80px;height: 50px;line-height: 50px;text-align: left;float: left">学历:</div>
    <div style="width: 220px;height: 50px;line-height: 50px;text-align: left;float: left">
      <select name="学历">
        <option>高中</option>
        <option>大专</option>
        <option>本科</option>
        <option>硕士</option>
        <option>博士</option>
      </select>
    </div>
  </div>


  <div style="width: 150px;height: 50px;;line-height: 50px;text-align: right;float: left"><input type="button"
                                                                                                 value="注册"
                                                                                                 style="width: 90px;height: 40px;background: #45f3ff;color: white;border: 1px solid white;border-radius: 5px">
  </div>


  <div style="margin-left:60px;width: 150px;height: 50px;line-height: 50px;text-align: left;float: left;"><input
    type="submit" style="width: 90px;height: 40px;border: 1px solid white;" value="重置"></div>


</div>

<div style="margin-left: auto; margin-right: auto ;width: 300px;"></div>


</div>
</body>
</html>






 


 


 


 


 


 






            

            
posted @ 
2023-02-10 14:40 
刘品水 
阅读(36) 
评论(0) 
编辑 
收藏 
举报