Web实训项目--网页设计（附源码）

1. <style>
2. .slide{
3. width: 60%;
4. margin: 0 auto;
5. position: relative;
6.         }
7.           *{
8. margin: 0;
9. padding: 0;
10. list-style: none;
11. text-decoration: none;
12.         }
13. .a{
14. text-decoration: none;
15.         }
16. .head{
17. width: 100%;
18. background-color: rgba(0, 0, 0, 0.8);
19. text-align: center;
20. box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
21. /* position: fixed; */
22. left: 0;
23. right: 0;
24. top: 0;
25.         }
26. .head img{
27. width: 110px;
28. height: 32px;
29. padding-top: 7px;
30.         }
31. .con{
32. padding-bottom: 5px;
33.         }
34. .con a{
35. color: #a8a8a8;
36. font-weight: 200px;
37. font-size: 14px;
38. margin: 0 52px;
39.         }
40. .aa{
41. background-color:wheat;
42. height: 1200px;
43. top: 0px;
44.         }
45. .iconfont-shipin{
46. color: crimson;
47. width: 20px;
48. height: 20px;
49.         }
50. .txt1{
51. margin-left :130px;
52. width: 1010px;
53. text-align: center;
54. text-indent: 4em;
55. color:rgb(100,100,100)
56.         }
57. body{
58. /* 视口 */
59. perspective: 1000px;
60.         }
61. /* 关键帧动画 可一直执行 */
62. @keyframes gjzhen{
63. 0%{
64. transform: rotateX(-10deg) rotateY(0deg);
65.             }
66. 50%{
67. transform: rotateX(10deg) rotateY(180deg);
68.             } 
69. 100%{
70. transform: rotateX(-10deg) rotateY(360deg);
71.             }
72.         }
73. .wrap{
74. width: 100px;
75. height: 100px;
76. /* margin: 150px auto; */
77. margin-top: 60px;
78. margin-left: 615px;
79. position: relative;
80. /* 添加3d效果，使li标签具有3d效果 */
81. transform-style: preserve-3d;
82. /* 翻转整个容器 */
83. transform: rotateX(-10deg);
84. /* 添加关键帧动画 */
85. animation: gjzhen 7s infinite linear;
86.         }
87. .wrap li{
88. width: 133px;
89. height: 200px;
90. position: absolute;
91. top: 0;
92. left: 0;
93. /* border: 1px solid red; */
94. border-radius: 10%;
95.         }
96. .wrap li>img{
97. width: 100%;
98. height: 100%;
99. border-radius: 10%;
100. vertical-align: top;
101.             -webkit-box-reflect: below 10px linear-gradient(to top, red ,
102.             transparent 50%);
103.         }
104. .wrap li:nth-child(1){
105. transform: translateZ(300px);
106.         }
107. .wrap li:nth-child(2){
108. transform: rotateY(-60deg) translateZ(300px);
109.         }
110. .wrap li:nth-child(3){
111. transform: rotateY(-120deg) translateZ(300px);
112.         }
113. .wrap li:nth-child(4){
114. transform: rotateY(-180deg) translateZ(300px);
115.         }
116. .wrap li:nth-child(5){
117. transform: rotateY(-240deg) translateZ(300px);
118.         }
119. .wrap li:nth-child(6){
120. transform: rotateY(-300deg) translateZ(300px);
121.         }
122. .wrap li:nth-child(7){
123. transform: rotateY(-360deg) translateZ(300px);
124.         }
125. .border{
126. width: 1510px;
127. margin: 30px auto;
128. border: 1px solid rgb(100,100,100);
129. position: relative;
130. left: -100px;
131.         }
132. .models{
133. position: absolute;
134. width: 1000px;
135. left: 350px;
136. top: 1210px;
137.         }
138. .model{
139. display:block;
140. width: 240px;
141. text-align: center;
142. float: left;
143. margin: 20px;
144.         }
145. .img{
146. position: relative;
147.         }
148. .img .mark{
149. position: absolute;
150. top: 0;
151. left: 0;
152. right: 0;
153. bottom: 0;
154. background-color:rgba(0, 0,0, 0.6);
155. color: antiquewhite;
156. font-size: 14px;
157. opacity: 0;
158. margin-top: 20px;
159. transition: all 0.5s;
160.         }
161. .model img{
162. width: 100%;
163.         }
164. .img h2{
165. font-size: 30px;
166. margin-top: 30px;
167.         }
168. .model .txt{
169. padding: 7px 0;
170. background-color: rgba(red, 0, 0, 0.6);
171. color: #aaa;
172. border-radius: 0 0 10px 10px;
173. box-shadow: 1px 1px 2px rgba(0, 0,0 , 0.6);
174.         }
175. .img img, .img .mark{
176. border-radius: 10px 10px 0 0;
177. box-shadow: 1px 1px 2px rgba(0, 0,0 , 0.6);
178.         }
179. /* 悬浮状态 */
180. .model:hover .mark{
181. opacity: 1;
182.         }
183. .tb{
184. width:1010px;
185. margin: 0 auto;
186. margin-left: 200px;
187. margin-top: 240px;
188.         }
189. .tb img{
190. width:50px;
191. margin-top: 1000;
192. font-size: 0px;
193. margin: 20px;
194.         }
195. .aaa{
196. position:absolute;
197. top:550px;
198. left:100px;
199.         }
200. .wb1{
201. width:48%;
202. float: left;
203. margin-bottom: 15px;
204. padding: 0 7px;
205. margin-top: -22px;
206. border-left:1px solid #666;
207.         }
208. .wb{
209. position: relative;
210. width: 100%;
211. background-color:#666;
212. top:1040px;
213.         }
214. .wb .imgs{
215. width: 50%;
216. padding: 0 7px;
217. margin-top:10px;
218. float: left;
219.         }
220. .wb .imgs img{
221. width: 40px;
222. float: right;
223.         }
224. .wb1 img{
225. width: 65px;
226. height: 35px;
227.         }
228. .wb1 p{
229. display: block;
230. font-size: 14px;
231. color: #666;
232. text-shadow: 1px 1px 1px white;
233. margin-bottom: 5px;  
234.         } 
235. .hh{
236. position: relative;
237. height: 300px;
238. width: 100%;
239. background-color: rgba(200, 200, 200, 0.6);
240. top:1010px;
241.         }
242. .video{
243. border-radius: 10%;
244. /* text-align: center; */
245. width: 360px;
246. height: 200px;
247. margin-left: 246px;
248.         }
249. </style>

1. <body>
2. <!-- 第一部分 -->
3. <a name="首页"></a>
4. <div class="head">
5. <img src="./图片/Title.png" alt="" class="logo">
6. <div class="con">
7. <a href="#首页"class="a">首页</a>
8. <a href="#内容"class="a">内容</a>
9. <a href="#视频"class="a">视频</a>
10. <a href="#联系"class="a">联系</a>
11. </div>
12. </div>
13. <!-- 第二部分 -->
14. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
15. <!-- Indicators -->
16. <ol class="carousel-indicators">
17. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
18. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
19. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
20. </ol>
21. <!-- Wrapper for slides -->
22. <div class="carousel-inner" role="listbox">
23. <div class="item active">
24. <img src="./图片/1.jpg" alt="图片加载错误">
25. <div class="carousel-caption">
26. <p class="txt">图片1</p>
27. </div>
28. </div>
29. <div class="item">
30. <img src="./图片/2.jpg" alt="图片加载错误">
31. <div class="carousel-caption">
32. <p class="txt">图片2</p>
33. </div>
34. </div>
35. <div class="item">
36. <img src="./图片/3.jpg" alt="图片加载错误">
37. <div class="carousel-caption">
38. <p class="txt">图片3</p>
39. </div>
40. </div>
41. </div>
42. <!-- Controls -->
43. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
44. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
45. <span class="sr-only">Previous</span></a>
46. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
47. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
48. <span class="sr-only">Next</span></a>
49. </div>
50. <!-- 第三部分 -->
51. <div class="aaa">
52. <div class="border"></div>
53. <a name="简介"></a>
54. <p class="txt1"><a href="https://baike.baidu.com/item/%E5%95%86%E4%B8%98%E5%8F%A4%E5%9F%8E/2486591?fr=aladdin">商丘古城</a>
55.   是国家历史文化名城、全国重点文物保护单位、国家AAAA级旅游景区、国家水利风景区，位于
56. <a href="https://baike.baidu.com/item/%E7%9D%A2%E9%98%B3%E5%8C%BA/2366870">河南省商丘市睢阳区</a>。
57.   它是世界上唯一一座集八卦城、水中城、城摞城三位一体的大型古城遗址，曾获评“中国华侨国际文化交流基地”。</p>
58. <div class="border"></div>
59. <a name="内容"></a>
60. <ul class="wrap">
61. <li><img src="./图片/4.jpeg"></li>
62. <li><img src="./图片/5.jpeg"></li>
63. <li><img src="./图片/6.jpeg"></li>
64. <li><img src="./图片/7.jpg"></li>
65. <li><img src="./图片/8.jpeg"></li>
66. <li><img src="./图片/9.jpeg"></li>
67. </ul>
68. <!-- 第四部分 -->
69. <div class="tb">
70. <img src="./图片/Symbol.jpg">
71. <img src="./图片/Symbol.jpg">
72. <img src="./图片/Symbol.jpg">
73. <img src="./图片/Symbol.jpg">
74. <img src="./图片/Symbol.jpg">
75. <img src="./图片/Symbol.jpg">
76. <img src="./图片/Symbol.jpg">
77. <img src="./图片/Symbol.jpg">
78. <img src="./图片/Symbol.jpg">
79. <img src="./图片/Symbol.jpg">
80. </div>
81. <div class="border"></div>
82. </div>
83. <!-- 第五部分 -->
84. <div class="models">
85. <a href="#" class="model">
86. <div class="img">
87. <img src="./图片/1.jpg">
88. <div class="mark">
89. <h2>应天书院</h2>
90. <p>应天书院</p>
91. </div>
92. </div>
93. <div class="txt">应天书院</div>
94. </a>
95. <a href="#" class="model">
96. <div class="img">
97. <img src="./图片/2.jpg">
98. <div class="mark">
99. <h2>古南城门</h2>
100. <p>古南城门</p>
101. </div>
102. </div>
103. <div class="txt">古南城门</div>
104. </a>
105. <a href="#" class="model">
106. <div class="img">
107. <img src="./图片/3.jpg">
108. <div class="mark">
109. <h2>防御城墙</h2>
110. <p>防御城墙</p>
111. </div>
112. </div>
113. <div class="txt">防御城墙</div>
114. </a>
115. <a name="视频">
116. <video class="video" src="./商丘古城--夜景.mp4" controls></video>
117. </a>
118. </div>
119. <!-- 第六部分 -->
120. <div class="wb">
121. <div class="imgs">
122. <img src="./图片/Title.png">
123. <img src="./图片/Title.png">
124. <img src="./图片/Title.png">
125. </div>
126. <div class="border"></div>
127. <a name="联系"></a>
128. <div class="wb1">
129. <img src="./图片/Title.png">
130. <p>商丘古城</p>
131. <p>河南省商丘市睢阳区</p>
132. <p>TEL : 010-123456789</p>
133. <p>QQ : 123456</p>
134. <p>Email : shangqiugucheng@foxmail.com</p>
135. <p>weibo : @shangqiuStudio</p>
136. </div>
137. </div>
138. <div class="hh"></div>
139. </body>

1. <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
2. integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
3. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
4. integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
5. <script>
6.     $('.carousel').carousel({
7.   interval: 2000
8. })
9. </script>