个人网站-服务页面
服务页面是个人网站上至关重要的一个部分，因为它直接展示了你能为访问者提供的价值和专长。以下是关于如何设计个人网站服务页面的建议：
- 明确标题和概述
标题：使用清晰、明确的标题来描述你的服务，例如“我提供的服务”或“我的专业领域”。
概述：在页面顶部提供一个简短的概述，简要介绍你的服务内容、优势以及为何访问者应该选择你。 - 列出服务项目
详细列出：具体、详细地列出你提供的每一项服务，确保访问者清楚了解你的服务范围。
图标和图片：使用相关的图标或图片来增强视觉效果，使服务内容更加吸引人。
简短描述：为每个服务项目提供简短的描述，说明服务的核心价值和特点。 - 突出优势和特点
强调优势：明确指出你的服务相较于竞争对手的优势，例如经验丰富、专业资质等。
案例展示：如果可能的话，展示一些成功的案例或客户评价，以证明你的服务价值。 - 明确的定价和费用
清晰定价：如果适用，提供明确的定价信息，包括固定价格、套餐或计费方式。
费用说明：解释任何额外费用或隐形收费，确保访问者了解完整的费用情况。 - 联系方式和咨询选项
联系方式：提供一个明确的联系方式，如电子邮件地址、电话号码或在线聊天窗口，以便访问者可以轻松地咨询或预约服务。
咨询表单：如果可能的话，提供一个简单的咨询表单，让访问者可以留下他们的联系信息和问题。 - 响应式设计
确保兼容性：确保服务页面在不同设备和屏幕尺寸上都能良好地显示，包括桌面电脑、平板电脑和手机等。 - 定期更新
更新内容：随着你提供的服务的变化或扩展，定期更新服务页面内容。
通过精心设计服务页面，你可以清晰地展示你的服务内容和优势，吸引潜在客户的关注，并与他们建立联系。同时，通过提供明确的定价和费用信息，以及方便的咨询和联系方式，提高访问者的转化率和满意度。
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--font-family-->
<link href="programb" rel="stylesheet">
<link href="programb" rel="stylesheet">
<link href="programb" rel="stylesheet">
<!-- TITLE OF SITE -->
<title>Zombiz</title>
<!-- for title img -->
<link rel="shortcut icon" type="image/icon" href="assets/images/logo/favicon.png"/>
<!--font-awesome.min.css-->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--linear icon css-->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!--animate.css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--hover.css-->
<link rel="stylesheet" href="assets/css/hover-min.css">
<!--vedio player css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--owl.carousel.css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link href="assets/css/owl.theme.default.min.css" rel="stylesheet"/>
<!--bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- bootsnav -->
<link href="assets/css/bootsnav.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="assets/css/style.css">
<!--responsive.css-->
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!--header start-->
<section class="header">
<div class="container">
<div class="header-left">
<ul class="pull-left">
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> +992 563 542
</a>
</li><!--/li-->
<li>
<a href="#">
<i class="fa fa-envelope" aria-hidden="true"></i>info@mail.com
</a>
</li><!--/li-->
</ul><!--/ul-->
</div><!--/.header-left -->
<div class="header-right pull-right">
<ul>
<li class="reg">
<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">
Register
</a>
/
<a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">
Log in
</a>
<!-- small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa fa-close"></i>
</span>
</button>
<h4 class="modal-title" id="mySmallModalLabel">
Sign In
</h4>
<form class="sm-frm" style="padding:25px">
<label>Name :</label>
<input type="text" class="form-control" placeholder="Enter Email">
<label>Passoward :</label>
<input type="text" class="form-control" placeholder="Enter Passoward">
<label><input type="checkbox" name="personality"> Remenber Me</label>
<button type="button" class="btn btn-default pull-right">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa fa-close"></i>
</span>
</button>
<h4 class="modal-title" id="myLargeModalLabel">Register</h4>
<form class="lg-frm" style="padding:25px">
<label>Name :</label>
<input type="text" class="form-control" placeholder="Enter Name">
<label>Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
<label>Passoward :</label>
<input type="text" class="form-control" placeholder="Enter Passoward">
<button type="button" class="btn btn-default pull-right">Submit</button>
</form>
</div>
</div>
</div>
</div>
</li><!--/li -->
<li>
<div class="social-icon">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul><!--/.ul -->
</div><!--/.social-icon -->
</li><!--/li -->
</ul><!--/ul -->
</div><!--/.header-right -->
</div><!--/.container -->
</section><!--/.header-->
<!--header end-->
<!--menu start-->
<section id="menu">
<div class="container">
<div class="menubar">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo/logo.png" alt="logo">
</a>
</div><!--/.navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="service.html">Service</a></li>
<li><a href="project.html">Project</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li>
<a href="#">
<span class="lnr lnr-cart"></span>
</a>
</li>
<li class="search">
<form action="">
<input type="text" name="search" placeholder="Search....">
<a href="#">
<span class="lnr lnr-magnifier"></span>
</a>
</form>
</li>
</ul><!-- / ul -->
</div><!-- /.navbar-collapse -->
</nav><!--/nav -->
</div><!--/.menubar -->
</div><!-- /.container -->
</section><!--/#menu-->
<!--menu end-->
<!--about-part start-->
<section class="about-part service-part">
<div class="container">
<div class="about-part-details text-center">
<h2>service</h2>
<div class="about-part-content">
<div class="breadcrumbs">
<div class="container">
<ol class="breadcrumb">
<li><a href="index.html">home</a><span>//</span></li>
<li><a href="service.html">service</a></li>
</ol><!--/.breadcrumb-->
</div><!--/.container-->
</div><!--/.breadcrumbs-->
</div><!--/.about-part-content-->
</div><!--/.about-part-details-->
</div><!--/.container-->
</section><!--/.about-part-->
<!--about-part end-->
<!--service start-->
<section class="service">
<div class="container">
<div class="service-details">
<div class="section-header text-center">
<h2>our services</h2>
<p>
Pallamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div><!--/.section-header-->
<div class="service-content-one">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service1.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">busisness planning</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service2.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">busisness consultency</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service3.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">financial services</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.service-content-one-->
<div class="service-content-two">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service4.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">risk management</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service5.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">expert advisers</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
<div class="col-sm-4 col-xs-12">
<div class="service-single text-center">
<div class="service-img">
<img src="assets/images/service/service6.png" alt="image of service" />
</div><!--/.service-img-->
<div class="service-txt">
<h2>
<a href="#">24/7 customer support</a>
</h2>
<p>
Lorem ipsum dolo dolor in in voluptate velit esse cillum dolore. epteur sint oat cupidatat
</p>
<a href="#" class="service-btn">
learn more
</a>
</div><!--/.service-txt-->
</div><!--/.service-single-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.service-content-two-->
</div><!--/.service-details-->
</div><!--/.container-->
</section><!--/.service-->
<!--service end-->
<!-- new-project start -->
<section class="new-project">
<div class="container">
<div class="new-project-details">
<div class="row">
<div class="col-md-10 col-sm-8">
<div class="single-new-project">
<h3>
Want to start a new project with us? Let’s Start!
</h3>
</div><!-- /.single-new-project-->
</div><!-- /.col-->
<div class="col-md-2 col-sm-4">
<div class="single-new-project">
<a href="#" class="slide-btn">
start now
</a>
</div><!-- /.single-new-project-->
</div><!-- /.col-->
</div><!-- /.row-->
</div><!-- /.new-project-details-->
</div><!-- /.container-->
</section><!-- /.new-project-->
<!-- new-project end -->
<!--hm-footer start-->
<section class="hm-footer">
<div class="container">
<div class="hm-footer-details">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title ">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="logo" />
</a>
</div><!-- /.logo-->
</div><!--/.hm-foot-title-->
<div class="hm-foot-para">
<p>
Lorem ipsum dolor sit amt conetur adcing elit. Sed do eiusod tempor utslr. Ut laboris nisi ut aute irure dolor in rein velit esse.
</p>
</div><!--/.hm-foot-para-->
<div class="hm-foot-icon">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><!--/li-->
</ul><!--/ul-->
</div><!--/.hm-foot-icon-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-2 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4>Useful Links</h4>
</div><!--/.hm-foot-title-->
<div class="footer-menu ">
<ul class="">
<li><a href="index.html" >Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div><!-- /.footer-menu-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-3 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4>from the news</h4>
</div><!--/.hm-foot-title-->
<div class="hm-para-news">
<a href="blog_single.html">
The Pros and Cons of Starting an Online Business.
</a>
<span>12th June 2017</span>
</div><!--/.hm-para-news-->
<div class="footer-line">
<div class="border-bottom"></div>
</div>
<div class="hm-para-news">
<a href="blog_single.html">
The Pros and Cons of Starting an Online Business.
</a>
<span>12th June 2017</span>
</div><!--/.hm-para-news-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-3 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4> Our Newsletter</h4>
</div><!--/.hm-foot-title-->
<div class="hm-foot-para">
<p class="para-news">
Subscribe to our newsletter to get the latest News and offers..
</p>
</div><!--/.hm-foot-para-->
<div class="hm-foot-email">
<div class="foot-email-box">
<input type="text" class="form-control" placeholder="Email Address">
</div><!--/.foot-email-box-->
<div class="foot-email-subscribe">
<button type="button" >go</button>
</div><!--/.foot-email-icon-->
</div><!--/.hm-foot-email-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.hm-footer-details-->
</div><!--/.container-->
</section><!--/.hm-footer-details-->
<!--hm-footer end-->
<!-- footer-copyright start -->
<footer class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="foot-copyright pull-left">
<p>
Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">网页模板</a></p>
</div><!--/.foot-copyright-->
</div><!--/.col-->
<div class="col-sm-5">
<div class="foot-menu pull-right
">
<ul>
<li ><a href="#">legal</a></li>
<li ><a href="#">sitemap</a></li>
<li ><a href="#">privacy policy</a></li>
</ul>
</div><!-- /.foot-menu-->
</div><!--/.col-->
</div><!--/.row-->
<div id="scroll-Top">
<i class="fa fa-angle-double-up return-to-top" id="scroll-top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
</div><!--/.scroll-Top-->
</div><!-- /.container-->
</footer><!-- /.footer-copyright-->
<!-- footer-copyright end -->
<!-- jaquery link -->
<script src="assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--modernizr.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!--bootstrap.min.js-->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- bootsnav js -->
<script src="assets/js/bootsnav.js"></script>
<!-- for manu -->
<script src="assets/js/jquery.hc-sticky.min.js" type="text/javascript"></script>
<!-- vedio player js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!--owl.carousel.js-->
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<!-- counter js -->
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<!--Custom JS-->
<script type="text/javascript" src="assets/js/jak-menusearch.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script>
</body>
</html>
扫一扫
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
