HTML CSS 个人注册界面实现边框上加文字

最新推荐文章于 2024-09-23 10:09:27 发布

Dogboss233

最新推荐文章于 2024-09-23 10:09:27 发布

阅读量2.7k

点赞数 2

分类专栏：网页设计 CSS 文章标签：网页设计 html5 css

本文链接：https://blog.csdn.net/m0_51393229/article/details/121533286

版权

网页设计同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用HTML和CSS构建一个简单的个人注册界面。内容包括设置背景图片、调整元素间距、使用fieldset和legend添加边框及文字，以及通过表格布局输入字段。虽然技术含量不高，但重点在于理解和应用CSS的padding和margin属性。

摘要由CSDN通过智能技术生成

实例:制作个人注册界面

效果:

个人注册界面

HTML CSS 代码实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>个人注册</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style>
  body{
	  background-image:url("images/bg03.jpg");
	  background-repeat:no-repeat;
      background-size:600px 400px;
  }
  
  .css1{ font-family:"微软雅黑";
        font-size:17px;
		color:#FFF;
      }
   .css2{ width:300px;
          height:100px;
		  line-height:37px;
          border-color:#FFF;
		  border-width:thin;
		  margin:30px 4px 30px 40px;
		  padding:0px 5px;
   }
   .css3{ position:absolute;
          left:240px;
          top:350px;
   }
   fieldset{
       padding:75px 20px 40px 40px;
       margin:20px 20px 5px 10px;
   }
    table {
        width: 400px;
        border-collapse: separate;
        border-spacing: 24px;
    }
</style>
</head>
<body> 
<div class="css2">
   <fieldset >
     <legend><span class="css1">个人注册</span></legend>
     
   <table>
      <tr>
         <td>
            <span class="css1"> 用户名称：</span><input/>
         </td>
      </tr>
      <tr>
         <td>
           <span class="css1"> 密码：</span><input />
         </td>
      </tr>
   </table></fieldset>
    <img class="css3"src="images/btn.jpg" />
</div>
</body>
</html>