Rumah > hujung hadapan web > tutorial css > css悬浮效果阴影实现代码

css悬浮效果阴影实现代码

小云云
Lepaskan: 2018-03-26 09:23:52
asal
2894 orang telah melayarinya

本文主要和大家介绍了css实现悬浮效果的阴影的方法示例的相关资料,希望能帮助到大家。我们先来看一下效果图。

要实现的效果图:

实现的代码:


1

2

3

-webkit-box-shadow:0px 3px 3px #c8c8c8 ;

-moz-box-shadow:0px 3px 3px #c8c8c8 ;

box-shadow:0px 3px 3px #c8c8c8 ;

Salin selepas log masuk

整个页面的代码:


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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html >

<html>

<head>

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

        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

         

        <style>

            .search {

                height: 46px;

                border: 1px solid #F0F1F1;

                border-radius: 25px;

                margin: 0 20px;

                 

-webkit-box-shadow:0px 3px 3px #c8c8c8 ;

-moz-box-shadow:0px 3px 3px #c8c8c8 ;

box-shadow:0px 3px 3px #c8c8c8 ;

            }

             

            .search_left {

                float: left;

                margin: 5px 7px 5px 11px;

                width: 35px;

                height: 34px;

                border-radius: 50px;

                background: red;

                text-align: center;

                line-height: 42px;

            }

             

            .search_left img {

                width: 60%;

                height: 60%;

            }

             

            .search_input {

                float: left;

            }

             

            .search_input input {

                border: none;

                height: 30px;

                margin-top: 5px;

            }

             

            .search_right {

                float: right;

                width: 20px;

                height: 20px;

                margin: 9px 17px 5px 10px;

            }

             

            .search_right img {

                width: 100%;

                height: 100%;

            }

             

            .words {

                color: #D1D1D1;

                font-size: 12px;

                margin-top: 21px;

                margin-left: 30px;

            }

             

            .servers {

                overflow: auto;

            }

             

            .servers ul {

                overflow: auto;

                padding-left: 16px;

            }

             

            .servers ul li {

                list-style: none;

                background: #f6f6f9;

                float: left;

                width: 47px;

                height: 47px;

                text-align: center;

                margin: 5px 10px;

            }

             

            .servers ul li img {

                width: 60%;

                height: 60%;

                margin-top: 9px;

            }

        </style>

        <title>高校地图</title>

    </head>

 

    <body>

        <p class="container">

            <p class="search">

                <p class="search_left"><img src="img/back.png" /></p>

                <p class="search_input"><input type="text" placeholder="输入商铺名称,车位号,服务设施"></p>

                <p class="search_right"><img src="img/scale_search.png" alt="放大" /></p>

            </p>

        </p>

 

        <p class="words">常用服务设置...</p>

 

        <p class="servers">

            <ul>

                <li><img src="img/stairs.png" alt="手扶电梯" /></li>

                <li><img src="img/stairs2.png" alt="手扶电梯" /></li>

                <li><img src="img/sex.png" alt="手扶电梯" /></li>

                <li><img src="img/entris.png" alt="手扶电梯" /></li>

                <li><img src="img/exiy.png" alt="手扶电梯" /></li>

                <li><img src="img/moner.png" alt="手扶电梯" /></li>

            </ul>

        </p>

         

        <p class="words">车牌找车</p>

        <p class="servers">

            <ul>

                <li><img src="img/car.png" alt="车牌找车" /></li>

                 

            </ul>

        </p>

    </body>

 

</html>

Salin selepas log masuk

相关推荐:

JS实现图片居中悬浮效果实例分享

Atas ialah kandungan terperinci css悬浮效果阴影实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan