557.清新的化妆品响应式网页大学生期末大作业 Web前端网页制作 html+css+js

标签：Web 网页 width 557 header searchBar find searchBox

一、网页概述

二、网页文件

三、网页效果

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、三级页面、下拉菜单、、鼠标滑动特效、视频、悬浮菜单等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含11个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no;">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
   <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/mobile.css">
   <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
   <script type="text/javascript" src="js/swiper.min.js"></script>
   <script type="text/javascript" src="js/javascript.js"></script>
   <title>健康管理有限公司 </title>
   <meta name="keywords" content="">
   <meta name="description" content="">
</head>
<body>

<div class="wrapper">
   <div class="header">
       <div class="wrap">
           <div class="logo"><a href="index.html"><img src="picture/logo.png"></a></div>
           <div class="menuBtn"><span class="line1"></span><span class="line2"></span><span class="line3"></span></div>
           <div class="nav">
               <div class="tit">MENU</div>
               <ul>
               <li class="on"><a href="index.html">首页</a></li>
               <li>
                   <a href="gushi.html">走进爱萌伊人</a>
                   <div class="sub">
                       <ul>
                           <li><a href="gushi.html">品牌故事</a></li>
                           <li><a href="wenhua.html">品牌文化</a></li>
                           <li><a href="rongyu.html">资质荣誉</a></li>
                           <li><a href="news.html">最新资讯</a></li>
                       </ul>
                   </div>
               </li>
               <li>
                   <a href="product.html">明星产品</a>
                   <div class="sub">
                       <ul>
                           <li><a href="product.html">单品介绍</a></li>
                           <li><a href="product.html">套装介绍</a></li>
                       </ul>
                   </div>
               </li>
               <li>
                   <a href="ketang.html">肌肤管理</a>
                   <div class="sub">
                       <ul>
                           <li><a href="ketang.html">美丽课堂</a></li>
                           <li><a href="jieda.html">问题解答</a></li>
                       </ul>
                   </div>
               </li>
               <li>
                   <a href="anli.html">蜕变心声</a>
                   <div class="sub">
                       <ul>
                           <li><a href="anli.html">肌肤案例</a></li>
                           <li><a href="xinsheng.html">蜕变心声</a></li>
                       </ul>
                   </div>
               </li>
                   <li>
                       <a href="shipin.html">精彩瞬间</a>
                       <div class="sub">
                           <ul>
                               <li><a href="shipin.html">宣传视频</a></li>
                           </ul>
                       </div>
                   </li>
                   <li>
                       <a href="contact.html">联系我们</a>
                       <div class="sub">
                           <ul>
                               <li><a href="contact.html">联系我们</a></li>
                               <li><a href="partner.html">城市合伙人</a></li>
                           </ul>
                       </div>
                   </li>
               </ul>
           </div>
       </div>
   </div>

...

2.CSS

代码如下（节选示例）：

body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a,img{margin:0; padding:0;border:none;}
body{background:#fff;font-family:"Microsoft YaHei","微软雅黑",arial;font-size:12px;color:#333333;font-weight:normal;}
textarea,input{font-family:"Microsoft YaHei","微软雅黑",arial;color: #333333;font-size:12px;padding:0;margin:0;outline: none;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
input:focus,textarea:focus{outline:none;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;color:#333333;font-weight:normal;}
a,a:link,a:visited,a:focus,a:active,a:hover{font-family:"Microsoft YaHei","微软雅黑",arial;color:#333333;font-size:12px;text-decoration:none;}
a:hover{color:#901f71;}
.mainFilter{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 100;
   background: url(../images/mainfilter_bg.png);
   display: none;
}
.wrapper{
   width: 100%;
}
.wrap{
   width: 1200px;
   margin: 0 auto;
}
.row{
   width: 100%;
   clear: both;
}
.row:after{
   content:"";
   height:0;
   display:block;
   clear:both
}
.article{
   line-height: 30px;
   font-size: 14px;
   color: #666666;
   text-align: justify;
}
.article img{
   max-width: 100%;
}
.header{
   width: 100%;
   height: 100px;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 99;
   background: #fff;
   box-shadow: 0px 1px 9px 0px #e6e6e6;
}
.header .logo{
   width: 100px;
   height: 69px;
   text-align: center;
   overflow: hidden;
   margin-top: 16px;
   float: left;
}
.header .logo img{
   width: 100%;
}
.header .searchBox{
   float: right;
   margin-right: 6px;
   margin-top: 38px;
   position: relative;
}
.header .searchBox .searchBtn{
   width: 25px;
   height: 25px;
   background: url(../images/searchbtn.gif) no-repeat center;
   cursor: pointer;
}
.header .searchBox .searchBar{
   width: 300px;
   height: 40px;
   position: absolute;
   right: -9px;
   top: 30px;
   z-index: 5;
   border: solid 2px #eee;
   box-sizing: border-box;
   display: none;
}
.header .searchBox .searchBar .inpu{
   width: 258px;
   height: 36px;
   float: left;
}
.header .searchBox .searchBar .inpu input{
   width: 100%;
   height: 36px;
   line-height: 36px;
   padding: 0 10px;
   box-sizing: border-box;
   font-size: 14px;
   color: #666;
}

...

3.JS

代码如下（节选示例）：

//导航下拉
$(function(){
   if( $(window).width()>=1200 ){
       navSubLeft();
       $(".header .nav li").hover(
           function(){
               $(this).find(".sub").stop().slideDown(200);
               navSubLeft();
           },function(){
               $(this).find(".sub").stop().slideUp(200);
           }
       );
   }
});

$(window).resize(function(){
navSubLeft();
});

//子导航位置
function navSubLeft(){
var navList = $(".header .nav").children("ul").children("li");
var navLength = navList.length;

   for(var i=0;i<navLength;i++){
       var liLeft = navList.eq(i).offset().left;
       var liWidth = navList.eq(i).width();
       var offsetRight = ($(window).width()) - (navList.eq(i).offset().left);
       var liRight = offsetRight - liWidth ;

       var subLenght = navList.eq(i).find(".sub ul li").length;
       var subWidth1 = navList.eq(i).find(".sub ul li").eq(0).width();
       var subWidth2 = navList.eq(i).find(".sub ul li").eq(subLenght-1).width();

       if( i >= (navLength-2) ){
           navList.eq(i).find(".sub ul").css({"right":liRight+(liWidth/2)-(subWidth2/2),"left":"auto"});
       }else{
           navList.eq(i).find(".sub ul").css({"left":liLeft+(liWidth/2)-(subWidth1/2)});
       }
   }
}

//手机弹出菜单
$(function(){
   if( $(window).width()<1200 ){
       $(".header .menuBtn").click(function(){
           $(".wrapper").toggleClass("shiftLeft");
           $(".mainFilter").fadeToggle();
       });
       $(".mainFilter").click(function(){
           $(".wrapper").removeClass("shiftLeft");
           $(".mainFilter").fadeToggle();
       });
   }
});

//导航搜索
$(function(){
   if( $(window).width()>=1200 ){
       $(".header .searchBox .searchBtn").click(function(){
           if( $(this).parents(".searchBox").find(".searchBar").is(":hidden") ){
               $(this).parents(".searchBox").find(".searchBar").fadeIn(200);
               $(this).parents(".searchBox").find(".searchBar .inpu input").focus();
           }else{
               $(this).parents(".searchBox").find(".searchBar").fadeOut(200);
           }
       });
       $(window).scroll(function(){
           if($(window).scrollTop()>100){
               $(".header .searchBox .searchBar").fadeOut(200);
           }
       });
   }
   if( $(window).width()<1200 ){
       $(".header .searchBox .searchBtn").click(function(){
           if( $(this).parents(".searchBox").find(".searchBar").is(":hidden") ){
               $(this).parents(".searchBox").find(".searchBar").fadeIn(200);
               $(this).parents(".searchBox").find(".searchBar .inpu input").focus();
               $(".header").addClass('on');
               $(".mainFilter").fadeIn(200);
           }else{
               $(this).parents(".searchBox").find(".searchBar").fadeOut(200);
               $(".header").removeClass('on');
           }
       });
       $(".mainFilter").click(function(){
           $(this).fadeOut(200);
           $(".header .searchBox .searchBar").fadeOut(200);
           $(".header").removeClass('on');
       });
   }
});

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

标签：Web,网页,width,557,header,searchBar,find,searchBox
From： https://blog.csdn.net/A240307/article/details/143243492

557.清新的化妆品响应式网页大学生期末大作业 Web前端网页制作 html+css+js

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

557.清新的化妆品响应式网页 大学生期末大作业 Web前端网页制作 html+css+js

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

557.清新的化妆品响应式网页大学生期末大作业 Web前端网页制作 html+css+js