html5+css3动画实现的一个响应式网站资源-CSDN下载

共90个文件

jpg：47个

html：12个

png：9个

html5

css3

bootstrap

需积分: 50 133 浏览量 2018-08-04 19:01:38 上传评论 1 收藏 1.97MB ZIP 举报

：“html5+css3动画实现的一个响应式网站” 在现代网页设计中，HTML5和CSS3的结合已经成为创建动态、交互性极强的响应式网站的标准工具。响应式设计是确保网站在不同设备上（如桌面、平板、手机）都能提供良好用户体验的关键。在这个名为“黑色响应式装饰公司HTML5网站模板”的项目中，开发者利用了HTML5的语义化元素和CSS3的强大功能，构建了一个既美观又实用的企业官网。【HTML5】 HTML5是超文本标记语言的最新版本，它引入了许多新特性，使得网页开发更加便捷高效。这些特性包括： 1. **语义化标签**：如<header>、<nav>、<section>、<article>和<footer>等，帮助内容组织更清晰，提高搜索引擎优化（SEO）效果。 2. **离线存储**：通过`applicationCache`，允许网页在离线状态下仍然可以访问部分内容。 3. **媒体元素**：<video>和<audio>标签，使得嵌入音频和视频变得更加简单。 4. **表单控件**：新增了日期选择器、滑块等新输入类型，提升用户体验。 5. **Canvas**：提供画布元素，用于动态图形和动画的绘制。【CSS3】 CSS3则是CSS的最新版本，为网页样式设计提供了更多可能性。在这个案例中，CSS3的应用主要体现在以下几个方面： 1. **选择器增强**：例如，使用:nth-child()或[data-*]等更精确地定位元素。 2. **多列布局**：column-count和column-gap等属性，使得创建杂志式的多列布局成为可能。 3. **过渡和动画**：transition和animation可以创建平滑的动态效果，增强了用户体验。 4. **边框和背景**：如圆角边框、阴影、渐变和多重背景，让设计更加丰富多彩。 5. **响应式设计**：媒体查询@media，可以根据设备的视口宽度调整样式，实现响应式布局。【Bootstrap】 Bootstrap是基于HTML5和CSS3的开源前端框架，它简化了网页开发流程，提供了预设的网格系统、组件和JavaScript插件。在本项目中，Bootstrap的使用可能包括： 1. **网格系统**：12列的响应式网格布局，使得页面在不同设备上都能自动调整。 2. **预定义的样式**：包括按钮、表格、表单、导航条等，保持一致的设计风格。 3. **JavaScript插件**：如模态框、下拉菜单、轮播图等，增加交互性。 4. **移动优先**：Bootstrap的设计理念是优先考虑移动设备，然后扩展到更大的屏幕。这个网站模板利用HTML5的新特性、CSS3的动画效果以及Bootstrap的框架优势，构建了一个具备出色响应式设计的公司网站。无论是UI设计的精美程度、屏幕适配的灵活性，还是交互体验的提升，都展现了现代Web技术的先进性和实用性。对于学习和参考Web开发，这是一个非常有价值的案例。

资源详情

资源评论

资源推荐

收起资源包目录

zhuangshigongsi_HTML5.zip （90个子文件）

黑色响应式装饰公司HTML5网站模板

contact.html 10KB

team.html 10KB

youshi.html 9KB

design.html 10KB

design_detail.html 9KB

team_detail.html 9KB

case.html 10KB

case_detail.html 9KB

skin

css

bootstrap.min.css 138KB

animate.min.css 60KB

style.css 46KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.eot 20KB

icomoon.eot 15KB

icomoon.svg 65KB

icomoon.ttf 15KB

images

1-1P3211043470-L.jpg 22KB

1-1P3201126340-L.jpg 3KB

weixin-pic.jpg 59KB

1-1P320102621J7.jpg 42KB

about-bg.jpg 55KB

bc.jpg 6KB

map.png 2KB

1-1P320112H00-L.jpg 4KB

1-1P3201126230-L.jpg 2KB

1-1P3201211110-L.jpg 41KB

1-1P320163J2J2.png 12KB

1-1P3210U605101.jpg 60KB

1-1P3201211380-L.jpg 36KB

logo-new.png 16KB

new.gif 656B

slider-arrow.png 437B

1-1P32109461N28.jpg 50KB

1-1P320102615Q3.jpg 37KB

1-1P3211040360-L.jpg 32KB

1-1P320163434135.png 9KB

1-1P3201210390-L.jpg 28KB

1-1P3201024310-L.jpg 25KB

1-1P321093045547.jpg 63KB

1-1P3211039100-L.jpg 48KB

1-1P320093211O1.jpg 62KB

1-1P3211044180-L.jpg 31KB

1-1P3210S14R53.jpg 76KB

1-1P320102J30-L.jpg 25KB

1-1P320102609447.jpg 38KB

1-1P3200Z1570-L.jpg 86KB

banner-height-page.gif 1KB

1-1P3211000060-L.jpg 4KB

1-1P320112Q20-L.jpg 3KB

1-1P3200Z2230-L.jpg 82KB

1-1P3211044070-L.jpg 45KB

banner-height.gif 1KB

1-1P320112F40-L.jpg 5KB

1-1P3211043130-L.jpg 33KB

1-1P3201125570-L.jpg 3KB

1-1P3211040060-L.jpg 30KB

1-1P320112I20-L.jpg 4KB

1-1P3201103480-L.jpg 27KB

1-1P320102603C1.jpg 42KB

1-1P3210S2300-L.jpg 30KB

1-1P321091R1340.jpg 106KB

1-1P3201126460-L.jpg 5KB

1-1P3200Z2100-L.jpg 63KB

1-1P3201211570-L.jpg 43KB

1-1P320112J60-L.jpg 3KB

1-1P320163555405.png 14KB

1-1P320163P3963.png 8KB

1-1P3201125430-L.jpg 5KB

1-1P3210U120T1.jpg 58KB

1-1P3211039410-L.jpg 32KB

1-1P3210959440-L.jpg 4KB

1-1P3210Z053N4.jpg 89KB

1-1P320163523C9.png 13KB

1-1P320163540364.png 76KB

1-1P3210T4100-L.jpg 40KB

sdcms.hits.js 504B

base.js 3KB

owl.carousel.min.js 42KB

wow.min.js 8KB

fastclick.min.js 8KB

bootstrap.min.js 36KB

jquery.min.js 95KB

owl.carousel.quote.js 1009B

news.html 14KB

news_detail.html 10KB

index.html 30KB

about.html 15KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <title>我的网站</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="skin/css/bootstrap.min.css"> <link rel="stylesheet" href="skin/css/animate.min.css"> <link rel="stylesheet" href="skin/css/style.css"> </head> <body id="moar"> <header class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="logo"><a class="navbar-brand" href="index.html">我的网站</a></h1> </div> <nav class="collapse navbar-right navbar-collapse" role="navigation"> <ul class="list-inline navbar-nav"> <li> <a href="index.html">首页</a> </li> <li> <a href="design.html">设计</a> </li> <li> <a href="youshi.html">优势</a> </li> <li> <a href="case.html">案例</a> </li> <li> <a href="team.html">团队</a> </li> <li> <a href="about.html">关于</a> </li> <li> <a href="news.html">资讯</a> </li> <li> <a href="contact.html">联系</a> </li> <li class="tel visible-lg-inline-block"> <a href="javascript:;"><span class="icon-page-lianxi"></span> 027-88888888</a> </li> </ul> </nav> </div> </header>  <section class="banner"> <div id="owl-banner" class="owl-carousel owl-theme"> <div class="item" style="background:url(skin/images/1-1P3200Z1570-L.jpg)"> <a><img src="skin/images/banner-height.gif" class="center-block" alt="幻灯3" /></a> </div> <div class="item" style="background:url(skin/images/1-1P3200Z2230-L.jpg)"> <a><img src="skin/images/banner-height.gif" class="center-block" alt="幻灯3" /></a> </div> <div class="item" style="background:url(skin/images/1-1P3200Z2100-L.jpg)"> <a><img src="skin/images/banner-height.gif" class="center-block" alt="幻灯3" /></a> </div> </div> <div class="banner-bc"></div> </section>  <section class="case sx-jianju"> <div class="container text-center"> <div class="home-title wow animated fadeInUp"> <h2 class="h-h2-white"> 案例 </h2> <p class="m-sm-white"> case </p> </div> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="滨海幸福里"><img src="skin/images/1-1P3201024310-L.jpg" alt="滨海幸福里" /> <figcaption> <h3>滨海幸福里<span>办公写字楼</span></h3> </figcaption> </a> </figure> </div> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="中国铁塔"><img src="skin/images/1-1P320102J30-L.jpg" alt="中国铁塔" /> <figcaption> <h3>中国铁塔<span>办公写字楼</span></h3> </figcaption> </a> </figure> </div> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="广州医疗美容会所"><img src="skin/images/1-1P3201211110-L.jpg" alt="广州医疗美容会所" /> <figcaption> <h3>广州医疗美容会所<span>办公写字楼</span></h3> </figcaption> </a> </figure> </div> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="生物岛办公室装修"><img src="skin/images/1-1P3201211380-L.jpg" alt="生物岛办公室装修" /> <figcaption> <h3>生物岛办公室装修<span>办公写字楼</span></h3> </figcaption> </a> </figure> </div> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="富力新天地办公室"><img src="skin/images/1-1P3201211570-L.jpg" alt="富力新天地办公室" /> <figcaption> <h3>富力新天地办公室<span>餐厅酒楼</span></h3> </figcaption> </a> </figure> </div> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp"> <figure> <a href="javascript:;" title="温碧泉化妆品"><img src="skin/images/1-1P3201210390-L.jpg" alt="温碧泉化妆品" /> <figcaption> <h3>温碧泉化妆品<span>办公写字楼</span></h3> </figcaption> </a> </figure> </div> </div> <p class="b-m-none"> <a href="javascript:;" class="btn-center">更多案例 →</a> </p> </div> </section>  <section class="kehu sx-jianju"> <div class="container text-center"> <div class="home-title wow animated fadeInUp"> <h2 class="h-h2" style=" color:#333"> 合作客户 </h2> <p class="m-sm"> Testimonials </p> </div> <div class="row"> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3211000060-L.jpg" alt="网易" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3210959440-L.jpg" alt="酷狗" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P320112Q20-L.jpg" alt="赛意" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P320112J60-L.jpg" alt="创科" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P320112I20-L.jpg" alt="国际影城" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P320112H00-L.jpg" alt="珍爱网" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P320112F40-L.jpg" alt="RUST" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3201126460-L.jpg" alt="迪卡" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3201126340-L.jpg" alt="华晨" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3201126230-L.jpg" alt="LG" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3201125570-L.jpg" alt="蔬稻餐厅" /></figure> <figure class="col-xs-4 col-sm-4 col-md-2 col-lg-2 wow animated fadeInUp"><img src="skin/images/1-1P3201125430-L.jpg" alt="温碧泉" /></figure> </div> <p class="b-m-none"> <a href="javascript:;" class="btn-center">更多知名客户 →</a> </p> </div> </section>  <section class="team sx-jianju text-center"> <div class="container"> <div class="home-title wow animated fadeInUp"> <h2 class="h-h2-white"> 团队 </h2> <p class="m-sm-white"> team </p> <p class="m-sm-white2"> 设计、策划、企划、项目管理等各类高端人才系统，从办公室设计到开�