赞
踩
30个页面,美观度较高,这是我目前做过的页面的数量最多、填充内容也最多的网页设计作品,一级页面的整体长度很长,内容殷实,二三级页面融入各项前端网页知识点。网站共有三层深度,一级菜单栏可下拉,二级菜单栏可进入更深一层级页面,拥有登录、注册页、留言表单页、视频页,功能设计合理且丰满;首页有js轮播banner图、js鼠标划过卡片特效,其他页面也均有较多的鼠标划过效果:如放大、变色,增加边框等;各页面的内容排版填充比较丰富,图片素材的选择也较有考究,整体美观大方,是一份投入工作量非常大的毕业设计作品~
绝美西藏风景学生网页设计 高达30个页面 每页都有超长超丰富的布局内容 满满的都是工作量
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <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" />
- <title>初识雪域</title>
- <link rel="stylesheet" href="css/style.css">
- <link rel=stylesheet type=text/css href="css/banner.css">
- <link rel="stylesheet" type="text/css" href="css/card.css">
- <script src="js/jquery.js"></script>
- <script src="js/card.js"></script>
- <style type="text/css">
- body {
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;/*定义页面上下左右边距为0*/
- font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字体集 */
- }
- a:link {
- color: #ffffff;
- text-decoration: none;
- }
- a:visited {
- text-decoration: none;
- color: #ffffff;
- }
- a:hover {
- text-decoration: none;
- color: #e3ffff;
- }
- a:active {
- text-decoration: none;
- }
- .c-title {/* 栏目标题样式设置 */
- height: 26px;
- width: 140px;
- margin-right: auto;
- margin-left: auto;
- font-size: 1.3em;
- font-weight: bold;
- color: #000;
- text-align: center;
- line-height: 26px;
- padding-top: 50px;
- }
- .a_line {/* 分割线 */
- background-color: #0083f7;
- height: 4px;
- width: 60px; /* 设置一个固定尺寸的盒子作为装饰分割线 */
- margin-top: 20px;
- margin-right: auto;
- margin-left: auto;
- border-radius: 4px; /* 圆角设置 */
- }
-
- .index-iamges .button-01:hover {
- height: 56px;
- line-height: 56px;
- margin-top: 43px;
- border-radius: 56px;
- background-color: rgba(0,131,247,0.8); /* 背景色改变 */
- transition: all .3s; /* 0.4s过渡效果 */
- letter-spacing: 3px; /* 字间距加宽,这样随着盒子变宽字间距跟着变宽看起来更协调一些 */
- font-size: 18px;
- font-weight: bold;
- letter-spacing:3px;
- }
- </style>
- </head>
-
- <body>
- <div class="topbar"><!-- 顶栏通栏 -->
- <div class="titleblock"><!-- 顶栏中部 -->
- <div class="logo"><!-- logo --><a href="index.html"><img src="images/logo.png"></a></div>
- <div class="search"><!-- 搜索框 -->
- <input type="text" value="搜索" onmouseover="this.style.borderColor='#0083f7'" onmouseout="this.style.borderColor=''" onFocus="if (value =='搜索'){value =''}" onBlur="if (value ==''){value='搜索'}"/>
- </div>
- </div>
- </div>
-
- <!-- 横向导航开始 -->
- <div class="nav01">
- <div id="bar" class="clear">
- <ul>
- <li><a href="index.html">网站主页</a></li>
- <li><a href="list01.html">古城寻迹</a></li>
- <li><a href="card.html">藏族文化</a></li>
- <li><a href="list02.html">玉盘珍馐</a></li>
- <li><a href="video.html">藏美止宿</a></li>
- <li><a href="shop.html">文创周边</a></li>
- <li><a href="guide.html">出行指南</a></li>
- <li><a href="share.html">游记分享</a></li>
- <li><a href="#">更多相关 <img src="images/down.svg" width="10" height="10"></a>
- <ul>
- <li><a href="page.html">最新资讯</a></li>
- <li><a href="login.html">登录本站</a></li>
- <li><a href="register.html">注册本站</a></li>
- <li><a href="message.html">给我留言</a></li>
- </ul></li>
- </ul>
- </div>
- </div>
- <!-- 横向导航END -->
-
- <!-- 轮播图开始 -->
- <div class="banner">
- <ul class="list"><!-- 图片序列 -->
- <a href="#">
- <li class="item active"><img src="images/banner01.jpg" alt="" width="100%" ></li>
- </a>
- <a href="#">
- <li class="item"><img src="images/banner02.jpg" alt="" width="100%"></li>
- </a>
- <a href="#">
- <li class="item"><img src="images/banner03.jpg" alt="" width="100%"></li>
- </a>
- <a href="#">
- <li class="item"><img src="images/banner04.jpg" alt="" width="100%"></li>
- </a>
- <a href="#">
- <li class="item"><img src="images/banner05.jpg" alt="" width="100%"></li>
- </a>
- </ul>
- <ul class="pointList"><!-- 圆点 -->
- <li class="point active" data-index="0"></li>
- <li class="point" data-index="1"></li>
- <li class="point" data-index="2"></li>
- <li class="point" data-index="3"></li>
- <li class="point" data-index="4"></li>
- </ul>
- <button class="btn" id="left"><img src="images/left.png" width="20" height="20"></button><!-- 轮播图左右按钮 -->
- <button class="btn" id="right"><img src="images/right.png" width="20" height="20"></button>
- </div>
- <script type="text/javascript" src="js/banner.js"></script> <!-- 引入js代码 -->
- <!-- 轮播图结束 -->
-
- <!-- 版块分类开始 -->
- <div class="c-title">推荐版块</div>
- <div class="a_line"></div>
-
- <div class="icon-list">
- <div class="icon-list-mi"><table width="100%" border="0">
- <tr>
- <td height="34" align="center"> </td>
- </tr>
- <tr>
- <td height="69" align="center"><img src="images/icon01.png" width="55" height="55"></td>
- </tr>
- <tr>
- <td height="37" align="center"><h2><a href="card.html" class="black1">藏族文化</a></h2></td>
- </tr>
- <tr>
- <td align="center"><table width="85%" border="0">
- <tr>
- <td align="center">Here you fully understand Tibetan culture, let's get started ...</td>
- </tr>
- </table></td>
- </tr>
- <tr>
- <td align="center"> </td>
- </tr>
- </table>
- </div>
- <div class="icon-list-mi">
- <table width="100%" border="0">
- <tr>
- <td height="34" align="center"> </td>
- </tr>
- <tr>
- <td height="69" align="center"><img src="images/icon02.png" alt="" width="55" height="55"></td>
- </tr>
- <tr>
- <td height="37" align="center"><h2><a href="list02.html" class="black1">玉盘珍馐</a></h2></td>
- </tr>
- <tr>
- <td align="center"><table width="85%" border="0">
- <tr>
- <td align="center">What delicious foods are there to visit when traveling to Tibet? ...</td>
- </tr>
- </table></td>
- </tr>
- <tr>
- <td align="center"> </td>
- </tr>
- </table>
- </div>
- <div class="icon-list-mi">
- <table width="100%" border="0">
- <tr>
- <td height="34" align="center"> </td>
- </tr>
- <tr>
- <td height="69" align="center"><img src="images/icon03.png" alt="" width="55" height="55"></td>
- </tr>
- <tr>
- <td height="37" align="center"><h2><a href="guide.html" class="black1">出行指南</a></h2></td>
- </tr>
- <tr>
- <td align="center"><table width="85%" border="0">
- <tr>
- <td align="center">For a trip to Tibet, just read the travel guide and precautions here ...</td>
- </tr>
- </table></td>
- </tr>
- <tr>
- <td align="center"> </td>
- </tr>
- </table>
- </div>
- <div class="icon-list-mi">
- <table width="100%" border="0">
- <tr>
- <td height="34" align="center"> </td>
- </tr>
- <tr>
- <td height="69" align="center"><img src="images/icon04.png" alt="" width="55" height="55"></td>
- </tr>
- <tr>
- <td height="37" align="center"><h2><a href="message.html" class="black1">给我留言</a></h2></td>
- </tr>
- <tr>
- <td align="center"><table width="85%" border="0">
- <tr>
- <td align="center">If you have any suggestions, you can leave me a message here ...</td>
- </tr>
- </table></td>
- </tr>
- <tr>
- <td align="center"> </td>
- </tr>
- </table>
- </div>
- </div>
-
- <div class="c-title">相关导读</div>
- <div class="a_line"></div>
- <!-- 可滑动弹出卡片代码 开始 -->
- <div class="common-001">
- <ul>
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/01.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>想去拉萨,布达拉宫,林芝,大昭寺,羊湖,纳木错等景点...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】西藏经典旅游</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black">头条</a><a href="#" rel="tag" class="black">资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">6253</div>
- <div class="listcomment">99</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black">详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/02.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>布达拉宫屹立在西藏首府拉萨市区西北的红山上,是一座规模宏大的宫堡式建筑群...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】西藏必去的20个景点</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">6253</div>
- <div class="listcomment">87</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/03.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>人生总要有一次说走就走的旅行,去西藏,去看天、看地、天山、看水...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】说走就走的旅行</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">3253</div>
- <div class="listcomment">33</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/04.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>一个来了就不想走的地方,这里既神秘又神圣,有澄澈的天空、静谧的湖水、壮阔的雪山...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】二十个美如画的自然风景</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">253</div>
- <div class="listcomment">55</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/05.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>四月的拉萨,暖风初至,熙攘的城市街头渐渐被春天“涂”上了浪漫的粉色、玫红色、白色…</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】一花知春 拉萨的春意藏</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">1500</div>
- <div class="listcomment">87</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/06.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>一对新人在布达拉宫前拍摄结婚照,他们面对镜头还有些羞涩。布达拉宫座落在海拔...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】高清大图!遇见最美雪域</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-18</div>
- <div class="listview">2553</div>
- <div class="listcomment">35</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/07.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>这里有浩瀚的天空和苍茫的大地这里有雄伟洁白的神山,蔚蓝空灵的圣湖...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】梦想中的天堂</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-18</div>
- <div class="listview">654</div>
- <div class="listcomment">5</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
-
- <li class="listbox mr20">
- <div class="listimg"> <img src="images/08.jpg" class="attachment-thumbnail wp-post-image" alt="初识雪域" />
- <div class="summary">
- <div class="summarytxt">
- <p>雅鲁藏布大峡谷旅游景区,位于西藏自治区林芝市境内,是林芝市最受游客欢迎...</p>
- </div>
- </div>
- </div>
- <div class="listinfo">
- <div class="listtitle"><a href="#" title="初识雪域" class="black" >【初识雪域】雅鲁藏布大峡谷旅游景区</a></div>
- <div class="listtag"><a href="#" rel="tag" class="black" >头条</a><a href="#" rel="tag" class="black" >资讯</a></div>
- <div class="listdate">2023-04-19</div>
- <div class="listview">361</div>
- <div class="listcomment">19</div>
- <div class="listdemo"><a href="#" rel="external nofollow" class="black" >详情</a></div>
- </div>
- </li>
- </ul>
- </div>
-
-
- <!-- 中间内容引导开始 -->
-
- <div class="s-banner">
- <div class="s-banner-text">搜索你想要的内容...</div>
- <div class="search">
- <div class="search-input"><input name="textfield" type="text" id="textfield" size="67"></div>
- <div class="search-button"><input type="submit" name="button" id="button" value="搜索"></div>
- </div>
- </div>
- <div class="main">
-
-
- <div class="anytext">
- <div class="anytext-img"><a href="list01.html"><img src="images/main01.jpg" alt="" width="100%" ></a></div>
- </div>
- <div class="main-text">
- <span class="t-bold">初识雪域 - 最美的风景,梦想中的天堂</span><br>
- 雪域西藏的风格涉及很多领域,有自然景区、寺庙景区、历史景区...一个来了就不想走的地方,这里既神秘又神圣,有澄澈的天空、静谧的湖水、壮阔的雪山、无尽的牧场,有人爱西藏的天空,有人爱藏民的质朴,也有人爱纯净的信仰...
- </div></div>
- <!-- 中间内容版块结束 -->
-
- <!-- 图片滚动部分开始 -->
- <div class="index-iamges">
- <div class="index-iamges-text">自然景观具有形态美、色彩美、听觉美、嗅觉美、动态美、象征美等美的元素。走进大自然,目睹自然风光,去感受自然是件非常美好的事情,西藏,它是我国一个高海拔的省份。在中国边境的喜马拉雅山脉深处,西藏长、宽的地带和一块盆地。它是世界上人口稠密很低的地区之一,拥有许多丰富而独特的自然景观和人文景观。
-
- 西藏不仅拥有雄伟的高山、迷人的湖泊、起伏的平原,而且还有许多独特而神秘的寺庙建筑。藏文化也是世界上有价值和丰富多样的文化之一。西藏还拥有丰富多彩的自然风光令人迷醉 ,因其悠久而美丽丁;这里有雪山、高原湖泊、森林和寺庙建筑,他们构成了西藏人民美好生活中不可缺少的部分。...</div>
-
- <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>
- </div>
- <!-- 图片滚动部分结束 -->
-
- <!-- 下方三图并列开始 -->
- <div class="c-title">美景推荐</div>
- <div class="a_line"></div>
- <div class="recommend">
- <div class="recommend1"><table width="100%" border="0">
- <tr>
- <td height="220"><a href="page.html"><img src="images/index01.jpg" width="245" height="245"></a></td>
- </tr>
- <tr>
- <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
- </tr>
- </table>
- </div>
- <div class="recommend1"><table width="100%" border="0">
- <tr>
- <td height="220"><a href="page.html"><img src="images/index02.jpg" width="245" height="245"></a></td>
- </tr>
- <tr>
- <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
- </tr>
- </table></div>
- <div class="recommend1">
- <table width="100%" border="0">
- <tr>
- <td height="220"><a href="page.html"><img src="images/index03.jpg" alt="" width="245" height="245"></a></td>
- </tr>
- <tr>
- <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
- </tr>
- </table>
- </div>
- <div class="recommend1">
- <table width="100%" border="0">
- <tr>
- <td height="220"><a href="page.html"><img src="images/index04.jpg" alt="" width="245" height="245"></a></td>
- </tr>
- <tr>
- <td height="42" align="center" valign="top">初识雪域-风景推荐</td>
- </tr>
- </table>
- </div>
- </div>
- <!-- 下方三图并列end -->
-
- <!-- footer栏开始 -->
- <footer class="down">
- <div class="down_center">
- <div class="down_c_side">
- <div class="logo1"><a href="index.html"><img src="images/Logo_01.png"></a></div>
- <div class="f_gotop"><table width="100%" border="0">
- <tr>
- <td width="18" height="37" valign="middle"><img src="images/up.png" width="12" height="12"></td>
- <td width="119"><a href="#top">返回顶部</a></td>
- </tr>
- </table>
- </div>
- </div>
- <div class="down_c_center"> © CHUSHIXUEYU ICP备22222222号-1</div>
- <div class="down_c_side"><a href="#"><img src="images/icon_1.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_2.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_3.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_4.svg" alt="" width="31" height="31"></a></div>
- </div>
- </footer>
- </body>
- </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。