使用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>
使用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>
页码
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>
左侧菜单
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>
返回顶部
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>
模态框
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>
d