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;}

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

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

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


分享给朋友:
您可能感兴趣的文章:
随机阅读: