文章目录
前言
哈喽同学们大家好,本节我们开始学习html5基础部分------表单相关学习,下面有具体案例和素材同学们自行取用
一、思维导图
二、案例一
代码如下(示例):
<style>
*{
margin: 0;
padding: 0;
}
input{
border: 0;
outline: 0;
background-color: transparent;
}
.search{
width: 650px;
height: 40px;
border: 2px solid rgb(117, 121, 238);
margin: 150px auto;
border-radius: 8px;
overflow: hidden;
}
.search input{
float: left;
height: 40px;
}
#search{
width: 530px;
margin: 0 10px;
}
#submit{
width: 100px;
background-color: rgb(117, 121, 238);
color: #fff;
}
#submit:hover{
background-color: blue;
cursor: pointer;
}
</style>
<body>
<form action="http://www.baidu.com/s">
<div class="search">
<input id="search" name="wd" type="text">
<input id="submit" type="submit" value="百度一下">
</div>
</form>
</body>
2.案例二
代码如下(示例):
* {
margin: 0;
padding: 0;
}
input {
border: 0;
outline: 0;
background-color: transparent;
}
.wrap{
width: 400px;
height: 400px;
/* background-color: antiquewhite; */
overflow: hidden;
margin: 30px ;
}
.wrap .pass{
width: 100%;
height: 60px;
background-color: rgb(242, 239, 239);
margin-bottom: 20px;
color: rgb(198, 27, 27);
}
.wrap .phone{
height: 50px;
line-height: 50px;
/* background-color: coral; */
}
.wrap .phone .left{
color: rgb(6, 147, 93);
font-weight: bold;
font-size: 15px;
float: left;
}
.wrap .phone .right{
color: rgb(127, 124, 124);
font-weight: bold;
float: right;
margin-right: 10px;
font-size: 15px;
}
.wrap .submit{
width: 100%;
height: 60px;
background-color: rgb(17, 142, 104);
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
.wrap ._submit{
width: 100%;
height: 60px;
color: rgb(75, 73, 73);
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
</style>
<div class="wrap">
<input class="pass" name="wd" type="text" placeholder="请输入常用手机号/邮箱">
<input class="pass" name="wd" type="text" placeholder="请输入密码">
<div class="phone">
<a class="left" href="#">手机验证码登录</a>
<a class="right" href="#">忘记密码</a>
</div>
<form action="http://www.baidu.com/s">
<input class="submit" type="submit" value="登录">
<input class="_submit" type="submit" value="立即注册">
</form>
</div>