day06 iframe浮动框架 + 小问题 + 扩展选择器
2017-08-29 本文已影响0人
yuxiaohu
1 iframe
<style>
iframe{
width: 300px;
height: 400px;
border: 1px solid #eee;
}
</style>
<iframe src="021.html" frameborder="0" name="frame"></iframe>
<a href="021.html" target="frame">01</a>
<a href="022.html" target="frame">02</a>
//<iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个HTML文档
2 一些小问题
2.1.当遇到一个非文本的元素，想让其垂直居中用定位
2.2 内联元素一些奇怪的现象
:给button设置margin-top,span也跟着移动
<div>
<button>btn</btn>
<span>深圳</span>
<span>广州</span>
<div>
2.3 overflow:hidden;
<style>
.box{
overflow: hidden; //隐藏超出父级以外的内容
width: 300px;
height: 400px;
background-color: red;
}
.one{
width: 100px;
height: 200px;
background-color: aqua;
}
.two{
width: 100px;
height: 600px;
background-color: blue;
}
</style>
3 扩展选择器
<style>
ul>li:first-child{ background-color: red;}
/*选择li第一个元素*/
ul>li:last-child{ list-style: none;}
/*选择li最后一个元素*/
ul>li:nth-child(3){border: 2px solid blue}
/*选择li指定的元素*/
ul>li:nth-child(even){background-color: yellow}
/*选择li偶数元素*/
ul>li:nth-child(odd){font-size: 10px}
/*选择li奇数元素*/
ul>li:not(:nth-child(3)){font-size: 20px}
/*排除li指定的元素,选择其他元素*/
</style>
<body>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
