前端的一些小功能

使用ul li，首选这种

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用ul li来实现浮动菜单</title>
 6     <style type="text/css">
 7         .menu {
 8             width: 694px;
 9             height: 50px;
10             list-style: none;
11             margin: 50px auto 0;
12             padding: 0;
13             font-size: 0;
14         }
15 
16 
17         .menu li a {
18             display: block;
19             width: 98px;
20             height: 48px;
21             border: 1px solid gold;
22             margin-left: -1px;
23             color: pink;
24             font-family: "Microsoft Yahei";
25             font-size: 16px;
26             line-height: 48px;
27             text-align: center;
28             text-decoration: none;
29             float: left;
30         }
31 
32         .menu li a:hover {
33             background-color: gold;
34             color: #fff;
35         }
36     </style>
37 </head>
38 <body>
39 <ul class="menu">
40         <li><a href="#">首页</a></li>
41         <li><a href="#">公司简介</a></li>
42         <li><a href="#">解决方案</a></li>
43         <li><a href="#">公司新闻</a></li>
44         <li><a href="#">行业动态</a></li>
45         <li><a href="#">招贤纳士</a></li>
46         <li><a href="#">联系我们</a></li>
47     </ul>
48 </body>
49 </html>

View Code

使用div

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box {
 8             width: 694px;
 9             height: 50px;
10             margin: 50px auto 0;
11             font-size: 0;
12         }
13 
14         .box a {
15             display: inline-block;
16             width: 98px;
17             height: 48px;
18             border: 1px solid gold;
19             font-size: 16px;
20             font-family: 'Microsoft Yahei';
21             color: pink;
22             text-align: center;
23             text-decoration: none;
24             margin-left: -1px;
25             line-height: 48px;
26         }
27 
28         .box a:hover {
29             background-color: gold;
30             text-decoration: none;
31             color: #fff;
32         }
33 
34         .con {
35             width: 200px;
36         }
37         .con .box1 {
38             width: 200px;
39             height: 200px;
40             background-color: gold;
41             display: none;
42         }
43         .con:hover .box1 {
44             display: block;
45         }
46 /*        .con h3:hover + .box1 {
47             display: block;
48         }
49 */
50 
51     </style>
52 </head>
53 <body>
54     <div class="box">
55         <a href="#">首页</a>
56         <a href="#">公司简介</a>
57         <a href="#">解决方案</a>
58         <a href="#">公司新闻</a>
59         <a href="#">行业动态</a>
60         <a href="#">招贤纳财</a>
61         <a href="#">联系我们</a>
62     </div>
63 
64     <div class="con">
65         <h3>标题</h3>
66         <div class="box1">
67             hahhahah
68         </div>
69     </div>
70 </body>
71 </html>

View Code

页码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>实例</title>
 6     <style type="text/css">
 7         .page {
 8             list-style: none;
 9             margin: 50px auto 0;
10             padding: 0;
11             border: 1px solid grey;
12             width: 600px;
13             height: 40px;
14             font-size: 0;
15             text-align: center;
16         }
17 
18         .page li {
19             display: inline-block;
20             height: 26px;
21             margin: 7px 5px 0;
22             font-size: 12px;
23             line-height: 26px;
24         }
25 
26         .page li a {
27             display: block;
28             height: 26px;
29             padding: 0 10px;
30             background: gold;
31             color: #000;
32             font-family: "Microsoft Yahei";
33             text-align: center;
34             text-decoration: none;
35 
36         }
37 
38         .page a:hover {
39             background: red;
40         }
41 
42     </style>
43 </head>
44 <body>
45     <ul class="page">
46         <li class="paging"><a href="#">上一页</a></li>
47         <li><a href="#">1</a></li>
48         <li><a href="#">2</a></li>
49         <li><a href="#">3</a></li>
50         <li><a href="#">4</a></li>
51         <li><span>...</span></li>
52         <li><a href="#">18</a></li>
53         <li><a href="#">19</a></li>
54         <li><a href="#">20</a></li>
55         <li class="paging"><a href="#">下一页</a></li>
56     </ul>
57 
58 </body>
59 </html>

View Code

左侧菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>左侧菜单</title>
 6     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11         }
12 
13         .menu-title {
14             /*display: block;*/
15             width: 80px;
16             height: 30px;
17             background: rgba(52, 61, 70, 1);
18             line-height: 30px;
19             text-align: center;
20         }
21 
22         .menu-items a {
23             display: block;
24             width: 80px;
25             height: 30px;
26             background: rgba(52, 61, 70, 0.5);
27             line-height: 30px;
28             list-style-type: none;
29             text-align: center;
30         }
31         .hide {
32             display: none;
33         }
34     </style>
35 
36 </head>
37 <body>
38     <div class="menu-title">菜单一</div>
39     <div class="menu-items">
40         <ul>
41             <li><a href="">1</a></li>
42             <li><a href="">2</a></li>
43             <li><a href="">3</a></li>
44         </ul>
45     </div>
46     <div class="menu-title">菜单二</div>
47     <div class="menu-items hide">
48         <ul>
49             <li><a href="">1</a></li>
50             <li><a href="">2</a></li>
51             <li><a href="">3</a></li>
52         </ul>
53     </div>
54     <div class="menu-title">菜单三</div>
55     <div class="menu-items hide">
56         <ul>
57             <li><a href="">1</a></li>
58             <li><a href="">2</a></li>
59             <li><a href="">3</a></li>
60         </ul>
61     </div>
62     <script>
63         $(function () {
64             // body...
65             $('.menu-title').click(function () {
66                 // $(this).next().toggleClass('hide');
67                 // $(this).next().siblings('.menu-items').addClass('hide');
68 
69                 // 滑动
70                 $(this).next().slideToggle();
71                 $(this).next().siblings('.menu-items').slideUp();
72 
73                 // 基本
74                 // $(this).next().toggle();
75                 // $(this).next().siblings('.menu-items').hide();
76 
77             });
78         });
79         
80     </script>
81 </body>
82 </html>

View Code

返回顶部

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>返回顶部</title>
  7     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  8     <style>
  9     * {
 10         margin: 0;
 11         padding: 0;
 12     }
 13 
 14     #top {
 15         position: fixed;
 16         right: 20px;
 17         bottom: 20px;
 18         width: 30px;
 19         height: 30px;
 20         background: rgba(52, 61, 70, 1);
 21         text-align: center;
 22         line-height: 30px;
 23         border-radius: 50%;
 24         color: white;
 25     }
 26 
 27     .hide {
 28         display: none;
 29     }
 30     </style>
 31 </head>
 32 
 33 <body>k
 34     <p>1</p>
 35     <p>2</p>
 36     <p>3</p>
 37     <p>4</p>
 38     <p>5</p>
 39     <p>6</p>
 40     <p>7</p>
 41     <p>8</p>
 42     <p>9</p>
 43     <p>10</p>
 44     <p>11</p>
 45     <p>12</p>
 46     <p>13</p>
 47     <p>14</p>
 48     <p>15</p>
 49     <p>16</p>
 50     <p>17</p>
 51     <p>18</p>
 52     <p>19</p>
 53     <p>20</p>
 54     <p>21</p>
 55     <p>22</p>
 56     <p>23</p>
 57     <p>24</p>
 58     <p>25</p>
 59     <p>26</p>
 60     <p>27</p>
 61     <p>28</p>
 62     <p>29</p>
 63     <p>30</p>
 64     <p>31</p>
 65     <p>32</p>
 66     <p>33</p>
 67     <p>34</p>
 68     <p>35</p>
 69     <p>36</p>
 70     <p>37</p>
 71     <p>38</p>
 72     <p>39</p>
 73     <p>40</p>
 74     <p>41</p>
 75     <p>42</p>
 76     <p>43</p>
 77     <p>44</p>
 78     <p>45</p>
 79     <p>46</p>
 80     <p>47</p>
 81     <p>48</p>
 82     <p>49</p>
 83     <p>50</p>
 84     <p>51</p>
 85     <p>52</p>
 86     <p>53</p>
 87     <p>54</p>
 88     <p>55</p>
 89     <p>56</p>
 90     <p>57</p>
 91     <p>58</p>
 92     <p>59</p>
 93     <p>60</p>
 94     <p>61</p>
 95     <p>62</p>
 96     <p>63</p>
 97     <p>64</p>
 98     <p>65</p>
 99     <p>66</p>
100     <p>67</p>
101     <p>68</p>
102     <p>69</p>
103     <p>70</p>
104     <p>71</p>
105     <p>72</p>
106     <p>73</p>
107     <p>74</p>
108     <p>75</p>
109     <p>76</p>
110     <p>77</p>
111     <p>78</p>
112     <p>79</p>
113     <p>80</p>
114     <p>81</p>
115     <p>82</p>
116     <p>83</p>
117     <p>84</p>
118     <p>85</p>
119     <p>86</p>
120     <p>87</p>
121     <p>88</p>
122     <p>89</p>
123     <p>90</p>
124     <p>91</p>
125     <p>92</p>
126     <p>93</p>
127     <p>94</p>
128     <p>95</p>
129     <p>96</p>
130     <p>97</p>
131     <p>98</p>
132     <p>99</p>
133     <p>100</p>
134     <div id="top" class="hide">⬆</div>
135     <script>
136     $(function() {
137         $(window).scroll(function() {
138             // body...
139             if ($(window).scrollTop() > 100) {
140                 $('#top').fadeIn();
141             } else {
142                 $('#top').fadeOut();
143             }
144         });
145 
146         // 生硬版
147         // $('#top').click(function (event) {
148         //     $(window).scrollTop(0);
149         // });
150 
151         // 顺畅版
152         $('#top').click(function(event) {
153             /* Act on the event */
154             $('html, body').animate({
155                 scrollTop: 0,
156             }, 700);
157         });
158     });
159     </script>
160 </body>
161 
162 </html>

View Code

模态框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>模态框</title>
 6     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
 7     <style>
 8         .cover {
 9             position: absolute;
10             top: 0;
11             left: 0;
12             bottom: 0;
13             right: 0;
14             background-color: red;
15             z-index: 1;
16         }
17 
18         .modal {
19             position: absolute;
20             width: 400px;
21             height: 300px;
22             left: 50%;
23             top: 50%;
24             margin-left: -200px;
25             margin-top: -150px;
26             background: rgba(255, 255, 255, 0.5);
27             z-index: 100;
28         }
29         .hide {
30             display: none;
31         }
32     </style>
33 </head>
34 <body>
35     <button id="click_me">click me</button>
36     <div class="cover hide"></div>
37     <div class="modal hide">
38         <input type="button" value="取消" class="cancel">
39     </div>
40 
41 <script>
42     $(function () {
43         // body...
44         $("#click_me").click(function () {
45             console.log('dgaoj')
46             $(".cover, .modal").toggleClass("hide");
47 
48         });
49 
50         $(".cancel").click(function () {
51             $(".cover, .modal").toggleClass("hide");
52         })
53     });
54 </script>
55 </body>
56 </html>

View Code