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我没有掌握的

知识点已经掌握了，要运用熟练