动态响应布局、iconfont笔记

clip:rect矩形剪裁功能

rect(30px 200px 200px 20px)
rect(top right bottom left)
参数：top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。
说明：裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px

---

:not

li a:hover:not(.action){
    /* a标签没有被选中的类名为action不会变背景颜色 */
		background-color: #111;
	}
.action{
   
		background-color: #4caf50;
	}

<li><a href="javascript:;" class="action">主页</a></li>
<li><a href="javascript:;">新闻</a></li>

screen

@media screen and (max-width:600px) {
    /* 如果屏幕宽度小于600px */
		.topnav li.right,li{
    /* 权重 */
			float: none; /* 取消浮动效果 */
		}
	}

overflow

• overflow: scroll; 滚动栏一直存在
• overflow: hidden; 超过范围就隐藏
• overflow: auto; 如果不超出范围滚动条不显示 超出必显示
• overflow: visible; 默认 超出范围不隐藏

float

float:left 左浮动效果
float:right 右浮动效果
clear:right 清除右浮动效果
overflow: auto 清除浮动效果

line-height

.center p {
   
    line-height: 1.5; /* 字体高度的1.5倍 */
    display: inline-block;
    vertical-align: middle;
}

兄弟选择器 单选

• div+p 选取与div平级的兄弟p标签,如果有两个兄弟p标签，选中第一个p标签 ，而不是子类p标签
• div+p+p 选取与div平级的兄弟p标签,如果有两个兄弟p标签，选中第二个p标签 ，而不是子类p标签

div+p{
   
		background-color:yellow;
	}
div{
   
		border: 1px solid red;
	}

<h1>文章标题</h1>
<div>
	<h2>DIV 内部标题</h2>
	<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

兄弟选择器 多选

• div~p 选取同级的全部兄弟p标签

div~p{
   
	background-color:yellow;
}

伪类 :lang 引用 quotes

q:lang(no){
    /* lang定义了q元素的值为lang =“no” */
	quotes: "~" "~";
}

<p>一些文本 <q lang="no">我们已经引入了</q> 一些文本.</p>
<!-- 输出结果   一些文本 ~我们已经引入了~ 一些文本. -->

获取焦点 focus

input:focus{
   
	background-color:yellow;
}

姓: <input type="text" name="fname" /><br>
名: <input type="text" name="lname" /><br>images/pig1.gif

首字母 first-letter

• font-size:xx-small; 小号字体
• font-size:xx-large; 大号字体

p:first-letter {
   
	color:#ff0000;
	font-size:xx-small;
}

<p>今天我回家吃饭，结果发现家里的鱼被水淹死了</p>

伪类前添加元素 before

• 单词 pseudo-element 伪类
• :before{} 之前添加元素
• :after{} 之后添加元素

h1:before {
   content:url(images/pig1.gif);}
h1:after {
   content:url(images/pig1.gif);}

响应式导航栏

• 如果屏幕宽度小于900px，导航栏顶部为水平导航栏 大于900px导航栏在右边，且固定的小于400px会变为垂直导航栏

• 布局文件

<ul class="slidenav">
			<li><a href="javascript:;">主页</a></li>
			<li><a href="javascript:;">新闻</a></li>
			<li><a href="javascript:;">联系</a></li>
			<li><a <