一个简单的小页面

Posted chengxiangboke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的小页面相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<style type="text/css">
body{
 height:100%;
 width: 100%;
 margin: 0px;padding: 0px;
 background:url("../image/timg3.jpg") no-repeat;
 background-size: 1500px 1000px;
    overflow: hidden;
}
.head{
    
}
.btn{
 display: inline-block;
    
}
.item p
{
 color: #787878;
}
.item{
 margin: 10px 10px;
}
.item input
{
 padding: 5px 10px;
}
.main{
 margin: 200px 550px;
    width: 300px;
    height: 300px;
    background-color: #dddddd;
}
audio{
 
}
</style>
</head>
<body>
<div class="head"><h1>个人登录主页</h1></div>
<div class="bofa">
<audio src="../music/小旭音乐 - 临安初雨(纯音乐).mp3" controls="controls" loop="true">
Your browser does not support the audio element.
</audio>
</div>
<div class="main">
 <form action="firstpag.html" method="get">
      <div class="item">
      <P>input your name:</P>
      <input type="text" name="name" placeholder="your name" maxlength="10" minlength="1" required>
      </div>
      <div class="item">
      <p>input your password:</p>
      <input type="password" name="password" maxlength="10" minlength="6" placeholder="your password"required>
      </div>
      <div class="item">
      <input type="radio" name="sex" value="man" />男
      <input type="radio" name="sex" value="woman" />女
      </div>
      <div class="item">
      喜好:
      <input type="checkbox" name="interset" value="美食" />美食
      <input type="checkbox" name="interset" value="音乐" />音乐
      <input type="checkbox" name="interset" value="运动" />运动
      <input type="checkbox" name="interset" value="动漫" />动漫
      <input type="checkbox" name="interset" value="旅游" />旅游
      </div>
      <div class="item">
        <div class="btn">
          <button >提交</button>
        </div>
        <div class="btn">
          <input type="reset" />
        </div>
      </div>
 </form>
 </div>
 
</body>
</html>

以上是关于一个简单的小页面的主要内容,如果未能解决你的问题,请参考以下文章

一个简单的小项目 —— 我的博客系统

一个简单的小项目 —— 我的博客系统

一个简单的从web页面获取数据插入数据库的小程序

从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别

模拟web请求——简单的小程序提高工作效率

Echarts百度Echarts的使用入门+两个简单的小例子+心得