頁面效果
實現源碼：
img
contents_bg.gif
header_bg.gif
html_bg.gif
logo.gif
nav_bg.gif
nav_bg_hover.gif
pic_01.jpg
pic_02.jpg
pic_03.jpg
pic_04.jpg
pic_05.jpg
movie
這個可以自行查找插入，在這不做分享
JS
這個去https://www.swiper.com.cn/ 和https://jquery.com/官網上自行下載
jquery-3.3.1.min.js
swiper.min.js
將swiper.min復制到CSS文件夾中
將swiper.min復制到js文件夾中
將下載后的jQuery復制到相應的js文件夾中
css
nav.css
1 .nav{ 2 width: 100%; 3 height: 50px; 4 background: url("../img/nav_bg.gif"); 5 background-size: 100% 100%; 6 position: relative; 7 z-index: 9999; 8 } 9 .nav ul{ 10 margin: 0 auto; 11 width: 1000px; 12 height: 50px; 13 } 14 .nav ul li{ 15 list-style: none; 16 float: left; 17 } 18 .nav ul li a:link,.nav ul li a:visited{ 19 display: block; 20 width: 190px; 21 height: 50px; 22 line-height: 50px; 23 font-size: 22px; 24 text-align: center; 25 text-decoration: none; 26 color: #FFFFFF; 27 background: url("../img/nav_bg.gif"); 28 background-size: 100% 100%; 29 } 30 .nav ul li a:hover,.nav ul li a:active{ 31 background: url("../img/nav_bg_hover.gif"); 32 background-size: 100% 100%; 33 color: #760000; 34 } 35 .nav ul li ul{ 36 display: none; 37 position: absolute; 38 } 39 .nav ul li:hover ul{ 40 display: block; 41 } 42 .nav ul li ul li{ 43 float: none; 44 45 } 46 .nav ul li ul li a:link,.nav ul li ul li a:visited{ 47 background-color: #BBBBBB; 48 } 49 .nav ul li ul li a:hover,.nav ul li ul li a:active{ 50 background-color: #CCCCCC; 51 }
style.css
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 html{ 6 background: url("../img/html_bg.gif"); 7 background-size: 30px 30px; 8 } 9 .all_header{ 10 width:100% ; 11 height: 30px; 12 background: url("../img/header_bg.gif"); 13 background-size: 100% 100%; 14 } 15 .all_header_textbox{ 16 margin: 0 auto; 17 width: 1000px; 18 height: 20px; 19 } 20 .all_header_textbox_text{ 21 text-align: right; 22 margin-right: 20px; 23 font-size: 14px; 24 } 25 .all_header_textbox_text a:link,.all_header_textbox_text a:visited{ 26 color: #eeeeee; 27 text-decoration: none; 28 } 29 .all_header_textbox_text a:hover,.all_header_textbox_text a:active{ 30 color: #FFFFFF; 31 text-decoration: none; 32 } 33 .all_logo{ 34 margin: 0 auto; 35 width: 1000px; 36 height: 150px; 37 background:url("../img/logo.gif"); 38 } 39 .all_footer{ 40 margin: 0 auto; 41 width: 1000px; 42 height:50px; 43 background:#e60000; 44 } 45 #index_content{ 46 margin: 0 auto; 47 width: 1000px; 48 height: 970px; 49 background: url("../img/contents_bg.gif"); 50 51 } 52 #list_content{ 53 margin: 0 auto; 54 width: 1000px; 55 height: 830px; 56 background: url("../img/contents_bg.gif"); 57 } 58 #content_content{ 59 margin: 0 auto; 60 width: 1000px; 61 height: 1100px; 62 background: url("../img/contents_bg.gif"); 63 } 64 .index_content_headline{ 65 float: left; 66 margin-top: 15px; 67 margin-left: 15px; 68 width: 639px; 69 height: 300px; 70 border: 1px solid; 71 border-color: #a50000; 72 border-radius: 15px; 73 background: #f9f9f9; 74 box-shadow: 5px 5px 2px #aaaaaa; 75 } 76 .index_content_box{ 77 float: left; 78 margin-top: 15px; 79 margin-left: 15px; 80 width: 311px; 81 height: 300px; 82 border: 1px solid; 83 border-color: #a50000; 84 border-radius: 15px; 85 background: #f9f9f9; 86 box-shadow: 5px 5px 2px #aaaaaa; 87 } 88 .index_content_headline_h{ 89 float: left; 90 margin-top: 10px; 91 margin-left: 20px; 92 width: 550px; 93 height: 20px; 94 95 } 96 .index_content_headline_m{ 97 float: left; 98 margin-top: 10px; 99 margin-left: 10px; 100 width: 50px; 101 height: 20px; 102 103 } 104 .index_content_headline_hr{ 105 float: left; 106 margin-top: 10px; 107 margin-left: 10px; 108 width: 620px; 109 height: 10px; 110 111 } 112 .index_content_headline_p{ 113 float: left; 114 margin-top: 10px; 115 margin-left: 20px; 116 width: 620px; 117 height: 230px; 118 } 119 .index_content_headline_h a:link,.index_content_headline_h a:visited, 120 .index_content_headline_h a:hover,.index_content_headline_h a:active{ 121 text-decoration:none ; 122 color: #e60000; 123 font-size: 16px; 124 } 125 .index_content_headline_m a:link,.index_content_headline_m a:visited, 126 .index_content_headline_m a:hover,.index_content_headline_m a:active{ 127 text-decoration:none ; 128 color: #666666; 129 font-size: 12px; 130 } 131 .index_content_headline_p a:link,.index_content_headline_p a:visited, 132 .index_content_headline_p a:hover,.index_content_headline_p a:active{ 133 text-decoration:none ; 134 color: #666666; 135 font-size: 16px; 136 } 137 138 139 .index_content_box_h{ 140 float: left; 141 margin-top: 10px; 142 margin-left: 20px; 143 width: 230px; 144 height: 20px; 145 146 } 147 .index_content_box_m{ 148 float: left; 149 margin-top: 10px; 150 margin-left: 10px; 151 width: 50px; 152 height: 20px; 153 154 } 155 .index_content_box_hr{ 156 float: left; 157 margin-top: 10px; 158 margin-left: 10px; 159 width: 290px; 160 height: 10px; 161 162 } 163 .index_content_box_p{ 164 float: left; 165 margin-top: 10px; 166 margin-left: 20px; 167 width: 290px; 168 height: 230px; 169 } 170 .index_content_box_h a:link,.index_content_box_h a:visited, 171 .index_content_box_h a:hover,.index_content_box_h a:active{ 172 text-decoration:none ; 173 color: #e60000; 174 font-size: 16px; 175 } 176 .index_content_box_m a:link,.index_content_box_m a:visited, 177 .index_content_box_m a:hover,.index_content_box_m a:active{ 178 text-decoration:none ; 179 color: #666666; 180 font-size: 12px; 181 } 182 .index_content_box_p a:link,.index_content_box_p a:visited, 183 .index_content_box_p a:hover,.index_content_box_p a:active{ 184 text-decoration:none ; 185 color: #666666; 186 font-size: 16px; 187 } 188 189 .lists_content_mbx{ 190 float: left; 191 margin-top: 15px; 192 margin-left: 15px; 193 width: 970px; 194 height: 20px; 195 } 196 .lists_content_headline{ 197 float: left; 198 margin-top: 15px; 199 margin-left: 15px; 200 width: 970px; 201 height: 700px; 202 border: 1px solid; 203 border-color: #a50000; 204 border-radius: 15px; 205 background: #f9f9f9; 206 box-shadow: 5px 5px 2px #aaaaaa; 207 } 208 .lists_content_headline_h{ 209 float: left; 210 margin-top: 10px; 211 margin-left: 20px; 212 width: 550px; 213 height: 20px; 214 215 } 216 .lists_content_headline_hr{ 217 float: left; 218 margin-top: 10px; 219 margin-left: 10px; 220 width: 950px; 221 height: 10px; 222 223 } 224 .lists_content_headline_p{ 225 float: left; 226 margin-top: 10px; 227 margin-left: 20px; 228 width: 950px; 229 height: 230px; 230 } 231 .lists_content_headline_h a:link,.lists_content_headline_h a:visited, 232 .lists_content_headline_h a:hover,.lists_content_headline_h a:active{ 233 text-decoration:none ; 234 color: #e60000; 235 font-size: 16px; 236 } 237 .lists_content_headline_m a:link,.lists_content_headline_m a:visited, 238 .lists_content_headline_m a:hover,.lists_content_headline_m a:active{ 239 text-decoration:none ; 240 color: #666666; 241 font-size: 12px; 242 } 243 .index_content_headline_p a:link,.index_content_headline_p a:visited, 244 .index_content_headline_p a:hover,.index_content_headline_p a:active{ 245 text-decoration:none ; 246 color: #666666; 247 font-size: 16px; 248 } 249 .list_content_nav{ 250 float: left; 251 margin-top: 30px; 252 margin-left: 15px; 253 width: 970px; 254 height: 20px; 255 text-align: center; 256 } 257 .content_content_mbx{ 258 float: left; 259 margin-top: 15px; 260 margin-left: 15px; 261 width: 970px; 262 height: 20px; 263 } 264 .content_content_content{ 265 float: left; 266 margin-top: 15px; 267 margin-left: 15px; 268 width: 970px; 269 height: 960px; 270 border: 1px solid; 271 border-color: #a50000; 272 border-radius: 15px; 273 background: #f9f9f9; 274 box-shadow: 5px 5px 2px #aaaaaa; 275 } 276 .content_content_content_h{ 277 float: left; 278 margin-top: 70px; 279 margin-left: 20px; 280 width: 930px; 281 height: 100px; 282 text-align: center; 283 } 284 .lists_content_content_hr{ 285 margin-left: 10px; 286 width: 930px; 287 } 288 .lists_content_content_h p{ 289 float: left; 290 margin-top: 30px; 291 margin-left: 20px; 292 padding-left: 50px; 293 width: 830px; 294 height: 100px; 295 text-align: center; 296 } 297 .all_footer_content{ 298 float: left; 299 margin-top: 12px; 300 margin-left: 20px; 301 color:#FFFFFF; 302 }
swiper.min.css按照上面圖面中的過程自行引入即可
index.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>中國夢—首頁</title> 6 <!--最好不要使用cdn加速方式，微軟的可以用，谷歌中國還不能用--> 7 <script src="js/jquery-3.3.1.min.js"></script> 8 <link rel="stylesheet" href="css/style.css"> 9 </head> 10 <body> 11 <div id="header"></div> 12 <div id="logo"></div> 13 <div id="nav"></div> 14 <div id="focus"></div> 15 <div id="index_content"> 16 <div class="index_content_headline"> 17 <div class="index_content_headline_h"> 18 <a href="#">頭條要文</a> 19 </div> 20 <div class="index_content_headline_m"> 21 <a href="#">更多</a> 22 </div> 23 <div class="index_content_headline_hr"> 24 <hr> 25 </div> 26 <div class="index_content_headline_p"> 27 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 28 <div style="height: 5px;width: 500px"></div> 29 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 30 <div style="height: 5px;width: 500px"></div> 31 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 32 <div style="height: 5px;width: 500px"></div> 33 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 34 <div style="height: 5px;width: 500px"></div> 35 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 36 <div style="height: 5px;width: 500px"></div> 37 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 38 <div style="height: 5px;width: 500px"></div> 39 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 40 <div style="height: 5px;width: 500px"></div> 41 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 42 <div style="height: 5px;width: 500px"></div> 43 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.........2019/4/8</a><br> 44 <div style="height: 5px;width: 500px"></div> 45 </div> 46 </div> 47 <div class="index_content_box"> 48 <div class="index_content_box_h"> 49 <a href="#">視頻新聞</a> 50 </div> 51 <div class="index_content_box_m"> 52 <a href="#">更多</a> 53 </div> 54 <div class="index_content_box_hr"> 55 <hr> 56 </div> 57 <div class="index_content_box_p"> 58 <video controls 59 oncontextmenu="return false" 60 src="videos/beijingvideo.mp4" 61 poster="videos/beijingvideo.jpg" 62 width="270px" height="auto"> 63 </video> 64 </div> 65 </div> 66 <div class="index_content_box"> 67 <div class="index_content_box_h"> 68 <a href="#">頭條要文</a> 69 </div> 70 <div class="index_content_box_m"> 71 <a href="#">更多</a> 72 </div> 73 <div class="index_content_box_hr"> 74 <hr> 75 </div> 76 <div class="index_content_box_p"> 77 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 78 <div style="height: 5px;width: 500px"></div> 79 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 80 <div style="height: 5px;width: 500px"></div> 81 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 82 <div style="height: 5px;width: 500px"></div> 83 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 84 <div style="height: 5px;width: 500px"></div> 85 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 86 <div style="height: 5px;width: 500px"></div> 87 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 88 <div style="height: 5px;width: 500px"></div> 89 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 90 <div style="height: 5px;width: 500px"></div> 91 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 92 <div style="height: 5px;width: 500px"></div> 93 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 94 <div style="height: 5px;width: 500px"></div> 95 </div> 96 </div> 97 <div class="index_content_box"> 98 <div class="index_content_box_h"> 99 <a href="#">頭條要文</a> 100 </div> 101 <div class="index_content_box_m"> 102 <a href="#">更多</a> 103 </div> 104 <div class="index_content_box_hr"> 105 <hr> 106 </div> 107 <div class="index_content_box_p"> 108 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 109 <div style="height: 5px;width: 500px"></div> 110 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 111 <div style="height: 5px;width: 500px"></div> 112 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 113 <div style="height: 5px;width: 500px"></div> 114 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 115 <div style="height: 5px;width: 500px"></div> 116 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 117 <div style="height: 5px;width: 500px"></div> 118 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 119 <div style="height: 5px;width: 500px"></div> 120 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 121 <div style="height: 5px;width: 500px"></div> 122 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 123 <div style="height: 5px;width: 500px"></div> 124 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 125 <div style="height: 5px;width: 500px"></div> 126 </div> 127 </div> 128 <div class="index_content_box"> 129 <div class="index_content_box_h"> 130 <a href="#">頭條要文</a> 131 </div> 132 <div class="index_content_box_m"> 133 <a href="#">更多</a> 134 </div> 135 <div class="index_content_box_hr"> 136 <hr> 137 </div> 138 <div class="index_content_box_p"> 139 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 140 <div style="height: 5px;width: 500px"></div> 141 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 142 <div style="height: 5px;width: 500px"></div> 143 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 144 <div style="height: 5px;width: 500px"></div> 145 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 146 <div style="height: 5px;width: 500px"></div> 147 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 148 <div style="height: 5px;width: 500px"></div> 149 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 150 <div style="height: 5px;width: 500px"></div> 151 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 152 <div style="height: 5px;width: 500px"></div> 153 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 154 <div style="height: 5px;width: 500px"></div> 155 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 156 <div style="height: 5px;width: 500px"></div> 157 </div> 158 </div> 159 <div class="index_content_box"> 160 <div class="index_content_box_h"> 161 <a href="#">頭條要文</a> 162 </div> 163 <div class="index_content_box_m"> 164 <a href="#">更多</a> 165 </div> 166 <div class="index_content_box_hr"> 167 <hr> 168 </div> 169 <div class="index_content_box_p"> 170 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 171 <div style="height: 5px;width: 500px"></div> 172 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 173 <div style="height: 5px;width: 500px"></div> 174 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 175 <div style="height: 5px;width: 500px"></div> 176 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 177 <div style="height: 5px;width: 500px"></div> 178 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 179 <div style="height: 5px;width: 500px"></div> 180 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 181 <div style="height: 5px;width: 500px"></div> 182 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 183 <div style="height: 5px;width: 500px"></div> 184 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 185 <div style="height: 5px;width: 500px"></div> 186 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 187 <div style="height: 5px;width: 500px"></div> 188 </div> 189 </div> 190 <div class="index_content_box"> 191 <div class="index_content_box_h"> 192 <a href="#">頭條要文</a> 193 </div> 194 <div class="index_content_box_m"> 195 <a href="#">更多</a> 196 </div> 197 <div class="index_content_box_hr"> 198 <hr> 199 </div> 200 <div class="index_content_box_p"> 201 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 202 <div style="height: 5px;width: 500px"></div> 203 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 204 <div style="height: 5px;width: 500px"></div> 205 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 206 <div style="height: 5px;width: 500px"></div> 207 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 208 <div style="height: 5px;width: 500px"></div> 209 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 210 <div style="height: 5px;width: 500px"></div> 211 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 212 <div style="height: 5px;width: 500px"></div> 213 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 214 <div style="height: 5px;width: 500px"></div> 215 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 216 <div style="height: 5px;width: 500px"></div> 217 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 218 <div style="height: 5px;width: 500px"></div> 219 </div> 220 </div> 221 <div class="index_content_box"> 222 <div class="index_content_box_h"> 223 <a href="#">頭條要文</a> 224 </div> 225 <div class="index_content_box_m"> 226 <a href="#">更多</a> 227 </div> 228 <div class="index_content_box_hr"> 229 <hr> 230 </div> 231 <div class="index_content_box_p"> 232 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 233 <div style="height: 5px;width: 500px"></div> 234 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 235 <div style="height: 5px;width: 500px"></div> 236 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 237 <div style="height: 5px;width: 500px"></div> 238 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 239 <div style="height: 5px;width: 500px"></div> 240 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 241 <div style="height: 5px;width: 500px"></div> 242 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 243 <div style="height: 5px;width: 500px"></div> 244 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 245 <div style="height: 5px;width: 500px"></div> 246 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 247 <div style="height: 5px;width: 500px"></div> 248 <a href="#">新聞標題鏈接.新聞標題鏈接.......2019/4/8</a><br> 249 <div style="height: 5px;width: 500px"></div> 250 </div> 251 </div> 252 </div> 253 <div id="footer"></div> 254 </body> 255 <script> 256 $("#header").load("header.html"); 257 $("#logo").load("logo.html"); 258 $("#nav").load("nav.html"); 259 $("#focus").load("focus.html"); 260 $("#footer").load("footer.html"); 261 </script> 262 </html>
focus.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦點圖</title> 6 <!-- Link Swiper's CSS --> 7 <link rel="stylesheet" href="CSS/swiper.min.css"> 8 9 <!-- Demo styles --> 10 <style> 11 html, body { 12 position: relative; 13 height: 100%; 14 } 15 body { 16 font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 17 font-size: 14px; 18 color:#000; 19 margin: 0; 20 padding: 0; 21 } 22 .swiper-container { 23 width: 1000px; 24 height: 500px; 25 26 } 27 .swiper-slide { 28 text-align: center; 29 font-size: 18px; 30 background: #fff; 31 32 /* Center slide text vertically */ 33 display: -webkit-box; 34 display: -ms-flexbox; 35 display: -webkit-flex; 36 display: flex; 37 -webkit-box-pack: center; 38 -ms-flex-pack: center; 39 -webkit-justify-content: center; 40 justify-content: center; 41 -webkit-box-align: center; 42 -ms-flex-align: center; 43 -webkit-align-items: center; 44 align-items: center; 45 } 46 </style> 47 </head> 48 <body> 49 <!-- Swiper --> 50 <div class="swiper-container"> 51 <div class="swiper-wrapper"> 52 <div class="swiper-slide"><img src="IMG/pic_01.jpg" width="100%"></div> 53 <div class="swiper-slide"><img src="IMG/pic_02.jpg" width="100%"></div> 54 <div class="swiper-slide"><img src="IMG/pic_03.jpg" width="100%"></div> 55 <div class="swiper-slide"><img src="IMG/pic_04.jpg" width="100%"></div> 56 <div class="swiper-slide"><img src="IMG/pic_05.jpg" width="100%"></div> 57 </div> 58 <!-- Add Pagination --> 59 <div class="swiper-pagination"></div> 60 <!-- Add Arrows --> 61 <div class="swiper-button-next"></div> 62 <div class="swiper-button-prev"></div> 63 </div> 64 <!-- Swiper JS --> 65 <script src="JS/swiper.min.js"></script> 66 67 <!-- Initialize Swiper激活文件代碼，盡量放在最后面 --> 68 <script> 69 var swiper = new Swiper('.swiper-container', { 70 spaceBetween: 30, 71 centeredSlides: true, 72 autoplay: { 73 delay: 2500, 74 disableOnInteraction: false, 75 }, 76 pagination: { 77 el: '.swiper-pagination', 78 clickable: true, 79 }, 80 navigation: { 81 nextEl: '.swiper-button-next', 82 prevEl: '.swiper-button-prev', 83 }, 84 }); 85 </script> 86 </body> 87 </html>
logo.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>logo</title> 6 </head> 7 <body> 8 <div class="all_logo"></div> 9 </body> 10 </html>
header.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>header</title> 6 </head> 7 <body> 8 <div class="all_header"> 9 <div class="all_header_textbox"> 10 <div class="all_header_textbox_text"> 11 <a href="#">設為首頁 </a> 12 <a href="#">加入收藏</a> 13 </div> 14 </div> 15 </div> 16 </body> 17 </html>
nav.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>導航菜單</title> 6 <link rel="stylesheet" href="css/nav.css"> 7 </head> 8 <body> 9 <nav class="nav"> 10 <ul> 11 <li><a href="#">一級菜單</a> 12 <ul> 13 <li><a href="#">二級菜單</a></li> 14 <li><a href="#">二級菜單</a></li> 15 <li><a href="#">二級菜單</a></li> 16 </ul> 17 </li> 18 <li><a href="#">一級菜單</a> 19 <ul> 20 <li><a href="#">二級菜單</a></li> 21 <li><a href="#">二級菜單</a></li> 22 </ul> 23 </li> 24 <li><a href="#" style="width: 240px">比較寬的一級菜單</a> 25 <ul> 26 <li><a href="#" style="width: 240px">二級菜單</a></li> 27 <li><a href="#" style="width: 240px">二級菜單</a></li> 28 <li><a href="#" style="width: 240px">二級菜單</a></li> 29 <li><a href="#" style="width: 240px">二級菜單</a></li> 30 <li><a href="#" style="width: 240px">二級菜單</a></li> 31 </ul> 32 </li> 33 <li><a href="#">一級菜單</a> 34 <ul> 35 <li><a href="#">二級菜單</a></li> 36 <li><a href="#">二級菜單</a></li> 37 <li><a href="#">二級菜單</a></li> 38 </ul> 39 </li> 40 <li><a href="#">一級菜單</a> 41 <ul> 42 <li><a href="#">二級菜單</a></li> 43 <li><a href="#">二級菜單</a></li> 44 </ul> 45 </li> 46 </ul> 47 </nav> 48 </body> 49 </html>
lists.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>中國夢—列表</title> 6 <!--最好不要使用cdn加速方式，微軟的可以用，谷歌中國還不能用--> 7 <script src="js/jquery-3.3.1.min.js"></script> 8 <link rel="stylesheet" href="css/style.css"> 9 </head> 10 <body> 11 <div id="header"></div> 12 <div id="logo"></div> 13 <div id="nav"></div> 14 <div id="list_content"> 15 <div class="lists_content_mbx"> 16 <p>首頁》頭條要聞列表</p> 17 </div> 18 <div class="lists_content_headline"> 19 <div class="lists_content_headline_h"> 20 <a href="#">頭條要文</a> 21 </div> 22 <div class="lists_content_headline_hr"> 23 <hr> 24 </div> 25 <div class="lists_content_headline_p"> 26 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 27 ...................................................................................2019/4/8</a><br> 28 <div style="height: 10px;width: 500px"></div> 29 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 30 ...................................................................................2019/4/8</a><br> 31 <div style="height: 10px;width: 500px"></div> 32 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 33 ...................................................................................2019/4/8</a><br> 34 <div style="height: 10px;width: 500px"></div> 35 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 36 ...................................................................................2019/4/8</a><br> 37 <div style="height: 10px;width: 500px"></div> 38 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 39 ...................................................................................2019/4/8</a><br> 40 <div style="height: 10px;width: 500px"></div> 41 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 42 ...................................................................................2019/4/8</a><br> 43 <div style="height: 10px;width: 500px"></div> 44 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 45 ...................................................................................2019/4/8</a><br> 46 <div style="height: 10px;width: 500px"></div> 47 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 48 ...................................................................................2019/4/8</a><br> 49 <div style="height: 10px;width: 500px"></div> 50 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 51 ...................................................................................2019/4/8</a><br> 52 <div style="height: 10px;width: 500px"></div> 53 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 54 ...................................................................................2019/4/8</a><br> 55 <div style="height: 10px;width: 500px"></div> 56 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 57 ...................................................................................2019/4/8</a><br> 58 <div style="height: 10px;width: 500px"></div> 59 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 60 ...................................................................................2019/4/8</a><br> 61 <div style="height: 10px;width: 500px"></div> 62 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 63 ...................................................................................2019/4/8</a><br> 64 <div style="height: 10px;width: 500px"></div> 65 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 66 ...................................................................................2019/4/8</a><br> 67 <div style="height: 10px;width: 500px"></div> 68 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 69 ...................................................................................2019/4/8</a><br> 70 <div style="height: 10px;width: 500px"></div> 71 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 72 ...................................................................................2019/4/8</a><br> 73 <div style="height: 10px;width: 500px"></div> 74 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 75 ...................................................................................2019/4/8</a><br> 76 <div style="height: 10px;width: 500px"></div> 77 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 78 ...................................................................................2019/4/8</a><br> 79 <div style="height: 10px;width: 500px"></div> 80 <a href="#">新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接.新聞標題鏈接 81 ...................................................................................2019/4/8</a><br> 82 </div> 83 </div> 84 <div class="list_content_nav"> 85 <p >上一頁<<..1..2..3..4..5..>>下一頁</p> 86 </div> 87 </div> 88 89 90 <div id="footer"></div> 91 </body> 92 <script> 93 $("#header").load("header.html"); 94 $("#logo").load("logo.html"); 95 $("#nav").load("nav.html"); 96 $("#footer").load("footer.html"); 97 </script> 98 </body> 99 </html>
contents.html
1 <!DOCTYPE html> 2 <html lang="ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>中國夢—內容頁</title> 6 <!--最好不要使用cdn加速方式，微軟的可以用，谷歌中國還不能用--> 7 <script src="js/jquery-3.3.1.min.js"></script> 8 <link rel="stylesheet" href="css/style.css"> 9 </head> 10 <body> 11 <div id="header"></div> 12 <div id="logo"></div> 13 <div id="nav"></div> 14 <div id="content_content"> 15 <div class="content_content_mbx"> 16 <p>首頁》頭條要聞列表>>內容</p> 17 </div> 18 <div class="content_content_content"> 19 <div class="content_content_content_h"> 20 <p style="font-size: 24px">新聞標題</p> 21 </div> 22 <div class="lists_content_content_hr"> 23 <hr> 24 </div> 25 <div class="lists_content_content_p"> 26 <p> 27 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 28 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 29 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 30 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 31 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 32 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 33 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 34 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 35 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 36 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容</p> 37 <br> 38 <p> 39 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 40 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 41 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 42 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 43 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 44 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 45 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 46 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 47 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 48 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容</p> 49 <br> 50 <p> 51 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 52 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 53 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 54 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 55 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 56 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 57 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 58 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 59 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容 60 新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容新聞內容</p> 61 </div> 62 </div> 63 <div class="list_content_nav"> 64 <p >上一頁<<..1..2..3..4..5..>>下一頁</p> 65 </div> 66 </div> 67 <div id="footer"></div> 68 </body> 69 <script> 70 $("#header").load("header.html"); 71 $("#logo").load("logo.html"); 72 $("#nav").load("nav.html"); 73 $("#content").load("content.html"); 74 $("#footer").load("footer.html"); 75 </script> 76 </html>
以上就是全部內容了，老規矩，如若對你有幫助，記得推薦一下，如若有誤，歡迎指正，轉載請說明出處https://www.cnblogs.com/zyx110/，謝謝！