注册界面模板HTML+CSS

页面效果:

今天用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" />
<title>注册界面</title>
</head>
<style>
	body {
    padding:0;  /*去除内边距袭*/
    border:0;   /*去除边框*/
    margin:0;   /*去除外边距*/
	}
	#page{
		background-image:url("./1.jpg");
		height:1000px;
		width:auto;
		position:relative;
	}
	#register{
		background-image:url("./2.png");
		height:318px;
		width:400px;
		margin-left:500px;
		margin-top:250px;
		position:absolute;
		text-align:center;
	}
	#header{
		font-family:Tahoma, Geneva, sans-serif;
		font-size:25px;
		color:#3083EF;
	}
	 hr{
         height: 2px;
		 width:300px;
         background-color:#75B6F6 ;   
            
      }
	  #xinxi{
		  font-family:Tahoma, Geneva, sans-serif;
		  font-size:15px;
		  color:#A3CCFB;
		  line-height:10px;
	  }
	  #btn{
		  background-color:#0068D0;
		  border:0px;
		  color: seashell;
		  text-align: center;
		  height:30px;
		  width:100px;
	  }

</style>
<body>
<div id="page">
	<div id="register">
    	<p id="header" style="margin-bottom:2px;">用户注册页面</p>
    	<hr />
        <div id="xinxi">
        	<div style="margin-top:15px;">用户名:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">确&nbsp;&nbsp;&nbsp;认:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">姓&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
        </div>
        <div style="margin-top:25px;">
        	<button id="btn">提交注冊</button>
        </div>
    </div>
</div>

</body>
</html>

 

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可视化仪表盘模板是一种用于展示数据可视化的界面模板,通常使用HTMLCSS和JavaScript来构建。echarts是一个常用的数据可视化库,具有丰富的图表类型和交互功能。以下是一个基本的可视化仪表盘模板的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可视化仪表盘</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.css"> <style> #chart-container { width: 800px; height: 600px; margin: 0 auto; } </style> </head> <body> <div id="chart-container"></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart-container')); // 定义数据 var data = { categories: ['类别1', '类别2', '类别3'], values: [80, 50, 70] }; // 设置图表配置项 var option = { title: { text: '可视化仪表盘' }, tooltip: {}, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: '数据', type: 'bar', data: data.values }] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 以上代码使用了CDN引入了echarts库,并在`#chart-container`的div中创建了一个宽800px、高600px的图表容器。通过JavaScript初始化echarts实例,并通过设置配置项和数据,绘制出一个柱状图。这只是一个简单示例,实际应用中可以根据需要自定义配置项、数据源和图表类型,以实现更多的数据可视化效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值