自定义html表单

最新推荐文章于 2021-06-26 14:01:07 发布

Jerry_nl

最新推荐文章于 2021-06-26 14:01:07 发布

阅读量494

点赞数

分类专栏： html5 js css 文章标签：前端

本文链接：https://blog.csdn.net/qq_44937189/article/details/109822324

版权

本文介绍了如何使用自定义HTML表单标签创建一个‘完善个人信息’的页面，包括展示页面效果和上传的代码示例，其中提交按钮具有交互式CSS样式。

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

自定义html表单

小编今天给大家分享一下自定义html表单标签，这样大家在看源代码时，也可以帮助到大家叭！

利用自定义表单标签完成一个“完善个人信息”的页面

哈哈，首先还是给大家先传效果图：

ps:大家要是觉得背景图丑，可以自己换哈；

上传代码

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>完善信息</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- boot -->
    <link type="text/css" rel="stylesheet" href="{sh::PUB}css/font-awesome.min.css">
    <link rel="stylesheet" href="{sh::PUB}sui/css/sm.min.css">
    <link rel="stylesheet" href="{sh::PUB}sui/css/sm-extend.min.css">
    <link rel="stylesheet" href="{sh::PUB}plugin/html5/css/html5.css">
    <style>
        #gu{
            background: url(timg.png);
            background-size: 100% 100%;
        }
        #gg{
            text-align: center;
        }
        #bddd{
        margin: auto;
        background-color:rgba(252, 252, 252, 0.5);
        border: 0px solid black;
        width: 1000px;
        height: 600px; 
        }
        #de{
            margin: auto;
           width: 50%;
           border: 3px;
         padding: 10px;
        }
        #lside{
            float: left;
            width: 200px;
            height: 600px;
          border: 3px ;
        }
        #rside{
            float: right;
           width: 200px;
           height: 600px;
          border: 3px ;
        }
        #cside{
            margin: auto;
           width: 1000px;
           height: 600px;
          border: 3px ;
        }
        #left{
            float: left;
            width: 50px;
            height: 200px;
          border: 2px ;
        }
        #right{
            float: right;
           width: 50px;
           height: 200px;
          border: 2px ; 
        }
        /* 确认div型按钮 */
		.div2 {
			float: left;
			width: 100px;
			height: 40px;
			background: -webkit-linear-gradient(left top, red,blue);
			border-radius:10px;
			font-size:17px;
			line-height: 38px;
			color:white;
			letter-spacing: 2px;
			text-align: center;
			-webkit-box-shadow: inset 0 0 20px rgb(176,228,14,0.9);
			padding: 2px;
			cursor: pointer;
		}
		.div2:hover{
			background: -webkit-linear-gradient(top left,blue,red);
			font-size: 14px;
        }
        /**
		 * 输入框组
		 */
		input{
			width: 200px;
			height: 30px;
			border-radius:10px;
			font-size:17px;
			color:black;
			font-family: '微软雅黑';
			cursor: pointer;
			outline: none;
			border: 1px solid 	#D8D8D8;
			text