zoukankan html css js c++ java

网页设计案例

页面效果

实现源码：

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; 500px"></div>
 29             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 30             <div style="height: 5px; 500px"></div>
 31             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 32             <div style="height: 5px; 500px"></div>
 33             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 34             <div style="height: 5px; 500px"></div>
 35             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 36             <div style="height: 5px; 500px"></div>
 37             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 38             <div style="height: 5px; 500px"></div>
 39             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 40             <div style="height: 5px; 500px"></div>
 41             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 42             <div style="height: 5px; 500px"></div>
 43             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.........2019/4/8</a><br>
 44             <div style="height: 5px; 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; 500px"></div>
 79             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 80             <div style="height: 5px; 500px"></div>
 81             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 82             <div style="height: 5px; 500px"></div>
 83             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 84             <div style="height: 5px; 500px"></div>
 85             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 86             <div style="height: 5px; 500px"></div>
 87             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 88             <div style="height: 5px; 500px"></div>
 89             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 90             <div style="height: 5px; 500px"></div>
 91             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 92             <div style="height: 5px; 500px"></div>
 93             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
 94             <div style="height: 5px; 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; 500px"></div>
110             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
111             <div style="height: 5px; 500px"></div>
112             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
113             <div style="height: 5px; 500px"></div>
114             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
115             <div style="height: 5px; 500px"></div>
116             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
117             <div style="height: 5px; 500px"></div>
118             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
119             <div style="height: 5px; 500px"></div>
120             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
121             <div style="height: 5px; 500px"></div>
122             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
123             <div style="height: 5px; 500px"></div>
124             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
125             <div style="height: 5px; 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; 500px"></div>
141             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
142             <div style="height: 5px; 500px"></div>
143             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
144             <div style="height: 5px; 500px"></div>
145             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
146             <div style="height: 5px; 500px"></div>
147             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
148             <div style="height: 5px; 500px"></div>
149             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
150             <div style="height: 5px; 500px"></div>
151             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
152             <div style="height: 5px; 500px"></div>
153             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
154             <div style="height: 5px; 500px"></div>
155             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
156             <div style="height: 5px; 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; 500px"></div>
172             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
173             <div style="height: 5px; 500px"></div>
174             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
175             <div style="height: 5px; 500px"></div>
176             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
177             <div style="height: 5px; 500px"></div>
178             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
179             <div style="height: 5px; 500px"></div>
180             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
181             <div style="height: 5px; 500px"></div>
182             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
183             <div style="height: 5px; 500px"></div>
184             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
185             <div style="height: 5px; 500px"></div>
186             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
187             <div style="height: 5px; 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; 500px"></div>
203             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
204             <div style="height: 5px; 500px"></div>
205             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
206             <div style="height: 5px; 500px"></div>
207             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
208             <div style="height: 5px; 500px"></div>
209             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
210             <div style="height: 5px; 500px"></div>
211             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
212             <div style="height: 5px; 500px"></div>
213             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
214             <div style="height: 5px; 500px"></div>
215             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
216             <div style="height: 5px; 500px"></div>
217             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
218             <div style="height: 5px; 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; 500px"></div>
234             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
235             <div style="height: 5px; 500px"></div>
236             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
237             <div style="height: 5px; 500px"></div>
238             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
239             <div style="height: 5px; 500px"></div>
240             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
241             <div style="height: 5px; 500px"></div>
242             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
243             <div style="height: 5px; 500px"></div>
244             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
245             <div style="height: 5px; 500px"></div>
246             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
247             <div style="height: 5px; 500px"></div>
248             <a href="#">新闻标题链接.新闻标题链接.......2019/4/8</a><br>
249             <div style="height: 5px; 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="#">设为首页 &nbsp;</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=" 240px">比较宽的一级菜单</a>
25             <ul>
26                 <li><a href="#" style=" 240px">二级菜单</a></li>
27                 <li><a href="#" style=" 240px">二级菜单</a></li>
28                 <li><a href="#" style=" 240px">二级菜单</a></li>
29                 <li><a href="#" style=" 240px">二级菜单</a></li>
30                 <li><a href="#" style=" 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; 500px"></div>
29             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
30                 ...................................................................................2019/4/8</a><br>
31             <div style="height: 10px; 500px"></div>
32             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
33                 ...................................................................................2019/4/8</a><br>
34             <div style="height: 10px; 500px"></div>
35             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
36                 ...................................................................................2019/4/8</a><br>
37             <div style="height: 10px; 500px"></div>
38             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
39                 ...................................................................................2019/4/8</a><br>
40             <div style="height: 10px; 500px"></div>
41             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
42                 ...................................................................................2019/4/8</a><br>
43             <div style="height: 10px; 500px"></div>
44             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
45                 ...................................................................................2019/4/8</a><br>
46             <div style="height: 10px; 500px"></div>
47             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
48                 ...................................................................................2019/4/8</a><br>
49             <div style="height: 10px; 500px"></div>
50             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
51                 ...................................................................................2019/4/8</a><br>
52             <div style="height: 10px; 500px"></div>
53             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
54                 ...................................................................................2019/4/8</a><br>
55             <div style="height: 10px; 500px"></div>
56             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
57                 ...................................................................................2019/4/8</a><br>
58             <div style="height: 10px; 500px"></div>
59             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
60                 ...................................................................................2019/4/8</a><br>
61             <div style="height: 10px; 500px"></div>
62             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
63                 ...................................................................................2019/4/8</a><br>
64             <div style="height: 10px; 500px"></div>
65             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
66                 ...................................................................................2019/4/8</a><br>
67             <div style="height: 10px; 500px"></div>
68             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
69                 ...................................................................................2019/4/8</a><br>
70             <div style="height: 10px; 500px"></div>
71             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
72                 ...................................................................................2019/4/8</a><br>
73             <div style="height: 10px; 500px"></div>
74             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
75                 ...................................................................................2019/4/8</a><br>
76             <div style="height: 10px; 500px"></div>
77             <a href="#">新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接.新闻标题链接
78                 ...................................................................................2019/4/8</a><br>
79             <div style="height: 10px; 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
27                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
28                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
29                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
30                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
31                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
32                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
33                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
34                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
35                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
36                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
37             <br>
38             <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
39                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
40                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
41                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
42                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
43                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
44                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
45                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
46                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
47                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
48                 新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
49             <br>
50             <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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/，谢谢！

查看全文

相关阅读:
[DB] 数据库的连接
 JS leetcode 翻转字符串里的单词题解分析
 JS leetcode 拥有最多糖果的孩子题解分析，六一快乐。
JS leetcode 搜索插入位置题解分析
 JS leetcode 杨辉三角Ⅱ 题解分析
 JS leetcode 寻找数组的中心索引题解分析
 JS leetcode 移除元素题解分析
 JS leetcode 最大连续1的个数题解分析
 JS leetcode 两数之和 II
JS leetcode 反转字符串题解分析

原文地址：https://www.cnblogs.com/zyx110/p/10670106.html

网页设计案例

页面效果

实现源码：

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.jsswiper.min.js

将下载后的jQuery复制到相应的js文件夹中

css

nav.css

style.css

swiper.min.css按照上面图面中的过程自行引入即可

index.html

focus.html

logo.html

header.html

nav.html

lists.html

contents.html

以上就是全部内容了，老规矩，如若对你有帮助，记得推荐一下，如若有误，欢迎指正，转载请说明出处https://www.cnblogs.com/zyx110/，谢谢！

jquery-3.3.1.min.js
swiper.min.js