目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html+css+js： 导航菜单、悬浮图标、搜索等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共1个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>亲亲网-精品团购</title>
<link href="css/boutiqueGroup.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<!-- 窗口右边导航栏 -->
<div class="rightNav">
<div class="rightNavIn">
<div class="rnLoginIcon">
<div class="userLogin">
<img src="img/default_user_portrait.gif" width="30" height="30" />
<p>未登录</p>
</div>
<div class="loginWindow">
登录名<br />
<input type="text" /><br /><br />
登录密码 <a href="javascript:;">忘记登录密码？</a><br />
<input type="text" /><br /><br /><br />
<input class="ok" type="submit" value="确认" /><br />
<a href="javascript:;" class="register">注册新用户</a>
<a href="javascript:;" class="x">X</a>
</div>
</div>
<ul>
<li>
<a href="javascript:;"></a>
<i>聊天</i>
</li>
<li>
<a href="javascript:;"></a>
<i>购物车</i>
</li>
<li>
<a href="javascript:;"></a>
<i>客服</i>
</li>
<li>
<a href="javascript:;"></a>
<i>顶部</i>
</li>
</ul>
<div class="closeX"></div>
</div>
<div class="hideBar">
<div class="hbBg"></div>
<a href="javascript:;" class="plus"></a>
</div>
</div>
<!-- 头部开始 -->
<div class="navImg">
<img src="img/zcjs.png" width="143" height="378" />
<button>关闭</button>
</div>
<div class="header">
<div class="headerIn">
<div class="hiLeft">
<span>您好，欢迎来到</span> <a href="javascript:;">亲亲网</a> <a href="javascript:;">[登录]</a> <a href="javascript:;">[注册]</a>
</div>
<div class="hiRight">
<ul class="demo">
<li id="li01">
<a href="#">我的订单</a>
<ul id="ul01">
<li><a href="#">待付款订单</a></li>
<li><a href="#">待确认收货</a></li>
<li><a href="#">待评价交易</a></li>
</ul>
</li>
<li id="li02">
<a href="#"> 我的收藏</a>
<ul id="ul02">
<li><a href="#">品牌收藏</a></li>
<li><a href="#">店铺收藏</a></li>
</ul>
</li>
<li id="li03">
<a href="#">客户服务</a>
<ul id="ul03">
<li><a href="#">帮助中心</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">客服中心</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- logo开始 -->
<div class="logo">
<div class="logoIn">
<div class="logoLeft">
<h1><a href="index.html" title="亲亲网"><img src="img/logo.png" width="186" height="60" />亲亲网</a></h1>
</div>
<div class="logoCenter">
<div class="lcTop">
<input type="text" placeholder="请输入您要搜索的关键字" />
<a href="#">搜索</a>
</div>
<div class="lcBottom">
<p>热门搜索：</p>
<ul>
<li><a href="javascript:;">保湿</a></li>
<li><a href="javascript:;">面膜</a></li>
<li><a href="javascript:;">洁面</a></li>
<li><a href="javascript:;">补水</a></li>
<li><a href="javascript:;">香水</a></li>
<li><a href="javascript:;">眼霜</a></li>
<li><a href="javascript:;">唇膏</a></li>
<li><a href="javascript:;">BB霜</a></li>
</ul>
</div>
</div>
<div class="logoRight">
<ul>
<!-- 我的商城 -->
<li>
<a href="javasscript:;" class="myShangCheng">
<span></span>
我的商城
<i></i>
</a>
<div class="scIn">
<span><a href="javascript:;">我的用户中心></a></span>
<div class="ciLi">
<ul>
<li><a href="javascript:;">站内消息(0)</a></li>
<li><a href="javascript:;">资讯回复(0)</a></li>
<li><a href="javascript:;">代金券(0)</a></li>
</ul>
<ul>
<li><a href="javascript:;">我的订单 >></a></li>
<li><a href="javascript:;">我的收藏 >></a></li>
<li><a href="javascript:;">我的积分 >></a></li>
</ul>
</div>
</div>
</li>
<li>
<!-- 购物车结算 -->
<a href="javasscript:;" class="myGouWuChe">
<span></span>
购物车结算
<i></i>
</a>
<div class="gwcIn">
<span>最新加入的商品</span>
<p>您的购物车中暂无商品，赶快选择心爱的商品吧！</p>
<div class="gwcGray">
<div class="ggBtn">
<a href="javascript:;">结算购物车中的商品</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- logo结束 -->
</div>
<!-- 导航开始 -->
<div class="nav">
<div class="navIn">
<div class="niLeft">
<h3>所有分类商品</h3>
<img src="img/arrow_down.png" />
</div>
<div class="niCenter">
<a href="index.html">首页</a>
<a href="list-boutiqueGroup.html" class="current">精品团购</a>
<a href="list-brandSale.html">品牌特卖</a>
<a href="list-overseasDirectMail.html" id="ncIcon">海外直邮
<img src="img/ico_hot.gif" width="21" height="13"/>
</a>
</div>
<div class="niRight">
<a href="javascript:;" class="nr_01">
<i></i>
<span>自营美妆198包邮</span>
</a>
<a href="javascript:;" class="nr_02">
<i></i>
<span>30天无理由退货</span>
</a>
<a href="javascript:;" class="nr_03">
<i></i>
<span>100%正品保证</span>
</a>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
/* 初始化 */
html,body{width:100%;}
body{overflow-x:hidden;}
*{ margin:0; padding:0; outline:none; border:none;}
img{ display:block;}
ul,ol{ list-style:none;}
body{ font-size:12px; color:#6F6F6F;}
a{ text-decoration:none;color:#6F6F6F;}
a:hover{ text-decoration:none; color:#F0378D;}
/* 头部开始 */
.header{ width:100%; height:30px; background:#FAFAFA; border-bottom:1px solid #F0F0F0;}
.headerIn{ width:1200px; height:30px;/* background:pink; */ margin:0 auto; line-height:30px;}
.hiLeft{ float:left;}
.hiLeft span{ color:#777777;}
.hiLeft a{ color:#333333;}
.hiLeft a:hover{ text-decoration:underline;}
.hiRight{ float:right; width:400px; height:30px; line-height:30px;}
ul{list-style: none;}
a{color:white; text-decoration: none; font-size: 12px;}
.hiRight{width:300px;}
.hiRight li{ width: 100px; height:30px; line-height: 30px; float: left; background: #fff; text-align: center; position:relative;}
.hiRight li a{ display: block; width: 100px; height: 30px; line-height: 30px; color:#777777; }
.hiRight ul li ul li a:hover{ color:#777777; width:100px; height:30px; background:#FAFAFA;}
.hiRight ul li ul{display: none; position:absolute;top:30px; overflow:hidden; border:1px solid #F0F0F0; border-top:none; z-index:888;}
/* logo开始 */
.logo{ width:100%; height:100px; /* background:pink; */ overflow:hidden; _zoom:1;}
.logoIn{ width:1200px; height:100px; /* background:orange; */ margin:0 auto;}
.logoIn .logoLeft h1{ float:left;margin: 15px 10px auto 0;}
.logoIn .logoLeft h1 a{ display:inline-block; overflow:hidden; width:186px; height:60px;}
.logoCenter{ width:451px; height:100px;/* background:#0FF; */ float:left; overflow:hidden; _zoom:1; margin:0 0 0 130px;}
.lcTop{margin: 15px 10px auto 0;}
.lcTop input{ width:350px; height:16px; border:3px solid #F0378D; display:inline-block; float:left; overflow:hidden; color:#ccc; padding:10px 0 10px 15px;}
.lcTop a{ width:70px; height:42px; background:#F0378D; display:inline-block; float:left; text-align:center; line-height:42px; color:white; font-family:"微软雅黑"; font-weight:bold; font-size:16px;}
.lcBottom{ margin:65px 10px 0 0; height:20px;}
.lcBottom p{ float:left; color:#999999;}
.lcBottom ul{ float:left;}
.lcBottom ul li{ float:left; padding:0 0 0 10px;}
.lcBottom ul li a{ color:#777777;}
.lcBottom ul li a:hover{ text-decoration:underline;}
.logoRight{ float:right; width:260px; height:100px;/* background:#3F6; */margin: 15px 10px auto 0;}
.logoRight ul{ width:260px; overflow:hidden;}
.logoRight ul li{ width:130px; overflow:hidden;float:left;}
.logoRight .myShangCheng{ width:110px; height:40px; background:#FAFAFA; display:block; border:1px solid #F0F0F0; line-height:40px; font-size:13px; color:#555555; /* border-bottom:none; */z-index:2; position:relative; float:left;}
.logoRight .myGouWuChe{ width:125px; height:40px; background:#FAFAFA; display:block; border:1px solid #F0F0F0; line-height:40px; font-size:13px; color:#555555;/* border-bottom:none; */z-index:2; position:relative; float:right;}
.logoRight .myShangCheng:hover,.myGouWuChe:hover{ color:#555555; background:#fff;}
.myShangCheng span{ width:16px; height:16px; background:url(../img/top_bg.png) -100px 0px; display:inline-block; margin:12px 0 0 10px;}
...
3.JS
代码如下（节选示例）：
// JavaScript Document
//随着滚动条走的小图片
$(function(){
$(window).scroll(function(e) {
//console.log($(window).scrollTop());
var yidong = $(window).scrollTop() + 100;//'+yidong+'
$('.navImg').stop().animate({'top':''+yidong+'px'},300);
});
$('button').click(function(e) {
$(this).parent().hide();
});
//nav导航条
$('.hiRight .demo>li').css('background','url(img/down.jpg) no-repeat right center');
$('.hiRight .demo>li').mouseover(function(e){
$(this).css('background','url(img/up.jpg) no-repeat right center');
$(this).children('ul').show();
})
$('.hiRight .demo>li').mouseout(function(e){
$(this).children('ul').hide();
$(this).css('background','url(img/down.jpg) no-repeat right center');
})
//我的商城和购物车结算
$('.logoRight ul li').hover(function(e){
$(this).children('div').css('display','block');
$(this).children('a').css({'border-bottom':'none','background':'#fff'});
$(this).children('a').children('i').css('background','url(img/arrow-all-up.jpg) no-repeat left center');
},function(){
$(this).children('div').css('display','none');
$(this).children('a').css({'border-bottom':'1px solid #DBDBDB','background':'#FAFAFA'});
$(this).children('a').children('i').css('background','url(img/arrow-all-down.jpg) no-repeat left center');
})
//右侧导航四个图标
$('.niRight>a').hover(function(e) {
$(this).children('span').stop().fadeIn();
},function(){
$(this).children('span').css('display','none');
});
//banner图
$('.bannerCenter ul li').eq(0).show();
var timer = null;
var num = 0;
var tFn =function(){
num ++;
if(num >1){
num = 0;
}
$('.bannerCenter ul li').eq(num).stop().fadeOut().siblings().stop().fadeIn();
};
//添加或清除定时器
timer = setInterval(tFn,2000)
$('.bannerCenter ul li').hover(function(){
clearInterval(timer);
timer = null
},function(){
timer = setInterval(tFn,2000)
})
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
