167.Web前端网页制作 大气的UI设计平台网页实例 大学生期末大作业
目录
前言
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.HTML
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
前言
大气的UI设计平台网页实例，应用html+css+js： Div、导航栏、图片轮翻效果、鼠标滑动特效、悬浮菜单、留言表单、背景特效、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的响应式布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
本实例应用html+css+js:应用html+css+js： Div、导航栏、图片轮翻效果、鼠标滑动特效、悬浮菜单、留言表单、背景特效、搜索等。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<html>
<head>
<meta charset="utf-8">
<title>UI中国-专业界面交互设计平台</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script src="js/osSlider.js"></script>
</head>
<body>
<!-- 顶部导航 -->
<div class="top">
<div class="toper">
<div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
<div class="nav">
<ul>
<li class="nav-li"><a href="index.html">首页</a></li>
<li><a href="work.html">作品</a></li>
<li>
<a href="exp.html" class="text-left nav-120">学习</a>
<dl class="nav-120"><dd><i></i><a href="#">专题</a></dd><dd><i></i><a href="#">教程</a></dd><dd><i></i><a href="#">书籍</a></dd></dl>
</li>
<li>
<a href="activity.html" class="text-left nav-80">活动</a>
<dl class="nav-80"><dd><i></i><a href="#">UTalk</a></dd><dd><i></i><a href="#">设计大赛</a></dd></dl>
</li>
<li><a href="job.html">招聘</a></li>
<li class="nav-new"><a href="peixun.html">培训</a></li>
<li>
<a href="move.html" class="text-left">更多</a>
<dl class="nav-160"><dd><i></i><a href="#">灵感</a></dd><dd><i></i><a href="#">工具</a></dd><dd><i></i><a href="#">话题</a></dd><dd><i></i><a href="#">主题学院</a></dd></dl>
</li>
</ul>
</div>
<div class="top-login">
<a href="login.html" class="top-head none"><img src="images/not-head.png"></a>
<div class="top-head">
<a href="user.html"><img src="images/head.png"></a>
<ul>
<li><a href="#">我的作品</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的简历</a></li>
<li><a href="#">修改资料</a></li>
<li><a href="#">退出登录</a></li>
</ul>
</div>
</div>
<div class="top-search">
<div class="top-search-left">
<span>设计作品</span>
<ul>
<li>设计作品</li>
<li>经验文章</li>
<li>源文件</li>
<li>设计狮</li>
<li>灵感</li>
<li>话题</li>
</ul>
</div>
<div class="top-search-right">
<input type="text" placeholder="请输入想要搜索的设计作品"><span></span>
</div>
</div>
</div>
</div>
<!-- 顶部导航 end -->
<!-- banner -->
<div class="slider">
<ul class="slider-main">
<li><a href="#"><img src="images/banner/01.png"></a></li>
<li><a href="#"><img src="images/banner/02.png"></a></li>
<li><a href="#"><img src="images/banner/03.png"></a></li>
<li><a href="#"><img src="images/banner/04.png"></a></li>
<li><a href="#"><img src="images/banner/05.png"></a></li>
<li><a href="#"><img src="images/banner/06.png"></a></li>
</ul>
</div>
<script>
var slider = new osSlider({ //开始创建效果
pNode:'.slider', //容器的选择器 必填
cNode:'.slider-main li', //轮播体的选择器 必填
speed:6000, //速度 默认3000 可不填写
autoPlay:true //是否自动播放 默认true 可不填写
});
</script>
<!-- banner end -->
<!-- main -->
<div class="main">
<div class="main-top">
<div class="main-nav">
<a href="#" class="main-nav-a">首页推荐</a>
<a href="#">我的关注</a>
<a href="#">最新作品</a>
</div>
<div class="main-gg">
<span class="o1"><i>感谢有你，伴我一生，让我有勇气做我自已</i></span>
<span class="o0"><i>只有自己足够强大，才不会被别人践踏</i></span>
<span class="o0"><i>其实赖于基因技术，外加记忆（灵魂）转移，我们就可以永生啦</i></span>
<span class="o0"><i>一个正常人，每天至少要拥抱八次</i></span>
<span class="o0"><i>清除浏览器缓存</i></span>
<span class="o0"><i>UI中国招聘频道全新改版</i></span>
</div>
</div>
<div class="main-box">
<ul>
<li>
<img src="images/word-img/01.gif">
<a href="#" class="main-text"><span>设计目标：微创新、差异化、简洁美.设计分析：设计前期，分析了市面上主流的OS天气做法，发现天气的首页大多数都是动态背景+一周实时天气的呈现方式。</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/01.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">哈尔哥</a></div>
<div class="main-name"><a href="#">OS UI | 天气界面设计</a></div>
<div class="main-pic"><span title="浏览数">1873</span><span title="评论数">12</span><span title="点赞数">99</span><i>2015-11-19</i></div>
</li>
<li>
<img src="images/word-img/02.png">
<a href="#" class="main-text"><span>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/02.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">陈出杰作</a></div>
<div class="main-name"><a href="#">从零开始掌握交互设计</a></div>
<div class="main-pic"><span title="浏览数">2716</span><span title="评论数">17</span><span title="点赞数">142</span><i>2015-11-27 </i></div>
</li>
<li>
<img src="images/word-img/03.png">
<a href="#" class="main-text"><span>探索者APP项目引导页面设计欣赏~项目还在开发中，敬请期待哦~</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/03.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">SA9527</a></div>
<div class="main-name"><a href="#">探索者APP引导页设计欣赏~</a></div>
<div class="main-pic"><span title="浏览数">2525</span><span title="评论数">16</span><span title="点赞数">110</span><i>2015-11-27</i></div>
</li>
<li>
<img src="images/word-img/04.png">
<a href="#" class="main-text"><span>>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/04.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">linzi912</a></div>
<div class="main-name"><a href="#">掌阅iReader 5.2.0 海外版</a></div>
<div class="main-pic"><span title="浏览数">2550</span><span title="评论数">59</span><span title="点赞数">121</span><i>2015-11-26</i></div>
</li>
<li>
<img src="images/word-img/05.png">
<a href="#" class="main-text"><span>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/05.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">绘x封</a></div>
<div class="main-name"><a href="#">2015作品集</a></div>
<div class="main-pic"><span title="浏览数">1779</span><span title="评论数">6</span><span title="点赞数">121</span><i>2015-11-24</i></div>
</li>
<li>
<img src="images/word-img/06.png">
<a href="#" class="main-text"><span>未完。。做成明信片可好？</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/06.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">七媗_lea</a></div>
<div class="main-name"><a href="#"><Azalea>_ 孤独之梦</a></div>
<div class="main-pic"><span title="浏览数">2890</span><span title="评论数">17</span><span title="点赞数">131</span><i>2015-11-23</i></div>
</li>
<li>
<img src="images/word-img/07.png">
<a href="#" class="main-text"><span>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/07.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">小白设计师</a></div>
<div class="main-name"><a href="#">前几个月做的一个APP</a></div>
<div class="main-pic"><span title="浏览数">3621</span><span title="评论数">16</span><span title="点赞数">96</span><i>2015-11-23</i></div>
</li>
<li>
<img src="images/word-img/08.png">
<a href="#" class="main-text"><span>亲密360陪我的这段奇幻之旅不知不觉中已走了一年,总会忍不住回望来路.它的波折,它的坎坷时常让我迷茫,也让我知道我必须向前.现在,亲密360终于已经有了50万用户</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/08.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">Junink</a></div>
<div class="main-name"><a href="#">亲密360</a></div>
<div class="main-pic"><span title="浏览数">5732</span><span title="评论数">34</span><span title="点赞数">129</span><i>2015-11-23</i></div>
</li>
<li>
<img src="images/word-img/09.png">
<a href="#" class="main-text"><span>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/09.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">ricardo_jiang</a></div>
<div class="main-name"><a href="#">引导图</a></div>
<div class="main-pic"><span title="浏览数">4810</span><span title="评论数">14</span><span title="点赞数">146</span><i>2015-11-23</i></div>
</li>
<li>
<img src="images/word-img/10.gif">
<a href="#" class="main-text"><span>作者太懒、什么都没有写<br>——《小编字》</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/10.gif"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">Banlinda</a></div>
<div class="main-name"><a href="#">菜单图标</a></div>
<div class="main-pic"><span title="浏览数">3466</span><span title="评论数">21</span><span title="点赞数">138</span><i>2015-11-22</i></div>
</li>
<li>
<img src="images/word-img/11.png">
<a href="#" class="main-text"><span>生活的压力，工作的忙碌，快节奏的城市生活，让我们没来得及做完手上事，就要准备下一项“命运”的安排，仿佛冥冥中我们都早已习惯了在如此固定的路线上一条路走到黑，直到，时过境迁，才顿感“吾已老矣”，恍然发现···</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/11.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">Fr_黑白线</a></div>
<div class="main-name"><a href="#">Assault motion APP</a></div>
<div class="main-pic"><span title="浏览数">6393</span><span title="评论数">45</span><span title="点赞数">255</span><i>2015-11-21</i></div>
</li>
<li>
<img src="images/word-img/12.png">
<a href="#" class="main-text"><span>给公司app做的启动页</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/12.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">左边的朋友</a></div>
<div class="main-name"><a href="#">APP启动页之二十四节气</a></div>
<div class="main-pic"><span title="浏览数">4184</span><span title="评论数">10</span><span title="点赞数">139</span><i>2015-11-19</i></div>
</li>
<li>
<img src="images/word-img/13.png">
<a href="#" class="main-text"><span>想做一个干净的纯粹的小场景来展示天气的变化。</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/13.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">Cardist</a></div>
<div class="main-name"><a href="#">天气插件『The Q Town』</a></div>
<div class="main-pic"><span title="浏览数">2905</span><span title="评论数">83</span><span title="点赞数">213</span><i>2015-11-19</i></div>
</li>
<li>
<img src="images/word-img/14.png">
<a href="#" class="main-text"><span>绿茶浏览器6.5引导页</span><i> </i></a>
<div class="main-head"><a href="#"><img src="images/user-head/14.png"></a></div>
<div class="main-tips"><span>原创</span><a href="#" class="main-user">UG84</a></div>
<div class="main-name"><a href="#">绿茶浏览器6.5引导页</a></div>
<div class="main-pic"><span title="浏览数">3189</span><span title="评论数">10</span><span title="点赞数">122</span><i>2015-11-16</i></div>
</li>
<li>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";/* margin and padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,img,form,applet,fieldset,legend,button,input,textarea,th,table,tr,td{margin:0;padding:0;border:none;}
/* bady */
body{font-family:"微软雅黑";font-size:12px;color:#666;width:100%;position:relative;background:#f7f7f7;}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}
input::-ms-clear{display:none;}/*清楚文本框X*/
input,select,textarea{outline:none;cursor:pointer;}
/* img */
img{padding:0;margin:0;vertical-align:top;border:none}
i{font-style:normal;}
/* alpha */
.block{display:block;}
.none{display:none;}
.o0{opacity:0;filter:alpha(opacity=0);}
.o1{opacity:1!important;filter:alpha(opacity=100)!important;}
/* div */
li,ul{list-style:none;outside:none;}
.clear{clear:both;height:0;width:100%;}
a,b,i,span,input,select,dl,dd,dt,p{-webkit-transition:all 0.5s;font-family:"微软雅黑";}
input[type=button]{-webkit-appearance:none;}
/* font */
a{color:#333;text-decoration:none;-webkit-transition:all 0.5s;}
a:hover,a:active,a:focus{text-decoration:none;}
/* 顶部导航 */
.top{width:100%;height:60px;background:#fff;box-shadow:0 0 2px #ccc;}
.toper{width:1200px;height:100%;margin:auto;}
.logo{float:left;height:40px;margin:10px;}
.logo img{width:auto;height:100%;}
.nav{float:left;height:100%;width:auto;margin-left:20px;}
.nav li{width:80px;height:60px;float:left;position:relative;}
.nav li a{width:100%;height:100%;line-height:60px;float:left;text-align:center;font-size:14px;}
.nav li:after{content:"";width:0%;height:3px;position:absolute;bottom:-2px;left:40px;background:#459bdc;border-radius:2px;z-index:999;-webkit-transition:all 0.5s;}
.nav-new:before{content:"";width:8px;height:8px;position:absolute;top:14px;right:14px;background:url(../images/new.png);z-index:999;}
.text-left:after{content:"";width:10px;height:1px;background:#666;position:absolute;left:50px;top:31px;-webkit-transform:rotate(45deg);-webkit-transition:all 0.5s;}
.text-left:before{content:"";width:10px;height:1px;background:#666;position:absolute;left:57px;top:31px;-webkit-transform:rotate(-45deg);-webkit-transition:all 0.5s;}
.nav li:hover:after{width:100%;left:0;}
.nav li:hover .nav-80{height:80px!important;}
.nav li:hover .nav-120{height:120px!important;}
.nav li:hover .nav-160{height:160px!important;}
.nav li:hover{background:#f1f1f1;}
.nav li:hover :after{left:57px;}
.nav li:hover :before{left:50px;}
.nav-li{background:#f1f1f1;}
.nav-li a{color:#459bdc;}
.nav-li:after{width:100%!important;left:0!important;}
.nav dl{width:100%;background:#fff;position:absolute;height:0;top:60px;left:0;overflow:hidden;box-shadow:0 0 2px #ccc;z-index:999;}
.nav dd{width:100%;height:40px;float:left;position:relative;}
.nav dd a{width:100%;height:40px;line-height:40px;position:absolute;top:0;left:0;}
.nav dd i{width:0;height:40px;position:absolute;left:0;top:0;background:#459bdc;}
.nav dd:hover a{color:#fff;}
.nav dd:hover i{width:100%;}
.text-left{text-indent:-20px;}
.top-head{width:40px;height:40px;padding:10px;float:right;position:relative;}
.top-head img{width:100%;height:auto;border-radius:50%;}
.top-head a{float:left;width:100%;height:100%;}
.top-head ul{width:131px;height:0px;position:absolute;top:61px;right:0;background:#fff;box-shadow:0 0 3px #ccc;line-height:40px;overflow:hidden;-webkit-transition:all 0.5s;z-index:999;}
.top-head:hover ul{height:200px;}
.top-head li{float:left;width:100%;height:40px;background-repeat:no-repeat;background-position:15px center;text-indent:47px;-webkit-transition:all 0.5s;}
.top-head li:hover{background-color:#f1f1f1;}
.top-head li:hover a{color:#459bdc;}
.top-head li:nth-child(1){background-image:url(../images/top-head-11.png);}
.top-head li:nth-child(2){background-image:url(../images/top-head-12.png);}
.top-head li:nth-child(3){background-image:url(../images/top-head-13.png);}
.top-head li:nth-child(4){background-image:url(../images/top-head-14.png);}
.top-head li:nth-child(5){background-image:url(../images/top-head-15.png);}
.top-head li:nth-child(1):hover{background-image:url(../images/top-head-01.png);}
.top-head li:nth-child(2):hover{background-image:url(../images/top-head-02.png);}
.top-head li:nth-child(3):hover{background-image:url(../images/top-head-03.png);}
.top-head li:nth-child(4):hover{background-image:url(../images/top-head-04.png);}
.top-head li:nth-child(5):hover{background-image:url(../images/top-head-05.png);}
.top-search{float:right;margin:0 10px;}
.top-search-left{float:left;width:90px;height:60px;border-left:1px solid #ddd;border-right:1px solid #ddd;text-indent:12px;cursor:pointer;color:#999;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.top-search-left span{float:left;width:100%;height:100%;position:relative;line-height:60px;}
.top-search-left:hover span{color:#459bdc;}
.top-search-left span:after{content:"";width:8px;height:1px;background:#666;position:absolute;right:10px;top:29px;-webkit-transform:rotate(45deg);-webkit-transition:all 0.5s;}
.top-search-left span:before{content:"";width:8px;height:1px;background:#666;position:absolute;right:15px;top:29px;-webkit-transform:rotate(-45deg);-webkit-transition:all 0.5s;}
.top-search-left:hover span:after{right:15px;background:#459bdc;}
.top-search-left:hover span:before{right:10px;background:#459bdc;}
.top-search-left ul{width:90px;height:0px;position:absolute;top:60px;left:-1px;border-left:1px solid #ddd;border-right:1px solid #ccc;overflow:hidden;border-radius:0 0 4px 4px;background:#fff;-webkit-transition:all 0.5s;line-height:40px;z-index:999;}
.top-search-left li{width:100%;height:40px;float:left;}
...
3.JS
代码如下（节选示例）：
$(document).ready(function(){
$('.float-menu dt').click(function(){
$(this).addClass('float-dt').removeClass('dian').siblings().removeClass('float-dt')
$(this).parent().addClass('w300')
var a = $(this).index()
if($('.float-info').eq(a).find('.float-line').length >= 4){
$('.float-info').eq(a).find('.float-move').css('display','block')
}else if($('.float-info').eq(a).find('.float-line').length == 0){
$('.float-info').eq(a).find('.float-no').css('display','block')
}
$('.float-info').eq(a).addClass('h-auto').siblings('.float-info').removeClass('h-auto')
$('.float-text').removeClass('float-text-b')
if($('.dian').length == 0){
$('.float-a').removeClass('t-d')
}
})
$("html").bind("click",function(evt){
if($(evt.target).parents(".float-menu li").length==0){
$('.float-menu dl').removeClass('w300')
$('.float-info').removeClass('h-auto')
$('.float-menu dt').removeClass('float-dt')
$('.float-text').removeClass('float-text-b')
}
})
$('.float-hf').click(function(){
$('.float-text').addClass('float-text-b')
var a = $(this).parent().find('a').eq(0).html()
$('.float-text input').attr('placeholder','@'+a)
})
$('.top-search-left li').click(function(){
$('.top-search-left span').html($(this).html())
$('.top-search-right input').attr('placeholder','请输入想要搜索的'+$('.top-search-left span').html())
})
$(".go-top").click(function(){
$("html, body").animate({scrollTop:0},"show");
});
$('.design-bt i').click(function(){
$(this).addClass('design-bt-i').siblings().removeClass('design-bt-i')
if($('.design-bt i').eq(1).is('.design-bt-i')){
$('.design-box ul').eq(0).addClass('design-box-top')
}else if($(this).eq(0).is('.design-bt-i')){
$('.design-box ul').eq(0).removeClass('design-box-top')
}
})
});
$(function(){
var a = $('.main-gg span').length
setInterval(function(){
var b = $('.o1').index()+1
if(a == b){
$('.o1').addClass('o0').removeClass('o1')
$('.main-gg span').eq(0).addClass('o1').removeClass('o0')
}
$('.main-gg span').eq(b).addClass('o1').removeClass('o0').prev().addClass('o0').removeClass('o1')
},6000)
})
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。