A我今天學(xué)習(xí)到了什么
1溫習(xí)day05的知識(shí)點(diǎn)
1.1 p:margin的一點(diǎn)漏洞問(wèn)題
給子元素margin-top:父元素移動(dòng),子元素不移動(dòng)
解決方案：1.給父元素overflow:hidden;
2.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top會(huì)重合
//取兩者的最大值
1.2一個(gè)登陸頁(yè)面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
//<label for="text">文本</label>特殊人員的照顧，指引
//"text"這個(gè)是input對(duì)話框的文本屬性
<p><label for="password">密碼</label><input id="password" type="password"/></p>
//"password"這是input對(duì)話框的密碼屬性
<p><input type="submit" value="登錄"/></p>
//"submit"是input按鈕的屬性，value更改名
</form>
//定義和用法
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
1.3單選框
<!--單選框需給一樣的“name”名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
1.4復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛(ài)好</label>
<input type="checkbox" name="愛(ài)好" value="游泳">游泳
<input type="checkbox" name="愛(ài)好" value="開(kāi)車(chē)">開(kāi)車(chē)
</p>
1.5下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
1.6預(yù)選的下拉選框
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽(yáng)區(qū)</option>
</select>
</form>
//在想要的option上加selected這個(gè)屬性
1.7文本域
文本域
<textarea placeholder="看點(diǎn)槽點(diǎn)，不吐不快！別憋著，馬上大聲說(shuō)出來(lái)吧！"></textarea>
*****拓展
 空格 << >>
特殊案例
1.input 輸入框
input type=”text”
type=”submit”之間的區(qū)別
一個(gè)文本是content box，一個(gè)按鈕是border box
2.display和visibility的區(qū)別
display:none;//塊不存在
visibility:hidden;//只是隱藏起來(lái)了
3.講解登錄框下面的幾個(gè)icon
image.png
//是背景圖片的取圖定位，左負(fù)右正background-position: -18px 0
2拓展day06的知識(shí)點(diǎn)
1.iframe
<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。
一個(gè)內(nèi)聯(lián)框架用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)HTML文檔
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
2.當(dāng)遇到一個(gè)非文本的元素，想讓其垂直居中用【定位】
3.內(nèi)聯(lián)元素一些奇怪的現(xiàn)象
:給button設(shè)置margin-top,span也跟著移動(dòng)
<div>
<button>btn</button>
<span>深圳</span>
<span>廣州</span>
<div>
4.overflow:hidden;
隱藏溢出的部分
B我掌握了的
1.iframe
<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。
一個(gè)內(nèi)聯(lián)框架用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)HTML文檔
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
2.當(dāng)遇到一個(gè)非文本的元素，想讓其垂直居中用【定位】
3.內(nèi)聯(lián)元素一些奇怪的現(xiàn)象
:給button設(shè)置margin-top,span也跟著移動(dòng)
<div>
<button>btn</button>
<span>深圳</span>
<span>廣州</span>
<div>
4.overflow:hidden;
隱藏溢出的部分
C我沒(méi)有掌握的
<div class="one">
</div>
<div class="one1">
<div class="one2">
<ul class="tou">
<li>深圳 <span>切換</span></li>
</ul>
<ul class="tou1">
<li>個(gè)人中心</li>
</ul>
<span>首頁(yè)</span>
<span>資訊</span>
<span>測(cè)評(píng)</span>
<span>商城</span>
</div>
</div>
<div class="box">
<div class="box1">
<a href="02用戶(hù)主頁(yè).html"target="frame">用戶(hù)中心首頁(yè)</a>
<ul>
<li><span></span>我的檢測(cè)</li>
<li><a href="#">上門(mén)檢測(cè)</a></li>
<li><a href="#">DIY檢測(cè)</a></li>
</ul>
<ul>
<li><span></span>我的治理</li>
<li><a href="#">上門(mén)治理</a></li>
</ul>
<ul>
<li><span></span>我的裝修</li>
<li><a href="#">裝修方案</a></li>
</ul>
<ul>
<li><span></span>我的收藏</li>
<li><a href="#">裝修材料</a></li>
<li><a href="#">凈化產(chǎn)品</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">測(cè)評(píng)</a></li>
</ul>
<ul>
<li><span></span>個(gè)人資料</li>
<li><a href="#">個(gè)人資料</a></li>
<li><a href="#">修改密碼</a></li>
<li class="bang"><a href="03微信分頁(yè).html" target="frame">綁定手機(jī)\微信</a></li>
</ul>
<ul>
<li><span></span>積分管理</li>
<li><a href="#">積分兌換</a></li>
<li><a href="#">積分等級(jí)</a></li>
<li><a href="#">積分任務(wù)</a></li>
</ul>
</div>
<div class="box2">
<iframe src="02用戶(hù)主頁(yè).html" frameborder="0" name="frame"></iframe>
<!--<iframe src="03綁定手機(jī)微信.html" frameborder="0" name="frame"></iframe>-->
</div>
</div>
<div class="five">
<div class="fiv">
<dl>
<dt>為室內(nèi)環(huán)境健康把好每一關(guān)</dt>
<dd>家居醫(yī)生致力于中國(guó)人的家居健康問(wèn)題，通過(guò)專(zhuān)業(yè)的技術(shù)研究<br/>
和測(cè)評(píng)，傾力協(xié)助大眾打造綠色，環(huán)保的人居生活環(huán)境。</dd>
</dl>
<div class="fiv1">
<ul class="ul1">
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
<li>加入我們</li>
</ul>
<ul class="ul1">
<li>版權(quán)說(shuō)明</li>
<li>用戶(hù)隱私</li>
<li>免費(fèi)申明</li>
</ul>
<ul class="ul2">
<li class="l1">官方微信</li>
<li class="l2">天貓旗艦店</li>
<li class="l3">有攢商城</li>
</ul>
</div>
<div class="fiv2"></div>
<span class="di1">深圳建筑科學(xué)研究院股份有限公司</span>
<span>家居醫(yī)生網(wǎng)</span>
<span class="di2">粵IPU備08011321號(hào)?Copyright All Rights Reserved</span>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.one{
text-align: center;
background: #18bebe;
box-sizing: border-box;
}
.one>img{
width: 180px;
height: 50px;
padding: 10px 0;
}
.one1{
background: #f3eff2;
box-sizing: border-box;
}
.one2{
text-align: center;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.tou{
float: left;
padding-top: 10px;
}
.tou li{
list-style-image: url("../images/location.png");
}
.tou1{
float: right;
padding-top: 10px;
}
.tou1 li{
list-style-image: url("../images/adm.png");
color: #FEA700;
}
.one2>span{
line-height: 40px;
font-size: 20px;
padding: 0 40px;
}
.box{
width: 1200px;
margin: 10px auto;
}
.box1{
width: 200px;
height: 900px;
background: #f0f0f0;
text-align: center;
margin-right: 10px;
display: inline-block;
}
.box1>a{
display: block;
line-height: 75px;
background: #dddddd;
border-left: 3px solid #19bebe;
text-decoration: none;
color: #19bebe;
}
ul a{
text-decoration: none;
color: #666666;
}
.box1 li{
list-style: none;
text-align: left;
}
.box1 ul{
margin-left: 60px;
padding: 0 0 20px;
}
.box1 span{
display: inline-block;
width: 11px;
height: 11px;
background: url("../images/open.png");
position: relative;
right: 40px;
margin-right: -10px;
}
.box2{
float: right;
background: #eeeeee;
}
iframe{
width:980px;
height:1000px;
margin-left:5px;
border:1px solid #eee;
}
.five{
background:#515151;
color: #ffffff;
clear: both;
}
.fiv{
width: 1200px;
padding: 20px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.fiv>img{
display: block;
margin-left: 20px;
}
.fiv>dl{
display: inline-block;
margin-left: 20px;
}
.fiv dt{
font-size: 18px;
font-weight: 700;
padding-bottom: 20px;
}
.fiv dd{
font-size: 16px;
}
.fiv1{
display: inline-block;
position: relative;
left:80px;
}
.fiv1>ul{
display: inline-block;
margin-right: 100px;
}
.fiv1 .ul1{
list-style: none;
}
.fiv1 .ul2{
margin-left: 40px;
}
.fiv1 li{
padding: 8px 0;
}
.ul2 .l1{
list-style-image: url("../images/weixin2.png");
}
.ul2 .l2{
list-style-image: url("../images/tianmao.png");
}
.ul2 .l3{
list-style-image: url("../images/shop.png");
}
.fiv2{
height: 2px;
border-bottom: 1px solid #dddddd;
margin: 10px 0;
}
.di1{
margin:0 20px;
}
.di2{
margin-left: 420px;
}
<style>
*{margin: 0;padding: 0}
.box{
background-color: #EBEBEB;
position: relative;
height: 150px;
border: 1px solid #E8E8E8;
}
.aa{
width: 108px;
height: 109px;
border-radius: 50%;
float: left;
position: relative;
left: 40px;
top: 20px;
}
dl{
float: left;
position: relative;
left: 45px;
top: 30px;
}
dt{
font-size: 20px;
margin-bottom: 20px;
}
.box>span{
width: 1px;
height: 100px;
border-left: 2px solid #dddddd;
float: left;
position: relative;
left: 140px;
top: 30px;
}
.cc{
width: 300px;
height: 150px;
display: inline-block;
position: relative;
left: 200px;
top: 60px;
}
.cc p{
display: inline-block;
position: absolute;
}
.cc a{
margin-left: 5px;
text-decoration: none;
color: #19bebe;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>用戶(hù)名</dt>
<dd>積分值：198分</dd>
<dd>我的消息：0條</dd>
</dl>
<span></span>
<!--<div class="bb">-->
<div class="cc">
<p>微信綁定</p>
<span>未綁定</span><a href="#">立即綁定</a>
</div>
<div class="cc">
<p>手機(jī)號(hào)碼綁定</p>
<span>未綁定</span><a href="#">立即綁定</a>
</div>
<!--</div>-->
</div>
