注册

最新推荐文章于 2023-07-26 12:19:12 发布

Jeri小红薯

最新推荐文章于 2023-07-26 12:19:12 发布

阅读量118

点赞数

分类专栏： java web 前端文章标签：注册

本文链接：https://blog.csdn.net/qq_43557758/article/details/89606176

版权

java web 前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html主要代码：
使用好div，使需要美化的每个部分成独立单元，利于样式处理

  <body>
    <h1>Register</h1>
    <div id="content">    
      <form name="register" action="reg" method="post">
          <input type="text" placeholder="姓名" name="name">
          <label for="male">男</label>	//label使按钮本身连接提示文字，使点击字时也能选上
          <input type="radio" id="male" name="gender"  checked>
          <label for="female">女</label>
          <input type="radio" id="female" name="gender" >
          <select name="college">
          <option value="学院" selected>学院</option>
          <option value="物联网院">物联网院</option>
          <option value="企管院">企管院</option>
          <option value="机电院">机电院</option>
          </select>
          <input type="text" placeholder="学号" name="id">
          <input type="text" placeholder="QQ号" name="QQaccount">
          <input type="text" placeholder="号码" name="phonenumber">
          <input type="password" placeholder="密码" id="password1" name="password1">
          <input type="password" placeholder="确认密码" id="password2" name="password2">
        <input type="reset" value="reset"/>
        <input type="submit" value="register" onclick="submit();" />
    </div>
  </body>

css代码如下：

body{
  background: url('../images/R_background.jpg');
  text-align: center;
}
h1{
  padding-top: 20px;
  font-size: 50px;
  letter-spacing: 5px;		//字体间隙
}
input[type="radio"]{
  display: inline-block;	//不占一整行，能和其它公用一行
  font-size: 30px;
}
input[type="text"],input[type="password"]{
  width: 90%;
  padding: 15px;
  border-radius: 25px;		//边框圆角
  outline: none;
  margin-bottom: 20px;
  font-size: 14px;                        
  background: rgba(255,255,255,0.4);  
}
#content{
  width: 25%;		// %表示在大一级的范围内的百分之多少
  margin: 10px auto;
  border-radius: 1px;
  padding: 10px;
}
input[type="submit"],input[type="reset"]{
  width: 75px;
  height: 50px;
  background: rgba(100,149,237,0.4);   //红绿蓝+透明度（0~1越小越透明）
  border: none;		//设置了圆角边框故把鼠标点击时的边框设为无
  font-size: 20px;
  color: white;
  font-weight:500;
  margin: 10px 20px 0 auto;
  display: inline-block;
  cursor: pointer;
}

用到外来字体（先下载好）
效果如：

css代码：

@font-face{
	font-family: 'myfond';		//可定义字体为自己想要的名字
	src:url('../font/Aucoinextbol.Ttf');	//引入字体
}
//比如在标题里用到这个字体
h1{
  padding-top: 30px;
  font-size: 50px;
  font-family: 'myfond';	//写上自己定义的名字
  letter-spacing: 5px;
}

学习过程中有许多小疑惑，但大多没留下网址来
唯一幸存的:
url、src、href定义以及使用区别

第一篇博客还是把代码基本贴出来了，安心，嘻嘻嘻
写完这篇之后发现内容实在平淡，继续学习呀！
js、jQuery、ajax还在学习当中！加油!

Jeri小红薯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册

html主要代码：使用好div，使需要美化的每个部分成独立单元，利于样式处理 <body> <h1>Register</h1> <div id="content"> <form name="register" action="reg" method="post"> <i...
复制链接

扫一扫

专栏目录