Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > Detailed explanation of scroll bar implementation method

Detailed explanation of scroll bar implementation method

巴扎黑
Release： 2017-08-11 13:57:30
Original
1984 people have browsed it

The following editor will bring you a small learning example-the simple implementation of scroll bars. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Effect:

Code:


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>huanhangtiao</title>

<style>

a{

    width:17px;

    height:20px;

    font:12px/20px "宋体";

border:1px solid #e0e1e2;

    display:inline-block;

    text-align:center;

    color: #2052a3;

    }

    .shang{

    width:64px;

    }

    a:hover,.active{

    background-color:#1f3a87;

    color:#fff;

    }

</style>

</head>

 

<body>

<p class="">

<a class="shang">上一页</a>

<a>1</a>

<a>2</a>

<a class="active">3</a>

<a>4</a>

<a>5</a>

<a>6</a>

<a>7</a>

<a>8</a>

<a>9</a>

<a class="shang">下一页</a>

</p>

 

</body>

</html>

Copy after login

The above is the detailed content of Detailed explanation of scroll bar implementation method. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
accomplish method Detailed explanation
Previous article：How to use cookies to solve the problem that WeChat localStorage cannot be stored Next article：An introduction to how to create jump menus for Dreamweaver web pages
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template