hr标签拐弯和form标签中的input文字域对齐

代码客栈 2024年04月16日 10:03 课程设计 1

我是一名在校学生，这学期才开始接触HTML，要我们写出类似淘宝个人资料页面但是，我碰到了一些不能解决的问题： 1.图中“个人资料”上的那个能拐弯的水平线如何编译 2.如何让form表单中的每个文字域像样例图那样对齐 3.我编译的button按钮细看还是和样例图不一致（我已经在百度找过很多方法了，但是由于接触太浅，没能按照那些方法成功编译）

这是给出的样例图

这是我目前完成的情况

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body >
<p>个人资料</p>
<span>基本资料  头像照片</span>
<hr>
<form>
  <p>亲爱的 <span><strong>晨**********2</strong></span>，填写真实的资料，有助于好友找到你哦。</p><br>
      <label >当前头像：</label>
    <img src="../taobaotouxiang.png">
  <br><br>
      <label for="id">* 昵称：</label>
    <input type="text" width="1000px" id="id" >
  <p ><font size="1">     *昵称填写须知：与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能回收</font></p>
  <br>
  <label for="name">真实姓名：</label>
  <input type="text" id="name" width="300px" >
  <br>
  <br>
      <label for="sex" >*性别：</label><input type="radio" id="sex">男 <input type="radio" id="sex" >女
  <br>
  <br>
  <label for="birthday">生日：</label>
  <select size="1" name="年" id="birthday">
    <option >年</option>
  </select>
  <select size="1" name="月">
    <option >月</option>
  </select>
  <select size="1" name="日">
    <option >日</option>
  </select>
  <span >（出生年份为保密）</span>
  <label for="constellation" >星座：</label>
  <select size="1" id="constellation">
    <option>**********</option>
  </select>
  <br>
  <br>
  <label for="stay">居住地：</label>
  <select size="=1" name="stay" id="stay">
    <option>
    </option>
  </select>
  <select size="1" name="stay" id="stay">
    <option>
    </option>
  </select>
  <select size="1"name="stay" id="stay">
    <option></option>
  </select>
  <br>
  <br>
  <label for="hometown">家乡：</label>
  <select size="=1" name="hometown" id="hometown">
    <option>
    </option>
  </select>
  <select size="1">
    <option>
    </option>
  </select>
  <select size="1">
    <option></option>
  </select>
  <br>
  <br>
  <hr>
  <button type="submit" >提交</button>
</form>
</body>
</html>

共2条回复我来回复

毕设货栈

这个人很懒，什么都没有留下～

1.个人资料上的那个能拐弯的水平线用border边框来做 2.form表单中的项目文字和前面的*号都放到固定宽度的标签中就对齐了 3.样例图中的button按钮应该是个图片用 <input type="image" src="submit.png"> 图片自己做吧

你题目的解答代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      /*hr标签拐弯用border边框来做*/
      #hp {
        border-bottom: 1px solid #999;
      }
      #hp span{
        display: inline-block;
        margin-left: 10px;
        margin-bottom: -1px;
        padding: 5px;
        border: 1px solid #999;
        border-bottom-color: #fff;
      }
      #taobaotouxiang {
        vertical-align: top;
      }
      .tk {
        display: inline-block;
        width: 20px;
        text-align: center;
      }
      .tp {
        display: inline-block;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <p id="hp"><span>个人资料</span></p>
    <span>基本资料  头像照片</span>
    <hr>
    <form >
      <p >亲爱的 <span><strong>晨**********2</strong></span>，填写真实的资料，有助于好友找到你哦。</p>
      <br>
      <span ></span><label >当前头像：</label>
      <img src="../taobaotouxiang.png" id="taobaotouxiang">
      <br>
      <br>
      <span >*</span><label for="id">昵称：</label>
      <input type="text" width="1000px" id="id">
      <p >*昵称填写须知：与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能回收
      </p>
      <br>
      <span ></span><label for="name">真实姓名：</label>
      <input type="text" id="name" width="300px">
      <br>
      <br>
      <span >*</span><label for="sex">性别：</label>
      <input type="radio" id="sex">男
      <input type="radio" id="sex" >女
      <br>
      <br>
      <span ></span><label for="birthday">生日：</label>
      <select size="1" name="年" id="birthday">
        <option>年</option>
        <option>1900年</option>
        <option>xxxx年</option>
        <option>2022年</option>
      </select>
      <select size="1" name="月">
        <option>月</option>
        <option>1月</option>
        <option>12月</option>
      </select>
      <select size="1" name="日">
        <option>日</option>
        <option>1日</option>
        <option>31日</option>
      </select> <span >（出生年份为保密）</span>
      <label for="constellation">星座：</label>
      <select size="1" id="constellation">
        <option>**********</option>
      </select>
      <br>
      <br>
      <span ></span><label for="stay">居住地：</label>
      <select size="=1" name="stay" id="stay">
        <option></option>
        <option>xxxxxxxxxxxx</option>
      </select>
      <select size="1" name="stay" id="stay">
        <option></option>
      </select>
      <select size="1" name="stay" id="stay">
        <option></option>
      </select>
      <br>
      <br>
      <span ></span><label for="hometown">家乡：</label>
      <select size="1" name="hometown" id="hometown">
        <option></option>
        <option>xxxxxxxxxxxx</option>
      </select>
      <select size="1">
        <option></option>
      </select>
      <select size="1">
        <option></option>
      </select>
      <br>
      <br>
      <hr>
      <input type="image" src="submit.png">
    </form>
  </body>

</html>

0条评论

代码工厂
这个人很懒，什么都没有留下～
评论

使用legend标签，fieldset标签，对齐是所以table标签，设置td的对齐方式为左对齐。

0条评论

发表回复

登录后才能评论

hr标签拐弯和form标签中的input文字域对齐

回复

发表回复

随便看看

热门回答