20170604学习笔记整理

一．黄金时代之似水流年

1.人家叫你干啥，不要拒绝。遇上不舒服不好受的事应该忍受，不要抱怨。

2.只有他一个人的时候，一切都更贴近于自然。

3.发生的事再没有改变的余地。

4.我怎能在别人的苦难面前转过脸去。

5.岁月如流，就如皓月当空，照亮我们每个人，但是每个人的生活都不一样。

6.虽然岁月如流，什么都会过去，但总有些什么东西发生了就不能抹煞。

7.似水流年是一个人所有东西，只有这个东西，才真正归你所有。

8.人老了就这么天真，事事都在别人意料之中。

9.他在世上什么都没有了，只有最后的日子。（刘老）

10.人在四十岁之前，过得很慢；过了四十岁，过得就快了。（叔本华）

11.我们做这件事不是为了别人，只是为了证明自己是好样的。

12.按自己的方式，在光荣的荆棘路上行走至今。（线条）

13.人生最大的悲哀，在于受愚弄。

二．精通CSS第六章部分笔记

1.

ul.nav a:hover,ul.nav a:focus{color:#e4ffd3;//浅绿色background-color: teal;//较深的湖蓝色}

2.实现简单的水平导航条：

①HTML：

<ol class="pagination"><li><a href="" rel="prev">Prev</a></li><li><a href="">1</a></li><li class="selected">2</li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li><li><a href="" rel="next">Next</a></li></ol>

②去掉列表中默认的padding/margin/样式：

ol.pagination{list-style-type: none;padding:0;margin:0;}

③让列表项水平排列，同时使用外边距将其分开：

ol.pagination li{float:left;margin-right: 1em;}

④应用样式，目标：所有页码都出现在灰色的方框中，当用户将鼠标悬停悬停链接时，湖蓝色背景+白色文本：

ol.pagination a,ol.pagination li.selected{border:1px solid #ccc;//#ccc灰色text-decoration: none;display: block;padding: 0.2em 0.3em;}ol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected{background-color: teal;color:white;}

⑤单独设置prev和next样式，目标：1.去边框2.列表开头、结尾加箭头。

ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{border:none;}ol.pagination a[rel="prev"]:before{content:"\00ab";padding-right: 0.5em;}ol.pagination a[rel="next"]:after{content:"\00bb";padding-left: 0.5em;} 

Result:

3.稍微复杂一点的水平导航条

HTML:

<ul class="nav"><li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">News</a></li><li><a href="">Products</a></li><li><a href="">Services</a></li><li><a href="">Clients</a></li><li><a href="">yyc</a></li></ul>

CSS:

ul.nav{padding:0;margin:0;list-style-type: none;width:72em;background:#faa819;overflow: hidden;}ul.nav li{float:left;margin-right: 0.5em;}ul.nav li a{display: block;padding:0 3em;line-height: 2.1em;text-decoration: none;color:#fff;border-right: 1px solid #fff;//#fff白色}ul.nav a:hover,color:#333;}

Result：

①当元素浮动时，它不再占据文档流中的任何空间，因此实际上父列表没有内容，它会收缩，从而隐藏列表背景。

→解决之道：在父元素中使用：overflow:hidden;

②将水平导航条中的每个链接的display属性都设置为block，从而让它们表现得像按钮一样。