步骤 2 : 布局 步骤 3 : 纯html 步骤 4 : 加上样式 步骤 5 : 样式讲解 步骤 6 : 再整合在一起 <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.registerDiv{
margin: 10px 20px;
text-align: center;
}
table.registerTable{
color: #3C3C3C;
font-size: 16px;
table-layout: fixed;
margin-top: 50px;
}
table.registerTable td{
padding: 10px 30px;
}
table.registerTable input{
border: 1px solid #DEDEDE;
width: 213px;
height: 36px;
font-size: 14px;
}
table.registerTable button{
width: 170px;
height: 36px;
border-radius: 2px;
color: white;
background-color: #C40000;
border-width: 0px;
}
td.registerTip{
font-weight: bold;
}
td.registerTableLeftTD{
width: 300px;
text-align: right;
}
td.registerTableRightTD{
width: 300px;
text-align: left;
}
td.registerButtonTD{
text-align: center;
}
</style>
<div class="registerDiv">
<table align="center" class="registerTable">
<tbody><tr>
<td class="registerTip registerTableLeftTD">设置会员名</td>
<td></td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆名</td>
<td class="registerTableRightTD"><input placeholder="会员名一旦设置成功,无法修改" name="name" id="name"> </td>
</tr>
<tr>
<td class="registerTip registerTableLeftTD">设置登陆密码</td>
<td class="registerTableRightTD">登陆时验证,保护账号信息</td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆密码</td>
<td class="registerTableRightTD"><input type="password" placeholder="设置你的登陆密码" name="password" id="password"> </td>
</tr>
<tr>
<td class="registerTableLeftTD">密码确认</td>
<td class="registerTableRightTD"><input type="password" placeholder="请再次输入你的密码" id="repeatpassword"> </td>
</tr>
<tr>
<td class="registerButtonTD" colspan="2">
<a href="#nowhere"><button>提 交</button></a>
</td>
</tr>
</tbody></table>
</div>
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。
学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。
学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<div class="registerDiv">
<table align="center" class="registerTable">
<tbody><tr>
<td class="registerTip registerTableLeftTD">设置会员名</td>
<td></td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆名</td>
<td class="registerTableRightTD"><input placeholder="会员名一旦设置成功,无法修改" name="name" id="name"> </td>
</tr>
<tr>
<td class="registerTip registerTableLeftTD">设置登陆密码</td>
<td class="registerTableRightTD">登陆时验证,保护账号信息</td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆密码</td>
<td class="registerTableRightTD"><input type="password" placeholder="设置你的登陆密码" name="password" id="password"> </td>
</tr>
<tr>
<td class="registerTableLeftTD">密码确认</td>
<td class="registerTableRightTD"><input type="password" placeholder="请再次输入你的密码" id="repeatpassword"> </td>
</tr>
<tr>
<td class="registerButtonTD" colspan="2">
<a href="#nowhere"><button>提 交</button></a>
</td>
</tr>
</tbody></table>
</div>
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。
学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.registerDiv{
margin: 10px 20px;
text-align: center;
}
table.registerTable{
color: #3C3C3C;
font-size: 16px;
table-layout: fixed;
margin-top: 50px;
}
table.registerTable td{
padding: 10px 30px;
}
table.registerTable input{
border: 1px solid #DEDEDE;
width: 213px;
height: 36px;
font-size: 14px;
}
table.registerTable button{
width: 170px;
height: 36px;
border-radius: 2px;
color: white;
background-color: #C40000;
border-width: 0px;
}
td.registerTip{
font-weight: bold;
}
td.registerTableLeftTD{
width: 300px;
text-align: right;
}
td.registerTableRightTD{
width: 300px;
text-align: left;
}
td.registerButtonTD{
text-align: center;
}
</style>
<div class="registerDiv">
<table align="center" class="registerTable">
<tbody><tr>
<td class="registerTip registerTableLeftTD">设置会员名</td>
<td></td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆名</td>
<td class="registerTableRightTD"><input placeholder="会员名一旦设置成功,无法修改" name="name" id="name"> </td>
</tr>
<tr>
<td class="registerTip registerTableLeftTD">设置登陆密码</td>
<td class="registerTableRightTD">登陆时验证,保护账号信息</td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆密码</td>
<td class="registerTableRightTD"><input type="password" placeholder="设置你的登陆密码" name="password" id="password"> </td>
</tr>
<tr>
<td class="registerTableLeftTD">密码确认</td>
<td class="registerTableRightTD"><input type="password" placeholder="请再次输入你的密码" id="repeatpassword"> </td>
</tr>
<tr>
<td class="registerButtonTD" colspan="2">
<a href="#nowhere"><button>提 交</button></a>
</td>
</tr>
</tbody></table>
</div>
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。
学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.registerDiv{
margin: 10px 20px;
text-align: center;
}
table.registerTable{
color: #3C3C3C;
font-size: 16px;
table-layout: fixed;
margin-top: 50px;
}
table.registerTable td{
padding: 10px 30px;
}
table.registerTable input{
border: 1px solid #DEDEDE;
width: 213px;
height: 36px;
font-size: 14px;
}
table.registerTable button{
width: 170px;
height: 36px;
border-radius: 2px;
color: white;
background-color: #C40000;
border-width: 0px;
}
td.registerTip{
font-weight: bold;
}
td.registerTableLeftTD{
width: 300px;
text-align: right;
}
td.registerTableRightTD{
width: 300px;
text-align: left;
}
td.registerButtonTD{
text-align: center;
}
</style>
<div class="registerDiv">
<table align="center" class="registerTable">
<tbody><tr>
<td class="registerTip registerTableLeftTD">设置会员名</td>
<td></td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆名</td>
<td class="registerTableRightTD"><input placeholder="会员名一旦设置成功,无法修改" name="name" id="name"> </td>
</tr>
<tr>
<td class="registerTip registerTableLeftTD">设置登陆密码</td>
<td class="registerTableRightTD">登陆时验证,保护账号信息</td>
</tr>
<tr>
<td class="registerTableLeftTD">登陆密码</td>
<td class="registerTableRightTD"><input type="password" placeholder="设置你的登陆密码" name="password" id="password"> </td>
</tr>
<tr>
<td class="registerTableLeftTD">密码确认</td>
<td class="registerTableRightTD"><input type="password" placeholder="请再次输入你的密码" id="repeatpassword"> </td>
</tr>
<tr>
<td class="registerButtonTD" colspan="2">
<a href="#nowhere"><button>提 交</button></a>
</td>
</tr>
</tbody></table>
</div>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
问答区域
2019-04-09
站长,这个后面那个参数我不懂,能解释一下吗
1 个答案
how2j 跳转到问题位置 答案时间:2019-04-10 就是隐藏嘛, 在 css 基础里有讲的:
http://how2j.cn/k/css2/css2-visibility/254.html
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2018-03-08
站主你的这些表单都不需要验证交互的吗?
1 个答案
how2j 跳转到问题位置 答案时间:2018-03-08 验证账号密码需要服务端配合呀,而这个只是前端教程,如果要引入账号密码验证,那么学员就必须要掌握后台的功能,这样对仅仅想学习前端的同学就是障碍和负担了呢。
在整站项目里是有账号密码验证的,学到那里的时候你就清楚啦
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2017-05-23
页面整合
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|