《精通CSS》读书笔记3

发表于 | 分类于 ，

第6章 对列表应用样式和创建导航条

基本的垂直导航条

  • 被选中的时候，可以使用.selected类，不用特意添加该类
  • 书中P105在导航条中突出显示当前页面栏尝试后发现无效
1
2
3
4
5
6
7
<p>
    <ul class="nav">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Service</a></li>
    </ul>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ul.nav{
  margin:0;
  padding:0;
  list-style-type: none;
  width:8em;
  background-color: #8BD400;
  border: 1px solid #486B02;
}
ul.nav a{
  display: block;
  color:#2B3F00;
  text-decoration: none;
  border-top:1px solid #E4FFD3;
  border-bottom:1px solid #486B02;
  background: url(http://image.jiantuku.com/18-5-29/61418708.jpg?e=1527597610&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:VuddFX_hD4gL3h6S3XEqb0MJw5Q=)
  no-repeat 5% 50%;
  padding:0.3em 2em;
}
ul.nav :last-child a{
  border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
  color:#E4FFD3;
  background-color:#6DA203;
}

6-1

创建简单的水平导航条

  • 在css中用到字符的时候可以查询HTML字符（Glyphs）收集
1
2
3
4
5
6
7
8
9
<ol class="pagination">
    <li><a href=# rel="prev">Prev</a></li>
    <li><a href=#>1</a></li>        
    <li><a href=#>2</a></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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
ol.pagination{
  margin:0;
  padding:0;
  list-style-type:none;
}
ol.pagination li{
  float:left;
  margin-right: 0.6em;
}
ol.pagination a{
  display:block;
  padding:0.2em 0.5em;
  border:1px solid #ccc;
  text-decoration: none;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected{
  background-color:#C4261D;
  color:white;
}
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;
}

6-2

导航条

1
2
3
4
5
6
7
<p>
    <ul class="nav">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Service</a></li>
    </ul>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul.nav{
  margin:0;
  padding:0;
  list-style-type: none;
  width:29em;
  overflow: hidden;
  background-color: #FAA819;
}

ul.nav li{
  float:left;
}
ul.nav a{
  display: block;
  text-decoration: none;
  padding:0 3em;
  color:#fff;
  line-height: 2.1em;
  border-left:1px solid #fff;
}
ul.nav :last-child a{
  border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
  color:#000;
}

6-3

Suckerfish下拉菜单

  • 先将二级导航栏设置成position: absolute; left:-999em; 这时可以看不见该二级导航栏
  • 再:hover ul{left:auto;}就可以实现鼠标放在上面的时候出现二级导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="nav">
    <li><a href=#>Home</a></li>
    <li><a href=#>Products</a>
        <ul>
        <li><a href=#>Silver</a></li>
        <li><a href=#>Font</a></li>
        </ul>
    </li>
    <li><a href=#>Service</a>
        <ul>
        <li><a href=#>Design</a></li>
        <li><a href=#>Development</a></li>
        <li><a href=#>Consultancy</a></li>                
        </ul>
    </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
ul.nav, ul.nav ul{
  margin:0;
  padding:0;
  list-style-type: none;
  overflow: hidden;
  background-color: #8BD400;
  border:1px solid #486B02;
}
/* 一级标题样式 */
ul.nav li{
  float:left;
  width:8em;
}
/* 二级标题样式 */
.nav li ul{
  width:8em;  
  position: absolute;
  left:-999em;
}
/* 在父元素上添加悬停伪选择器 */
ul.nav :hover ul{
  left:auto;
}
/* 一级标题内容样式,直接写在ul.nav li中是无效的 */
ul.nav a{
  display: block;
  color:#2B3F00;
  text-decoration: none;
  padding:0.3em 1em;
  border-right:1px solid #486B02;
  border-left:1px solid #E4FFD3;
}
/* 二级标题内容样式 */
ul.nav li li a{
  border-top:1px solid #E4FFD3;
  border-bottom:1px solid #486B02;
  border-left:0;
  border-right:0;
}
/* 去除表格中最后一行的样式 */
ul.nav li ul li:last-child a{
  border-bottom:0;
}
ul a:hover,
ul a:focus,
.nav .selected{
  color:#E4FFD3;
  background-color: #6DA203;
}

6-4

CSS图像映射

  • div设置position:relative; div内部的元素设置position: absolute; 就可以相对于div进行定位
1
2
3
4
5
6
7
8
9
10
11
12
<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527738010&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:uIqUdMVcXfP68LD2eMepOjTWC2I="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>Mountain</a>
        </li>
        <li class="tree">
       		<a href=#>tree</a>
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a{
  position: absolute;
  display:block;
  width:50px;
  height:50px;
  text-indent:-1000em;
}
.imagemap .mountain a{
  top:100px;
  left:400px;
}
.imagemap .tree a{
  top:400px;
  left:50px;
}
.imagemap a:hover,
.imagemap a:focus{
  border:1px solid #fff;
}

6-5

flickr风格的图像映射

  • 如果要让上下两个框垂直居中，上框宽度为a，下框宽度为b，将下框设置{left:a/2; margin-left:-b/2}
  • transparent表示背景色透明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527770410&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:Ilwl9dMq0UL6Oij6srSG5Mb04q0="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>
            <span class="outer">
              <span class="inner">
                <span class="note">
                    Mountain
                </span>
              </span>
            </span>
          </a>
        </li>
        <li class="tree">
       		<a href=#>
              <span class="outer">
                  <span class="inner">
                    <span class="note">
                      tree
                    </span>
                  </span>
              </span>
          </a>
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a{
  position: absolute;
  display:block;
  color:#000;
  text-decoration: none;
  border:1px solid transparent;
}
.imagemap a .outer{
  display:block;
  border:1px solid transparent;
}
.imagemap a .inner{
  display: block;
  width:80px;
  height:60px;
  border:1px solid transparent;
}
.imagemap .mountain a{
  top:100px;
  left:350px;
}
.imagemap .tree a{
  top:350px;
  left:50px;
}
.imagemap a:hover .outer,
.imagemap a:focus .outer{
  border-color:#d4d82d;
}
.imagemap a:hover .inner,
.imagemap a:focus .inner{
  border-color:#fff;
}
.imagemap a .note{
  position:absolute;
  bottom:-3em; /* 前面a是absolute的，note的位置相对于a */
  width:7em;
  padding:0.2em 0.5em;
  text-align:center;
  background-color:#ffc;
  left:-1000px; 
  margin-left:-4em; /*计算 note宽度/2=8 /4*/
}
.imagemap a:hover .note,
.imagemap a:focus .note{
  left:40px; /*计算 a框宽度/2=80/40*/
}

6-6

远距离翻转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527770410&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:Ilwl9dMq0UL6Oij6srSG5Mb04q0="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>
             <span class="hotspot"></span>
             <span class="link">&raquo; mountain</span>
          </a>
        </li>
        <li class="tree">
       		<a href=#>
            <span class="hotspot"></span>
            <span class="link">&raquo; tree</span>
          </a>
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a .hotspot{
  position: absolute;/*相对于整个图片的位置*/
  width:80px;
  height:50px;
}
/* 框在图片中的位置 */
.imagemap .mountain a .hotspot{
  top:100px;
  left:350px;
}
.imagemap .tree a .hotspot{
  top:350px;
  left:50px;
}
.imagemap a .link{
  position: absolute;/*相对于整个图片的位置*/
  display: block;
  width:10em;
  right:-11em;
  cursor:pointer;
  color:#000;
}
/* 文字相对于框的位置 */
.imagemap .mountain a .link{
  top:0;
}
.imagemap .tree a .link{
  top:1.2em;
}
.imagemap a:hover .hotspot,
.imagemap a:focus .hotspot{
  border:1px solid #fff;
}
.imagemap a:hover .link,
.imagemap a:focus .link{
  color:#0066FF;
}

6-7