A我今天學(xué)習(xí)到了什么
1溫習(xí)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;
隱藏溢出的部分
2拓展day07的知識(shí)點(diǎn)
1.實(shí)現(xiàn)一個(gè)下拉菜單//運(yùn)用知識(shí)點(diǎn)float,position
//HTML
<ul class="item">
<li><a href="#">收藏夾</a>
<div class="box">
<a href="#">收藏寶貝</a><a href="#">收藏店鋪</a>
</div>
</li>
<li> <a href="#">賣(mài)家中心</a></li>
<li><a href="#">聯(lián)系客服</a></li>
</ul>
//css
* {margin: 0;padding: 0}
ul {list-style: nonetext-align: center;}
a {text-decoration: none}
.item {width: 1200px;background: pink;margin-left: auto;margin-right: auto}
.item:after {display: table;content: "";clear: both}
.item > li {float: left;width: 100px;line-height: 60px;}
.item>li:hover{background: pink;}
.item > li > a {color: aliceblue;}
.item > li:hover > .box {display: block;}
.box{display: none;position: absolute;width: 100px;background: red;}
.box>a{display: block}
.box>a:hover{background: yellow;}
2.width的繼承問(wèn)題
給父級(jí)相對(duì)定位,子級(jí)絕對(duì)定位鸭蛙，子級(jí)不會(huì)繼承父元素的寬度
3.邊框border-radius
邊框border-radius 可以將邊框設(shè)置為圓角
border-radius:value 四個(gè)邊都會(huì)改變
可以單獨(dú)改變一邊
border-top-left-radius: value;//左上角
border-top-right-radius:value;//右上角
border-bottom-left-radius:value;//左下角
border-bottom-right-radius:value;//右下角
4.box-shadow可以給塊或內(nèi)聯(lián)塊元素添加陰影
box-shadow可以給元素添加陰影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平陰影的位置绩郎。允許負(fù)值鸿秆。
*v-shadow*
必需。垂直陰影的位置。允許負(fù)值待笑。
*blur*
可選絮记。模糊距離各谚。
*spread*
可選。陰影的尺寸到千。
*color*
可選昌渤。陰影的顏色。請(qǐng)參閱 CSS 顏色值憔四。
inset
可選膀息。將外部陰影 (outset) 改為內(nèi)部陰影。
5.文字效果
//設(shè)置文字的陰影
text-shadow: h-shadow v-shadow blur color;
//用的不多了赵，但面試的時(shí)候碰到過(guò)
2.3.2 text-overflow 文本溢出屬性指定如何顯示溢出內(nèi)容
p{ overflow: hidden;text-overflow: ellipsis; white-space:nowrap;
//white-space指定文字是否換行}
//HTML
<div class="bian">
<p>你真帥</p>
<p>你真帥</p>
</div>
.bian {width: 300px;height: 300px;margin: 20px auto;
border: 1px solid #000;border-top-left-radius: 150px;
box-shadow: 0 -5px 5px 5px yellow inset}
.bian p{text-shadow: 5px 5px 2px red;margin: 50px auto;font-size: 40px;text-align: center}
01.PNG
B我掌握了的
1.實(shí)現(xiàn)一個(gè)下拉菜單//運(yùn)用知識(shí)點(diǎn)float,position
//HTML
<ul class="item">
<li><a href="#">收藏夾</a>
<div class="box">
<a href="#">收藏寶貝</a><a href="#">收藏店鋪</a>
</div>
</li>
<li> <a href="#">賣(mài)家中心</a></li>
<li><a href="#">聯(lián)系客服</a></li>
</ul>
//css
* {margin: 0;padding: 0}
ul {list-style: none;text-align: center;}
a {text-decoration: none}
.item {width: 1200px;background: pink;margin-left: auto;margin-right: auto}
.item:after {display: table;content: "";clear: both}
.item > li {float: left;width: 100px;line-height: 60px;}
.item>li:hover{background: pink;}
.item > li > a {color: aliceblue;}
.item > li:hover > .box {display: block;}
.box{display: none;position: absolute;width: 100px;background: red;}
.box>a{display: block}
.box>a:hover{background: yellow;}
2.width的繼承問(wèn)題
給父級(jí)相對(duì)定位,子級(jí)絕對(duì)定位潜支，子級(jí)不會(huì)繼承父元素的寬度
3.邊框border-radius
邊框border-radius 可以將邊框設(shè)置為圓角
border-radius:value 四個(gè)邊都會(huì)改變
可以單獨(dú)改變一邊
border-top-left-radius: value;//左上角
border-top-right-radius:value;//右上角
border-bottom-left-radius:value;//左下角
border-bottom-right-radius:value;//右下角
4.box-shadow可以給塊或內(nèi)聯(lián)塊元素添加陰影
box-shadow可以給元素添加陰影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平陰影的位置。允許負(fù)值柿汛。
*v-shadow*
必需冗酿。垂直陰影的位置。允許負(fù)值络断。
*blur*
可選裁替。模糊距離。
*spread*
可選貌笨。陰影的尺寸弱判。
*color*
可選。陰影的顏色锥惋。請(qǐng)參閱 CSS 顏色值昌腰。
inset
可選开伏。將外部陰影 (outset) 改為內(nèi)部陰影。
5.文字效果
//設(shè)置文字的陰影
text-shadow: h-shadow v-shadow blur color;
//用的不多遭商，但面試的時(shí)候碰到過(guò)
2.3.2 text-overflow 文本溢出屬性指定如何顯示溢出內(nèi)容
p{ overflow: hidden;text-overflow: ellipsis; white-space:nowrap;
//white-space指定文字是否換行}
//HTML
<div class="bian">
<p>你真帥</p>
<p>你真帥</p>
</div>
.bian {width: 300px;height: 300px;margin: 20px auto;
border: 1px solid #000;border-top-left-radius: 150px;
box-shadow: 0 -5px 5px 5px yellow inset}
.bian p{text-shadow: 5px 5px 2px red;margin: 50px auto;font-size: 40px;text-align: center}
01.PNG
C我沒(méi)有掌握的
知識(shí)點(diǎn)已經(jīng)掌握了固灵，要運(yùn)用熟練
