CSS-简单的css锚点

index.html

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>简单的CSS锚点title>
 7         <style>
 8             ul,li{    
 9                     padding:0;
10                     margin:0;
11                     width:300px; 
12                     height:200px;
13                     margin:0 auto;
14                     list-style-type:none;
15                     overflow: hidden;
16                }
17             .nav{
18                 text-align:center;
19                 margin-top:20px;
20                 opacity: 0.6;
21             }     
22         style>
23     head>
24     <body>
25         <ul>
26             <li><a name="p1"><img src="img/1.jpg" alt="pic1">a>li>
27             <li><a name="p2"><img src="img/2.jpg" alt="pic2">a>li>
28             <li><a name="p3"><img src="img/3.jpg" alt="pic3">a>li>
29         ul>    
30         <div class="nav">
31             <a href="#p1"><img src="img/1s.jpg" >a>
32             <a href="#p2"><img src="img/2s.jpg" >a>
33             <a href="#p3"><img src="img/3s.jpg" >a>
34         div>
35     body>
36 html>

img

CSS-简单的css锚点_第1张图片CSS-简单的css锚点_第2张图片CSS-简单的css锚点_第3张图片

效果图

CSS-简单的css锚点_第4张图片

 

转载于:https://www.cnblogs.com/Kimoongee/p/6872873.html

你可能感兴趣的:(CSS-简单的css锚点)