dya-11(周一)新的知识点
?整理一下學(xué)習(xí)新的知識(shí)點(diǎn)
郵箱 type=“email”
數(shù)字:type=“number”min最小值 max最大值 step 每次遞增數(shù)目
顏色:type=“color”了解即可
范圍區(qū)域:type=“range”
網(wǎng)址:type=“url”
搜索框:type=“search”可以做到局部清除
選擇年月日:date type=“date”
年月:month type=“month”
年周:week type=“week”
時(shí)間:time type=“time”
年月日+時(shí)間:datetime-local type=“datetime-local”
datetime 不常用
表格新增的屬性
placeholder 提示信息
required驗(yàn)證不能為空
maxlength最大長(zhǎng)度
autofocus進(jìn)入界面時(shí)自動(dòng)獲取焦點(diǎn)
autocomplete與name屬性鏈接用
下面為練習(xí)
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????.one?{
????????????width:?580px;
????????????height:?740px;
????????????border:?2px?solid?#c4c8c8;
????????}
????????h4?{
????????????margin-left:?30px;
????????}
????????legend?{
????????????padding:?6px?40px?8px?40px;
????????????border:?2px?solid?#c6caca;
????????????font-size:?14px;
????????????margin-left:?20px;
????????}
????????.yongh?{
????????????margin-left:?100px;
????????}
????????.mima?{
????????????margin-left:?100px;
????????}
????????.yong?{
????????????margin-left:?80px;
????????????margin-bottom:?10px;
????????}
????????.mima?{
????????????margin-left:?80px;
????????????margin-bottom:?10px;
????????}
????????.jiz?{
????????????margin-left:?60px;
????????????float:?left;
????????}
????????.jiz?input?{
????????????width:?16px;
????????????height:?16px;
????????}
????????.denglu?{
????????????/*?float:?left;?*/
????????????margin-left:?15px;
????????}
????????.denglu?input?{
????????????width:?100px;
????????????height:?30px;
????????????background-color:?#d0f0fd;
????????}
????????a?{
????????????text-decoration:?none;
????????}
????????.wangji?{
????????????margin-top:?10px;
????????}
????????.tong?{
????????????margin-left:?50px;
????????????margin-top:?20px;
????????}
????????.tong?input?{
????????????width:?16px;
????????????height:?16px;
????????????margin-left:?18px;
????????}
????????.tong?a?{
????????????color:?#5f8799;
????????????margin-left:?10px;
????????}
????????.sub?{
????????????text-align:?center;
????????}
????????.sub?input?{
????????????width:?100px;
????????????height:?30px;
????????????margin-top:?10px;
????????????margin-left:?5px;
????????????background-color:?#d0f0fd;
????????}
????????.mo{
????????????color:?#4f757b;
????????????font-size:?15px;
????????????font-weight:?bold;
????????}
????????.nin{
????????????margin-left:?10px;
????????????color:?#4f757b;
????????????font-size:?15px;
????????????font-weight:?bold;
????????}
????????.nin?span{
????????????font-weight:?normal;
????????}
????????.two{
????????????width:?500px;
????????????margin:??0?auto;
????????????border:?3px?solid?#c4c8c8;
????????}
????????.two1{
????????????width:?500px;
????????????margin:?0?auto;
????????????border:?3px?solid?#c4c8c8;
????????}
????????legend{
????????????color:?#437e7e;
????????????font-weight:?bold;
????????}
????</style>
</head>
<body>
????<div?class="one">
????????<h4>已注冊(cè)用戶登錄</h4>
????????<fieldset?class="two">
????????????<legend>用戶登錄</legend>
????????????<div?class="yong">
????????????????用戶名 <input?type="text">
????????????</div>
????????????<div?class="mima">
????????????????密碼  <input?type="password">
????????????</div>
????????????<div?class="jiz">
????????????????<input?type="checkbox"><u>記住我</u>
????????????</div>
????????????<div?class="denglu">
????????????????<input?type="submit"?value="登陸"?class="denglu">
????????????</div>
????????????<div?class="wangji">
????????????????<a?href="">您忘記密碼?</a>
????????????</div>
????????</fieldset>
????????<h4>未注冊(cè)創(chuàng)建賬戶</h4>
????????<fieldset?class="two1">
????????????<legend>用戶注冊(cè)</legend>
????????????<p?class="nin">您的電子郵箱不會(huì)被公布出去,但是必須填寫。<span>在您注冊(cè)之前請(qǐng)認(rèn)真閱讀服務(wù)條款</span></p>
????????????<div?class="yong">
????????????????用戶名  <input?type="text">*(最多30個(gè)字符)
????????????</div>
????????????<div?class="mima">
????????????????電子郵箱 <input?type="email">*
????????????</div>
????????????<div?class="mima">
????????????????密碼   <input?type="password">*(最多15個(gè)字符)
????????????</div>
????????????<div?class="mima">
????????????????重復(fù)密碼 <input?type="password">*
????????????</div>
????????????<div?class="tong">
????????????????同意服務(wù)條款<input?type="checkbox"><a?href="">先看看條款?</a>*
????????????</div>
????????????<div?class="sub">
????????????????<input?type="submit">
????????????????<input?type="reset">
????????????</div>
????????????<p?class="mo">
????????????????*在提交您的注冊(cè)信息時(shí),我們認(rèn)為您已經(jīng)同意了我們的服務(wù)條款。<br>
????????????????<span>
????????????????????*這些條款可能在未經(jīng)您同意的時(shí)候進(jìn)行修稿。
????????????????</span>
????????????</p>
????????</fieldset>
????</div>
</body>
</html>
?
總結(jié)
以上是生活随笔為你收集整理的dya-11(周一)新的知识点的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: centos7中ps显示的内容_值得收藏
- 下一篇: 地理坐标转换 - 地理信息系统(3)