紫色大气风格响应式个人服务展示网页模板.zip资源-CSDN文库

共132个文件

scss：75个

jpg：21个

js：10个

html5

H5模版

HTML模版

161 浏览量 2023-06-20 19:22:05 上传评论收藏 2.98MB ZIP 举报

"紫色大气风格响应式个人服务展示网页模板.zip" 涵盖了几个重要的IT知识点，主要集中在网页设计和开发领域。 "响应式设计"是现代网页设计的核心概念之一。它指的是网站能够根据用户设备的屏幕尺寸和方向自动调整布局、图片大小以及功能，提供一致且优化的用户体验。这种设计方法可以确保网页在桌面电脑、平板电脑和智能手机等不同设备上都能正常显示，避免了为每种设备单独设计和维护一个版本的网站。 "HTML5"是超文本标记语言（HTML）的最新版本，它引入了许多新特性，如语义化标签、媒体元素、离线存储、 canvas 绘画、svg矢量图等，大大增强了网页的交互性和多媒体内容的处理能力。HTML5的这些改进使得开发者能够创建更丰富、更动态的网页应用，同时提高网页性能和用户体验。再者，"H5模版"是基于HTML5技术构建的网页模板，通常包含了预设的页面结构、样式和交互效果。这样的模板对于非专业开发者或者快速搭建网站来说非常方便，他们可以直接修改模板中的内容和样式来满足自己的需求，减少了从零开始设计和编码的工作量。此外，"HTML模版"泛指使用HTML语言编写的网页模板，可能包括CSS（层叠样式表）和JavaScript等其他技术。这些模板通常包括头部、主体和底部等基本页面结构，以及导航栏、内容区块、页脚等常见元素，开发者可以根据自己的需要进行定制和扩展。在"紫色大气风格"这部分，我们可以理解为模板采用了紫色调作为主题色彩，营造出一种高端、专业的视觉效果。大气风格可能意味着模板的设计简洁而宽敞，注重空间感和视觉平衡，以提升用户的浏览体验。至于"个人服务展示"，这表明该模板特别适合用于个人简历网站、自由职业者的工作展示或小型服务公司的在线门户，能够有效地展示个人技能、作品集和服务项目。至于压缩包内的文件"22727"，这可能是模板的某个组成部分，比如HTML文件、CSS文件、图片资源或JavaScript文件。具体用途需要解压并查看文件内容才能确定。总结来说，这个压缩包提供了一个响应式的HTML5网页模板，具有紫色和大气的设计风格，适用于个人服务展示。开发者或网站所有者可以利用这个模板快速创建或更新他们的在线存在，同时享受到HTML5技术带来的诸多优势。

资源推荐

资源详情

资源评论

收起资源包目录

紫色大气风格响应式个人服务展示网页模板.zip （132个子文件）

bootstrap.css 146KB

animate.css 70KB

icomoon.css 59KB

style.css 34KB

magnific-popup.css 8KB

owl.carousel.min.css 4KB

owl.theme.default.min.css 2KB

icomoon.eot 325KB

glyphicons-halflings-regular.eot 20KB

index.html 17KB

single.html 16KB

blog.html 12KB

services.html 12KB

about.html 12KB

work.html 11KB

work-single.html 8KB

contact.html 8KB

img-1.jpg 340KB

services-img-1.jpg 218KB

img-7.jpg 172KB

work-3.jpg 153KB

img-5.jpg 131KB

about.jpg 112KB

work-2.jpg 102KB

about-2.jpg 95KB

work-7.jpg 86KB

img-6.jpg 83KB

img-4.jpg 74KB

work-5.jpg 63KB

img-2.jpg 62KB

work-1.jpg 55KB

work-6.jpg 53KB

services-img.jpg 49KB

img-3.jpg 40KB

img_bg_1.jpg 38KB

img-8.jpg 38KB

work-4.jpg 36KB

img-9.jpg 25KB

jquery.min.js 82KB

owl.carousel.min.js 39KB

bootstrap.min.js 36KB

jquery.magnific-popup.min.js 20KB

modernizr-2.6.2.min.js 15KB

jquery.waypoints.min.js 9KB

jquery.easing.1.3.js 8KB

respond.min.js 4KB

main.js 4KB

magnific-popup-options.js 1KB

bootstrap.css.map 83KB

style.css.map 10KB

_variables.scss 30KB

style.scss 29KB

_glyphicons.scss 20KB

_forms.scss 16KB

_navbar.scss 14KB

_theme.scss 8KB

_normalize.scss 7KB

_vendor-prefixes.scss 6KB

_panels.scss 6KB

_type.scss 6KB

_button-groups.scss 6KB

_carousel.scss 5KB

_navs.scss 5KB

_dropdowns.scss 5KB

_tables.scss 5KB

_responsive-utilities.scss 4KB

_gradients.scss 4KB

_input-groups.scss 4KB

_buttons.scss 4KB

_modals.scss 4KB

_popovers.scss 3KB

_grid.scss 3KB

_list-group.scss 3KB

_scaffolding.scss 3KB

_tooltip.scss 3KB

_forms.scss 3KB

_grid-framework.scss 2KB

_pagination.scss 2KB

_progress-bars.scss 2KB

_print.scss 2KB

_alerts.scss 2KB

_buttons.scss 1KB

bootstrap.scss 1KB

_grid.scss 1KB

_code.scss 1KB

_badges.scss 1KB

_image.scss 1KB

_labels.scss 1KB

_jumbotron.scss 1KB

_mixins.scss 986B

_media.scss 900B

_thumbnails.scss 892B

_pager.scss 855B

_component-animations.scss 819B

_close.scss 815B

_utilities.scss 765B

_bootstrap-mincer.scss 757B

_table-row.scss 715B

_list-group.scss 672B

_clearfix.scss 611B

共 132 条

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Noah Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" />  <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />  <link rel="shortcut icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700" rel="stylesheet">  <link rel="stylesheet" href="css/animate.css">  <link rel="stylesheet" href="css/icomoon.css">  <link rel="stylesheet" href="css/bootstrap.css">  <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css">  <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/style.css">  <script src="js/modernizr-2.6.2.min.js"></script>   </head> <body> <nav id="colorlib-main-nav" role="navigation"> <a href="https://www.51qianduan.com/">51前端</a> <div class="js-fullheight colorlib-table"> <div class="colorlib-table-cell js-fullheight"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="text" class="form-control" id="search" placeholder="Enter any key to search..."> <button type="submit" class="btn btn-primary"><i class="icon-search3"></i></button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="services.html">Services</a></li> <li><a href="work.html">Work</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> <h2 class="head-title">Works</h2> <a href="https://www.51qianduan.com/">51前端</a> <a href="https://www.51qianduan.com/">51前端</a> <a href="https://www.51qianduan.com/">51前端</a> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </div> </div> </nav> <div id="colorlib-page"> <header> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="colorlib-navbar-brand"> <a class="colorlib-logo" href="index.html"><span>No</span><span>ah</span></a> </div> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </div> </header> <div id="colorlib-about"> <div class="container"> <div class="row text-center"> <h2 class="bold">About</h2> </div> <div class="row"> <div class="col-md-5 animate-box"> <div class="owl-carousel3"> <div class="item"> <img class="img-responsive about-img" src="images/about.jpg" alt="html5 bootstrap template by colorlib.com"> </div> <div class="item"> <img class="img-responsive about-img" src="images/about-2.jpg" alt="html5 bootstrap template by colorlib.com"> </div> </div> </div> <div class="col-md-6 col-md-push-1 animate-box"> <div class="about-desc"> <div class="owl-carousel3"> <div class="item"> <h2><span>Noah</span><span>Henderson</span></h2> </div> <div class="item"> <h2><span>I'm</span><span>A Designer</span></h2> </div> </div> <div class="desc"> <div class="rotate"> <h2 class="heading">About</h2> </div> <p>A small river named Duden <a href="#">flows by their place</a> and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p> <p class="colorlib-social-icons"> <a href="#"><i class="icon-facebook4"></i></a> <a href="#"><i class="icon-twitter3"></i></a> <a href="#"><i class="icon-googleplus"></i></a> <a href="#"><i class="icon-dribbble2"></i></a> </p> <p><a href="#" class="btn btn-primary btn-outline">Contact Me!</a></p> </div> </div> </div> </div> </div> </div> <div id="colorlib-services"> <div class="container"> <div class="row text-center"> <h2 class="bold">Services</h2> </div> <div class="row"> <div class="col-md-12"> <div class="services-flex"> <div class="one-third"> <div class="row"> <div class="col-md-12 col-md-offset-0 animate-box intro-heading"> <span>My Services</span> <h2>Here Are Some of My Skills</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="rotate"> <h2 class="heading">Services</h2> </div> </div> <div class="col-md-6"> <div class="services animate-box"> <h3>1 - Graphic Design</h3> <ul> <li>UI Design</li> <li>Website & Digital Design</li> <li>Brading & Visual Identity</li> <li>Print Design</li> </ul> </div> <div class="services animate-box"> <h3>3 - Front End Development</h3> <ul> <li>HTML / CSS</li> <li>JS & Jquery Startup</li> <li>WordPress</li> <li>Jomla</li> </ul> </div> </div> <div class="col-md-6"> <div class="services animate-box"> <h3>2 - Illustration</h3> <ul> <li>Editorial</li> <li>Narrative</li> <li>Motion Graphics</li> <li>Animation</li> <li>Visual Effects</li> </ul> </div> <div class="services animate-box"> <h3>4 - Web Marketing</h3> <ul> <li>Sales Marketing</li> <li>Invoice</li> <li>eCommerce</li> </ul> </div> </div> </div> </div> <div class="one-forth services-img" style="background-image: url(images/services-img-1.jpg);"> </div> </div> </div> </div> </div> </div> <div id="colorlib-work"> <div class="container"> <div class="row text-center"> <h2 class="bold">Works</h2> </div> <div class="row"> <div class="col-md-12 col-md-offset-0 text-center animate-box intro-heading"> <span>Portfolio</span> <h2>Done Projects</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="rotate"> <h2 class="heading">Portfolio</h2> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="work-entry animate-box"> <a href="https://www.51qianduan.com/">51前端</a> <div class="col-md-4 col-md-offset-4"> <div class="desc"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separate

评论收藏

内容反馈