目录
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js： 导航菜单、图片轮翻效果、鼠标悬停图片特效、悬浮图标、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>INSTYLR |时尚HTML模板</title>
<meta charset="UTF-8">
<meta name="description" content="Instyle Fashion HTML Template">
<meta name="keywords" content="instyle, fashion, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="img/favicon.ico" rel="shortcut icon"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
<!-- Main Stylesheets -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Header section -->
<header class="header-section">
<nav class="navbar navbar-expand-md navbar-dark bg-dark site-navbar">
<a class="navbar-brand site-logo" href="index.html#">
<h2><span>在
</span>风格</h2>
<p>时尚前沿</p>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<!-- Main menu -->
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">家</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">品牌</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">文件夹</a>
</li>
<li class="nav-item">
<a class="nav-link">商店</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">联系</a>
</li>
</ul>
<div class="social-links my-2 my-lg-0">
<a ><i class="fa fa-pinterest"></i></a>
<a ><i class="fa fa-facebook"></i></a>
<a ><i class="fa fa-twitter"></i></a>
</div>
</div>
</nav>
</header>
<!-- Header section end-->
<!-- Hero section -->
<section class="hero-section">
<div class="hero-slider owl-carousel">
<div class="hs-item set-bg" data-setbg="img/slider/1.jpg" data-hash="slide-1">
<div class="container">
<h2>风格是永恒的
</h2>
<a class="site-btn">阅读更多 <i class="fa fa-angle-double-right"></i></a>
</div>
<div class="next-hs set-bg" data-setbg="img/slider/2.jpg">
<a href="#slide-2" class="nest-hs-btn">下一个</a>
</div>
</div>
<div class="hs-item set-bg" data-setbg="img/slider/2.jpg" data-hash="slide-2">
<div class="container">
<h2>
风格是永恒的</h2>
<a class="site-btn">阅读更多 <i class="fa fa-angle-double-right"></i></a>
</div>
<div class="next-hs set-bg" data-setbg="img/slider/1.jpg">
<a href="#slide-1" class="nest-hs-btn">下一个</a>
</div>
</div>
</div>
<div class="hero-social-warp">
<p>在社交媒体上关注我们</p>
<div class="hero-social-links">
<a ><i class="fa fa-behance"></i></a>
<a ><i class="fa fa-dribbble"></i></a>
<a ><i class="fa fa-twitter"></i></a>
<a ><i class="fa fa-facebook"></i></a>
<a ><i class="fa fa-pinterest"></i></a>
</div>
</div>
</section>
<!-- Hero section end-->
<!-- Intro section -->
<section class="intro-section spad">
<div class="container">
<div class="row">
<div class="col-lg-5">
<img src="img/intro-img.jpg" alt="">
</div>
<div class="col-lg-7 intro-text">
<span>想要缓冲的埃涅阿斯,</span>
<h2>"我坚信，只要有一双合适的鞋，就可以统治世界."</h2>
<p>埃涅阿斯想要沙发，也不想要孩子 家园 不幸的是，它需要被写入或只是 在正义的弓箭中，箭头跟随任何人的垫子，任何质量的价格。除了箭的组成外，气体不必是euen。Pellentesque placerat 坐在 amet leo 前庭。有多少乐趣，化妆或巧克力欧盟. Donec congue vel justo eget malesuada. In arcu justo, sagittis consequat pulvinar quis, pretium quis massa. Vestibulum nec nibh eu nisi rutrum iaculis. Pellentesque placerat sit amet leo in vestibu-lum. Suspendisse quam neque, rutrum vel scelerisque eu</p>
<a class="site-btn sb-dark">阅读更多 <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Intro section end-->
<!-- Portfolio section -->
<section class="portfolio-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-7">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/1.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-3 col-md-5">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/2.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-5 col-md-12">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/3.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-6 col-md-12">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/4.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-3 col-sm-6">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/5.jpg" alt="">
<h4>查看更多</h4>
</a>
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/7.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-3 col-sm-6">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/6.jpg" alt="">
<h4>查看更多</h4>
</a>
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/8.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-3 col-sm-6">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/9.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-3 col-sm-6">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/10.jpg" alt="">
<h4>查看更多</h4>
</a>
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/11.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
<div class="col-lg-6 col-md-12">
<a href="portfolio.html" class="portfolio-item">
<img src="img/portfolio/12.jpg" alt="">
<h4>查看更多</h4>
</a>
</div>
</div>
</div>
</section>
...
2.CSS
代码如下（节选示例）：
@font-face {
font-family: "Helvetica 45 Light";
font-style: normal;
font-weight: normal;
src: local("Helvetica 45 Light"), url("../fonts/HelveticaNeue-Light.woff") format("woff");
}
@font-face {
font-family: "Helvetica 65 Medium";
font-style: normal;
font-weight: normal;
src: local("Helvetica 65 Medium"), url("../fonts/HelveticaNeue-Medium.woff") format("woff");
}
@font-face {
font-family: "Helvetica Neue Bold";
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue Bold"), url("../fonts/HelveticaNeueBold.woff") format("woff");
}
html,
body {
height: 100%;
font-family: "Helvetica 65 Medium", sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: #081624;
}
h1 {
font-size: 70px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 16px;
color: #71767b;
line-height: 1.8;
font-family: "Helvetica 45 Light", sans-serif;
}
img {
max-width: 100%;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
outline: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
...
3.JS
代码如下（节选示例）：
'use strict';
$(window).on('load', function() {
/*------------------
Preloder
--------------------*/
$(".loader").fadeOut();
$("#preloder").delay(400).fadeOut("slow");
});
(function($) {
/*------------------
Background Set
--------------------*/
$('.set-bg').each(function() {
var bg = $(this).data('setbg');
$(this).css('background-image', 'url(' + bg + ')');
});
/*------------------
Hero Slider
--------------------*/
$(".hero-slider").owlCarousel({
loop: true,
margin: 0,
nav: true,
items: 1,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
navText: ['', ''],
smartSpeed: 1200,
autoplay: false,
mouseDrag: false,
autoplay: true,
startPosition: 'URLHash'
});
/*------------------
Blog Slider
--------------------*/
$(".blog-slider").owlCarousel({
loop: true,
margin: 0,
nav: true,
dots: false,
navText: ['', ''],
margin: 15,
autoplay: false,
responsive : {
0 : {
items: 1,
},
768 : {
items: 2,
}
}
});
/*------------------
Award Slider
--------------------*/
$(".award-slider").owlCarousel({
loop: true,
margin: 0,
nav: true,
dots: true,
navText: ['', ''],
margin: 30,
autoplay: false,
responsive : {
0 : {
items: 1,
},
480 : {
items: 2,
},
768 : {
items: 3,
},
992 : {
items: 4,
}
}
});
$(".award-slider").append('<div class="owl-controls"></div>');
$(".award-slider .owl-nav, .award-slider .owl-dots").appendTo('.award-slider .owl-controls');
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
