果梗小时 2022-03-22 20:49 采纳率: 100%
浏览 35
已结题

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

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

这是给出的样例图

img

这是我目前完成的情况

img

这是我的代码
#




```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<p>个人资料</p>
<span>基本资料&emsp;&emsp;头像照片</span>
<hr>
<form>
    <p>亲爱的&emsp;<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 style="color:grey" ><font size="1">&emsp;&emsp;&emsp;&emsp;&emsp;*昵称填写须知:与淘宝业务或卖家品牌冲突的昵称,淘宝将有可能回收</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" class="text-align"><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 style="color:grey">(出生年份为保密)</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" style="background-color:orange;border-color:orange;color:white;aglin:center">提交</button>
</form>
</body>
</html>
  • 写回答

5条回答 默认 最新

  • 关注

    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>基本资料&emsp;&emsp;头像照片</span>
            <hr>
            <form style="padding-left: 20px;">
                <p style="padding-left: 20px;">亲爱的&emsp;<span><strong>晨**********2</strong></span>,填写真实的资料,有助于好友找到你哦。</p>
                <br>
                <span class="tk"></span><label class="tp">当前头像:</label>
                <img src="../taobaotouxiang.png" id="taobaotouxiang">
                <br>
                <br>
                <span class="tk">*</span><label class="tp" for="id">昵称:</label>
                <input type="text" width="1000px" id="id">
                <p style="color:grey;padding-left: 100px;font-size: 70%;">*昵称填写须知:与淘宝业务或卖家品牌冲突的昵称,淘宝将有可能回收
                </p>
                <br>
                <span class="tk"></span><label class="tp" for="name">真实姓名:</label>
                <input type="text" id="name" width="300px">
                <br>
                <br>
                <span class="tk">*</span><label class="tp" for="sex">性别:</label>
                <input type="radio" id="sex"><input type="radio" id="sex" class="text-align"><br>
                <br>
                <span class="tk"></span><label class="tp" 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 style="color:grey">(出生年份为保密)</span>
                <label for="constellation">星座:</label>
                <select size="1" id="constellation">
                    <option>**********</option>
                </select>
                <br>
                <br>
                <span class="tk"></span><label class="tp" 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 class="tk"></span><label class="tp" 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>
    
    

    img

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    1人已打赏
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 3月31日
  • 已采纳回答 3月23日
  • 创建了问题 3月22日

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名