A我今天学习到了什么
1温习day06的知识点
1.iframe
<iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个HTML文档
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
2.当遇到一个非文本的元素，想让其垂直居中用【定位】
3.内联元素一些奇怪的现象
:给button设置margin-top,span也跟着移动
<div>
<button>btn</button>
<span>深圳</span>
<span>广州</span>
<div>
4.overflow:hidden;
隐藏溢出的部分
2拓展day07的知识点
1.实现一个下拉菜单//运用知识点float,position
//HTML
<ul class="item">
<li><a href="#">收藏夹</a>
<div class="box">
<a href="#">收藏宝贝</a><a href="#">收藏店铺</a>
</div>
</li>
<li> <a href="#">卖家中心</a></li>
<li><a href="#">联系客服</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的继承问题
给父级相对定位,子级绝对定位，子级不会继承父元素的宽度
3.边框border-radius
边框border-radius 可以将边框设置为圆角
border-radius:value 四个边都会改变
可以单独改变一边
border-top-left-radius: value;//左上角
border-top-right-radius:value;//右上角
border-bottom-left-radius:value;//左下角
border-bottom-right-radius:value;//右下角
4.box-shadow可以给块或内联块元素添加阴影
box-shadow可以给元素添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影。
5.文字效果
//设置文字的阴影
text-shadow: h-shadow v-shadow blur color;
//用的不多，但面试的时候碰到过
2.3.2 text-overflow 文本溢出属性指定如何显示溢出内容
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.实现一个下拉菜单//运用知识点float,position
//HTML
<ul class="item">
<li><a href="#">收藏夹</a>
<div class="box">
<a href="#">收藏宝贝</a><a href="#">收藏店铺</a>
</div>
</li>
<li> <a href="#">卖家中心</a></li>
<li><a href="#">联系客服</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的继承问题
给父级相对定位,子级绝对定位，子级不会继承父元素的宽度
3.边框border-radius
边框border-radius 可以将边框设置为圆角
border-radius:value 四个边都会改变
可以单独改变一边
border-top-left-radius: value;//左上角
border-top-right-radius:value;//右上角
border-bottom-left-radius:value;//左下角
border-bottom-right-radius:value;//右下角
4.box-shadow可以给块或内联块元素添加阴影
box-shadow可以给元素添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影。
5.文字效果
//设置文字的阴影
text-shadow: h-shadow v-shadow blur color;
//用的不多，但面试的时候碰到过
2.3.2 text-overflow 文本溢出属性指定如何显示溢出内容
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我没有掌握的
知识点已经掌握了，要运用熟练
