当前位置:   article > 正文

绝美西藏风景学生网页设计 高达30个页面 每页都有超长超丰富的布局内容 满满的都是工作量_藏文化网页设计

藏文化网页设计

 

 

 

 

 

30个页面,美观度较高,这是我目前做过的页面的数量最多、填充内容也最多的网页设计作品,一级页面的整体长度很长,内容殷实,二三级页面融入各项前端网页知识点。网站共有三层深度,一级菜单栏可下拉,二级菜单栏可进入更深一层级页面,拥有登录、注册页、留言表单页、视频页,功能设计合理且丰满;首页有js轮播banner图、js鼠标划过卡片特效,其他页面也均有较多的鼠标划过效果:如放大、变色,增加边框等;各页面的内容排版填充比较丰富,图片素材的选择也较有考究,整体美观大方,是一份投入工作量非常大的毕业设计作品~

绝美西藏风景学生网页设计 高达30个页面 每页都有超长超丰富的布局内容 满满的都是工作量

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />
  6. <title>初识雪域</title>
  7. <link rel="stylesheet" href="css/style.css">
  8. <link rel=stylesheet type=text/css href="css/banner.css">
  9. <link rel="stylesheet" type="text/css" href="css/card.css">
  10. <script src="js/jquery.js"></script>
  11. <script src="js/card.js"></script>
  12. <style type="text/css">
  13. body {
  14. margin-left: 0px;
  15. margin-top: 0px;
  16. margin-right: 0px;
  17. margin-bottom: 0px;/*定义页面上下左右边距为0*/
  18. font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字体集 */
  19. }
  20. a:link {
  21. color: #ffffff;
  22. text-decoration: none;
  23. }
  24. a:visited {
  25. text-decoration: none;
  26. color: #ffffff;
  27. }
  28. a:hover {
  29. text-decoration: none;
  30. color: #e3ffff;
  31. }
  32. a:active {
  33. text-decoration: none;
  34. }
  35. .c-title {/* 栏目标题样式设置 */
  36. height: 26px;
  37. width: 140px;
  38. margin-right: auto;
  39. margin-left: auto;
  40. font-size: 1.3em;
  41. font-weight: bold;
  42. color: #000;
  43. text-align: center;
  44. line-height: 26px;
  45. padding-top: 50px;
  46. }
  47. .a_line {/* 分割线 */
  48. background-color: #0083f7;
  49. height: 4px;
  50. width: 60px; /* 设置一个固定尺寸的盒子作为装饰分割线 */
  51. margin-top: 20px;
  52. margin-right: auto;
  53. margin-left: auto;
  54. border-radius: 4px; /* 圆角设置 */
  55. }
  56. .index-iamges .button-01:hover {
  57. height: 56px;
  58. line-height: 56px;
  59. margin-top: 43px;
  60. border-radius: 56px;
  61. background-color: rgba(0,131,247,0.8); /* 背景色改变 */
  62. transition: all .3s; /* 0.4s过渡效果 */
  63. letter-spacing: 3px; /* 字间距加宽,这样随着盒子变宽字间距跟着变宽看起来更协调一些 */
  64. font-size: 18px;
  65. font-weight: bold;
  66. letter-spacing:3px;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div class="topbar"><!-- 顶栏通栏 -->
  72. <div class="titleblock"><!-- 顶栏中部 -->
  73. <div class="logo"><!-- logo --><a href="index.html"><img src="images/logo.png"></a></div>
  74. <div class="search"><!-- 搜索框 -->
  75. <input type="text" value="搜索" onmouseover="this.style.borderColor='#0083f7'" onmouseout="this.style.borderColor=''" onFocus="if (value =='搜索'){value =''}" onBlur="if (value ==''){value='搜索'}"/>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- 横向导航开始 -->
  80. <div class="nav01">
  81. <div id="bar" class="clear">
  82. <ul>
  83. <li><a href="index.html">网站主页</a></li>
  84. <li><a href="list01.html">古城寻迹</a></li>
  85. <li><a href="card.html">藏族文化</a></li>
  86. <li><a href="list02.html">玉盘珍馐</a></li>
  87. <li><a href="video.html">藏美止宿</a></li>
  88. <li><a href="shop.html">文创周边</a></li>
  89. <li><a href="guide.html">出行指南</a></li>
  90. <li><a href="share.html">游记分享</a></li>
  91. <li><a href="#">更多相关 <img src="images/down.svg" width="10" height="10"></a>
  92. <ul>
  93. <li><a href="page.html">最新资讯</a></li>
  94. <li><a href="login.html">登录本站</a></li>
  95. <li><a href="register.html">注册本站</a></li>
  96. <li><a href="message.html">给我留言</a></li>
  97. </ul></li>
  98. </ul>
  99. </div>
  100. </div>
  101. <!-- 横向导航END -->
  102. <!-- 轮播图开始 -->
  103. <div class="banner">
  104. <ul class="list"><!-- 图片序列 -->
  105. <a href="#">
  106. <li class="item active"><img src="images/banner01.jpg" alt="" width="100%" ></li>
  107. </a>
  108. <a href="#">
  109. <li class="item"><img src="images/banner02.jpg" alt="" width="100%"></li>
  110. </a>
  111. <a href="#">
  112. <li class="item"><img src="images/banner03.jpg" alt="" width="100%"></li>
  113. </a>
  114. <a href="#">
  115. <li class="item"><img src="images/banner04.jpg" alt="" width="100%"></li>
  116. </a>
  117. <a href="#">
  118. <li class="item"><img src="images/banner05.jpg" alt="" width="100%"></li>
  119. </a>
  120. </ul>
  121. <ul class="pointList"><!-- 圆点 -->
  122. <li class="point active" data-index="0"></li>
  123. <li class="point" data-index="1"></li>
  124. <li class="point" data-index="2"></li>
  125. <li class="point" data-index="3"></li>
  126. <li class="point" data-index="4"></li>
  127. </ul>
  128. <button class="btn" id="left"><img src="images/left.png" width="20" height="20"></button><!-- 轮播图左右按钮 -->
  129. <button class="btn" id="right"><img src="images/right.png" width="20" height="20"></button>
  130. </div>
  131. <script type="text/javascript" src="js/banner.js"></script> <!-- 引入js代码 -->
  132. <!-- 轮播图结束 -->
  133. <!-- 版块分类开始 -->
  134. <div class="c-title">推荐版块</div>
  135. <div class="a_line"></div>
  136. <div class="icon-list">
  137. <div class="icon-list-mi"><table width="100%" border="0">
  138. <tr>
  139. <td height="34" align="center">&nbsp;</td>
  140. </tr>
  141. <tr>
  142. <td height="69" align="center"><img src="images/icon01.png" width="55" height="55"></td>
  143. </tr>
  144. <tr>
  145. <td height="37" align="center"><h2><a href="card.html" class="black1">藏族文化</a></h2></td>
  146. </tr>
  147. <tr>
  148. <td align="center"><table width="85%" border="0">
  149. <tr>
  150. <td align="center">Here you fully understand Tibetan culture, let's get started ...</td>
  151. </tr>
  152. </table></td>
  153. </tr>
  154. <tr>
  155. <td align="center">&nbsp;</td>
  156. </tr>
  157. </table>
  158. </div>
  159. <div class="icon-list-mi">
  160. <table width="100%" border="0">
  161. <tr>
  162. <td height="34" align="center">&nbsp;</td>
  163. </tr>
  164. <tr>
  165. <td height="69" align="center"><img src="images/icon02.png" alt="" width="55" height="55"></td>
  166. </tr>
  167. <tr>
  168. <td height="37" align="center"><h2><a href="list02.html" class="black1">玉盘珍馐</a></h2></td>
  169. </tr>
  170. <tr>
  171. <td align="center"><table width="85%" border="0">
  172. <tr>
  173. <td align="center">What delicious foods are there to visit when traveling to Tibet? ...</td>
  174. </tr>
  175. </table></td>
  176. </tr>
  177. <tr>
  178. <td align="center">&nbsp;</td>
  179. </tr>
  180. </table>
  181. </div>
  182. <div class="icon-list-mi">
  183. <table width="100%" border="0">
  184. <tr>
  185. <td height="34" align="center">&nbsp;</td>
  186. </tr>
  187. <tr>
  188. <td height="69" align="center"><img src="images/icon03.png" alt="" width="55" height="55"></td>
  189. </tr>
  190. <tr>
  191. <td height="37" align="center"><h2><a href="guide.html" class="black1">出行指南</a></h2></td>
  192. </tr>
  193. <tr>
  194. <td align="center"><table width="85%" border="0">
  195. <tr>
  196. <td align="center">For a trip to Tibet, just read the travel guide and precautions here ...</td>
  197. </tr>
  198. </table></td>
  199. </tr>
  200. <tr>
  201. <td align="center">&nbsp;</td>
  202. </tr>
  203. </table>
  204. </div>
  205. <div class="icon-list-mi">
  206. <table width="100%" border="0">
  207. <tr>
  208. <td height="34" align="center">&nbsp;</td>
  209. </tr>
  210. <tr>
  211. <td height="69" align="center"><img src="images/icon04.png" alt="" width="55" height="55"></td>
  212. </tr>
  213. <tr>
  214. <td height="37" align="center"><h2><a href="message.html" class="black1">给我留言</a></h2></td>
  215. </tr>
  216. <tr>
  217. <td align="center"><table width="85%" border="0">
  218. <tr>
  219. <td align="center">If you have any suggestions, you can leave me a message here ...</td>
  220. </tr>
  221. </table></td>
  222. </tr>
  223. <tr>
  224. <td align="center">&nbsp;</td>
  225. </tr>
  226. </table>
  227. </div>
  228. </div>
  229. <div class="c-title">相关导读</div>
  230. <div class="a_line"></div>
  231. <!-- 可滑动弹出卡片代码 开始 -->
  232. <div class="common-001">
  233. <ul>
  234. <li class="listbox mr20">
  235. <div class="listimg"> <img src="images/01.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  236. <div class="summary">
  237. <div class="summarytxt">
  238. <p>想去拉萨,布达拉宫,林芝,大昭寺,羊湖,纳木错等景点...</p>
  239. </div>
  240. </div>
  241. </div>
  242. <div class="listinfo">
  243. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】西藏经典旅游</a></div>
  244. <div class="listtag"><a href="#" rel="tag" class="black">头条</a><a href="#" rel="tag" class="black">资讯</a></div>
  245. <div class="listdate">2023-04-19</div>
  246. <div class="listview">6253</div>
  247. <div class="listcomment">99</div>
  248. <div class="listdemo"><a href="#" rel="external nofollow" class="black">详情</a></div>
  249. </div>
  250. </li>
  251. <li class="listbox mr20">
  252. <div class="listimg"> <img src="images/02.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  253. <div class="summary">
  254. <div class="summarytxt">
  255. <p>布达拉宫屹立在西藏首府拉萨市区西北的红山上,是一座规模宏大的宫堡式建筑群...</p>
  256. </div>
  257. </div>
  258. </div>
  259. <div class="listinfo">
  260. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】西藏必去的20个景点</a></div>
  261. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  262. <div class="listdate">2023-04-19</div>
  263. <div class="listview">6253</div>
  264. <div class="listcomment">87</div>
  265. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  266. </div>
  267. </li>
  268. <li class="listbox mr20">
  269. <div class="listimg"> <img src="images/03.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  270. <div class="summary">
  271. <div class="summarytxt">
  272. <p>人生总要有一次说走就走的旅行,去西藏,去看天、看地、天山、看水...</p>
  273. </div>
  274. </div>
  275. </div>
  276. <div class="listinfo">
  277. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】说走就走的旅行</a></div>
  278. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  279. <div class="listdate">2023-04-19</div>
  280. <div class="listview">3253</div>
  281. <div class="listcomment">33</div>
  282. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  283. </div>
  284. </li>
  285. <li class="listbox mr20">
  286. <div class="listimg"> <img src="images/04.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  287. <div class="summary">
  288. <div class="summarytxt">
  289. <p>一个来了就不想走的地方,这里既神秘又神圣,有澄澈的天空、静谧的湖水、壮阔的雪山...</p>
  290. </div>
  291. </div>
  292. </div>
  293. <div class="listinfo">
  294. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】二十个美如画的自然风景</a></div>
  295. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  296. <div class="listdate">2023-04-19</div>
  297. <div class="listview">253</div>
  298. <div class="listcomment">55</div>
  299. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  300. </div>
  301. </li>
  302. <li class="listbox mr20">
  303. <div class="listimg"> <img src="images/05.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  304. <div class="summary">
  305. <div class="summarytxt">
  306. <p>四月的拉萨,暖风初至,熙攘的城市街头渐渐被春天“涂”上了浪漫的粉色、玫红色、白色…</p>
  307. </div>
  308. </div>
  309. </div>
  310. <div class="listinfo">
  311. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】一花知春 拉萨的春意藏</a></div>
  312. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  313. <div class="listdate">2023-04-19</div>
  314. <div class="listview">1500</div>
  315. <div class="listcomment">87</div>
  316. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  317. </div>
  318. </li>
  319. <li class="listbox mr20">
  320. <div class="listimg"> <img src="images/06.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  321. <div class="summary">
  322. <div class="summarytxt">
  323. <p>一对新人在布达拉宫前拍摄结婚照,他们面对镜头还有些羞涩。布达拉宫座落在海拔...</p>
  324. </div>
  325. </div>
  326. </div>
  327. <div class="listinfo">
  328. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】高清大图!遇见最美雪域</a></div>
  329. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  330. <div class="listdate">2023-04-18</div>
  331. <div class="listview">2553</div>
  332. <div class="listcomment">35</div>
  333. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  334. </div>
  335. </li>
  336. <li class="listbox mr20">
  337. <div class="listimg"> <img src="images/07.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  338. <div class="summary">
  339. <div class="summarytxt">
  340. <p>这里有浩瀚的天空和苍茫的大地这里有雄伟洁白的神山,蔚蓝空灵的圣湖...</p>
  341. </div>
  342. </div>
  343. </div>
  344. <div class="listinfo">
  345. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】梦想中的天堂</a></div>
  346. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  347. <div class="listdate">2023-04-18</div>
  348. <div class="listview">654</div>
  349. <div class="listcomment">5</div>
  350. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  351. </div>
  352. </li>
  353. <li class="listbox mr20">
  354. <div class="listimg"> <img src="images/08.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
  355. <div class="summary">
  356. <div class="summarytxt">
  357. <p>雅鲁藏布大峡谷旅游景区,位于西藏自治区林芝市境内,是林芝市最受游客欢迎...</p>
  358. </div>
  359. </div>
  360. </div>
  361. <div class="listinfo">
  362. <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】雅鲁藏布大峡谷旅游景区</a></div>
  363. <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
  364. <div class="listdate">2023-04-19</div>
  365. <div class="listview">361</div>
  366. <div class="listcomment">19</div>
  367. <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
  368. </div>
  369. </li>
  370. </ul>
  371. </div>
  372. <!-- 中间内容引导开始 -->
  373. <div class="s-banner">
  374. <div class="s-banner-text">搜索你想要的内容...</div>
  375. <div class="search">
  376. <div class="search-input"><input name="textfield" type="text" id="textfield" size="67"></div>
  377. <div class="search-button"><input type="submit" name="button" id="button" value="搜索"></div>
  378. </div>
  379. </div>
  380. <div class="main">
  381. <div class="anytext">
  382. <div class="anytext-img"><a href="list01.html"><img src="images/main01.jpg" alt="" width="100%" ></a></div>
  383. </div>
  384. <div class="main-text">
  385. <span class="t-bold">初识雪域 - 最美的风景,梦想中的天堂</span><br>
  386. 雪域西藏的风格涉及很多领域,有自然景区、寺庙景区、历史景区...一个来了就不想走的地方,这里既神秘又神圣,有澄澈的天空、静谧的湖水、壮阔的雪山、无尽的牧场,有人爱西藏的天空,有人爱藏民的质朴,也有人爱纯净的信仰...
  387. </div></div>
  388. <!-- 中间内容版块结束 -->
  389. <!-- 图片滚动部分开始 -->
  390. <div class="index-iamges">
  391. <div class="index-iamges-text">自然景观具有形态美、色彩美、听觉美、嗅觉美、动态美、象征美等美的元素。走进大自然,目睹自然风光,去感受自然是件非常美好的事情,西藏,它是我国一个高海拔的省份。在中国边境的喜马拉雅山脉深处,西藏长、宽的地带和一块盆地。它是世界上人口稠密很低的地区之一,拥有许多丰富而独特的自然景观和人文景观。
  392. 西藏不仅拥有雄伟的高山、迷人的湖泊、起伏的平原,而且还有许多独特而神秘的寺庙建筑。藏文化也是世界上有价值和丰富多样的文化之一。西藏还拥有丰富多彩的自然风光令人迷醉 ,因其悠久而美丽丁;这里有雪山、高原湖泊、森林和寺庙建筑,他们构成了西藏人民美好生活中不可缺少的部分。...</div>
  393. <div style="width: 450px; height: 61px; margin-right: auto; margin-left: auto;"><a href="card.html"><div class="button-01">了解更多</div></a> <a href="guide.html"><div class="button-01">出行指南</div></a> </div>
  394. </div>
  395. <!-- 图片滚动部分结束 -->
  396. <!-- 下方三图并列开始 -->
  397. <div class="c-title">美景推荐</div>
  398. <div class="a_line"></div>
  399. <div class="recommend">
  400. <div class="recommend1"><table width="100%" border="0">
  401. <tr>
  402. <td height="220"><a href="page.html"><img src="images/index01.jpg" width="245" height="245"></a></td>
  403. </tr>
  404. <tr>
  405. <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
  406. </tr>
  407. </table>
  408. </div>
  409. <div class="recommend1"><table width="100%" border="0">
  410. <tr>
  411. <td height="220"><a href="page.html"><img src="images/index02.jpg" width="245" height="245"></a></td>
  412. </tr>
  413. <tr>
  414. <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
  415. </tr>
  416. </table></div>
  417. <div class="recommend1">
  418. <table width="100%" border="0">
  419. <tr>
  420. <td height="220"><a href="page.html"><img src="images/index03.jpg" alt="" width="245" height="245"></a></td>
  421. </tr>
  422. <tr>
  423. <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
  424. </tr>
  425. </table>
  426. </div>
  427. <div class="recommend1">
  428. <table width="100%" border="0">
  429. <tr>
  430. <td height="220"><a href="page.html"><img src="images/index04.jpg" alt="" width="245" height="245"></a></td>
  431. </tr>
  432. <tr>
  433. <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
  434. </tr>
  435. </table>
  436. </div>
  437. </div>
  438. <!-- 下方三图并列end -->
  439. <!-- footer栏开始 -->
  440. <footer class="down">
  441. <div class="down_center">
  442. <div class="down_c_side">
  443. <div class="logo1"><a href="index.html"><img src="images/Logo_01.png"></a></div>
  444. <div class="f_gotop"><table width="100%" border="0">
  445. <tr>
  446. <td width="18" height="37" valign="middle"><img src="images/up.png" width="12" height="12"></td>
  447. <td width="119"><a href="#top">返回顶部</a></td>
  448. </tr>
  449. </table>
  450. </div>
  451. </div>
  452. <div class="down_c_center"> © CHUSHIXUEYU &nbsp;&nbsp;&nbsp; ICP备22222222号-1</div>
  453. <div class="down_c_side"><a href="#"><img src="images/icon_1.svg" alt="" width="31" height="31"></a>&nbsp; &nbsp; &nbsp; <a href="#"><img src="images/icon_2.svg" alt="" width="31" height="31"></a>&nbsp; &nbsp; &nbsp;<a href="#"><img src="images/icon_3.svg" alt="" width="31" height="31"></a>&nbsp; &nbsp; &nbsp;<a href="#"><img src="images/icon_4.svg" alt="" width="31" height="31"></a></div>
  454. </div>
  455. </footer>
  456. </body>
  457. </html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/166891
推荐阅读
相关标签
  

闽ICP备14008679号