<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Simple</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link href='http//fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css' />
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<!-- top-nav -->
<nav class="top-nav">
<div class="shell">
<a href="#" class="nav-btn">HOMEPAGE<span></span></a>
<span class="top-nav-shadow"></span>
<ul>
<li class="active"><span><a href="#">home</a></span></li>
<li><span><a href="#">services</a></span></li>
<li><span><a href="#">projects</a></span></li>
<li><span><a href="#">solutions</a></span></li>
<li><span><a href="#">jobs</a></span></li>
<li><span><a href="#">blog</a></span></li>
<li><span><a href="#">contacts</a></span></li>
</ul>
</div>
</nav>
<!-- end of top-nav -->
<!-- header -->
<header id="header">
<!-- shell -->
<div class="shell">
<div class="header-inner">
<!-- header-cnt -->
<div class="header-cnt">
<h1 id="logo"><a href="#">Simple</a></h1>
<p>
<span class="mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam ante, egestas tristique consequat ut, pulvinar a ante.</span>
<span class="desktop"> Donec commodo eros at felis tempor at porttitor mauris adipisci morbi in velit sapien modo eros at felis te adispicing ulvinar a ante donec commodo eros at felis.</span>
</p>
<a href="#" class="blue-btn">GET STARTED NOW</a>
</div>
<!-- end of header-cnt -->
<!-- slider -->
<div class="slider-holder">
<div class="flexslider">
<ul class="slides">
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
</ul>
</div>
</div>
<!-- end of slider -->
<div class="cl"> </div>
</div>
<div class="cl"> </div>
</div>
<!-- end of shell -->
</header>
<!-- end of header -->
<!-- main -->
<div class="main">
<span class="shadow-top"></span>
<!-- shell -->
<div class="shell">
<div class="container">
<!-- testimonial -->
<section class="testimonial">
<h2>Responsive CSS Template with jQuery Slider</h2>
<p><strong>“</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consequat. Nam leo libero, scelerisque tincidunt commodo id, hendrerit vitae orci. <span class="mobile">Suspendisse eget nibh turpis. Sed at accumsan neque. Praesent purus eros, egestas eu tempus ut, mollis et libero"</span></p>
</section>
<!-- testimonial -->
<section class="blog">
<!-- content -->
<div class="content">
<img src="css/images/i-img.png" alt="" class="alignleft"/>
<div class="cnt">
<h3>We Guarantee Commitment & Quality</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consequat. Nam leo libero, scelerisque tincidunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque. Praesent purus eros, egestas eu temp</p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
<li><a href="#">Cras molestie condimentum consequat. </a></li>
<li><a href="#">Nam leo libero, scelerisque tincidunt commodo id</a></li>
<li><a href="#">Dae molestie condimentum consequat dolor</a></li>
</ul>
</div>
</div>
<!-- end of content -->
<!-- sidebar -->
<aside class="sidebar">
<!-- widget -->
<div class="widget">
<h3>Latest Blog Posts</h3>
<ul>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img.png" alt="" /></a>
</div>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em> </a><span>02.02.2012</span></a> </p>
</li>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img2.png" alt="" /></a>
</div>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em> </a><span>01.02.2012</span></a> </p>
</li>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img3.png" alt="" /></a>
</div>
<p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em>
<span>30.01.2012</span></a></p>
</li>
</ul>
<div class="cl"> </div>
</div>
<a href="#" class="view">View All</a>
<!-- end of widget -->
</aside>
<!-- end of sidebar -->
<div class="cl"> </div>
</section>
<!-- cols -->
<section class="cols">
<div class="col">
<h3>Tableless Construction</h3>
<img src="css/images/cols-img.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/cols-img2.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="col">
<h3>Our Partners</h3>
<img src="css/images/cols-img3.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="cl"> </div>
</section>
<!-- end of cols -->
</div>
<!-- end of shell -->
</div>
<!-- end of container -->
</div>
<!-- end of main -->
</div>
<!-- footer-push -->
<div id="footer-push"></div>
<!-- end of footer-push -->
<!-- end of wrapper -->
<!-- footer -->
<div id="footer">
<span class="shadow-bottom"></span>
<!-- footer-cols -->
<div class="footer-cols">
<!-- shell -->
<div class="shell">
<div class="col">
<h3><a href="#">Solutions</a></h3>
<div class="col-cnt">
<ul>
<li><a href="#">Lorem lipsum dolor </a></li>
<li><a href="#">Ame tleo libero dolor</a></li>
<li><a href="#">Aidpispicing l
没有合适的资源?快使用搜索试试~ 我知道了~
HTML+CSS+JS精品网页模板 H51.rar
共53个文件
png:45个
js:4个
css:2个
1 下载量 181 浏览量
2024-05-08
22:05:48
上传
评论
收藏 812KB RAR 举报
温馨提示
HTML+CSS+JS精品网页模板,设置导航条、轮翻效果,鼠标滑动效果,自动弹窗,点击事件、链接等功能;适用于大学生期末大作业或公司网页制作。响应式网页,可以根据不同的设备屏幕大小自动调整页面布局; 支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改; 支持包括IE、Firefox、Chrome、Safari主流浏览器浏览; 下载文件解压缩,用Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件打开,只需更改源代码中的文字和图片可直接使用。图片的命名和格式需要与原图片的名字和格式一致,其他的无需更改。如碰到HTML5+CSS+JS等专业技术问题,以及需要对应行业的模板等相关源码、模板、资料、教程等,随时联系博主咨询。 网页设计和制作、大学生网页课程设计、期末大作业、毕业设计、网页模板,网页成品源代码等,5000+套Web案例源码,主题涵盖各行各业,关注作者联系获取更多源码; 更多优质网页博文、网页模板移步查阅我的CSDN主页:angella.blog.csdn.net。
资源推荐
资源详情
资源评论
收起资源包目录
HTML+CSS+JS精品网页模板 H51.rar (53个子文件)
HTML+CSS+JS精品网页模板 H51
js
jquery.flexslider-min.js 11KB
functions.js 925B
jquery-1.8.0.min.js 90KB
modernizr.custom.js 7KB
css
style.css 18KB
flexslider.css 3KB
images
logo-mobile.png 12KB
footer-cols.png 12KB
slider-mobile@2x.png 28KB
active-nav-border.png 1KB
header-mobile.png 9KB
nav-arr-active.png 3KB
col-separator.png 1KB
top-nav-shadow.png 1KB
nav-arr.png 4KB
control-nav-bg.png 1000B
header-cnt.png 25KB
sidebar-list-border.png 2KB
logo.png 19KB
main-shadow-bottom.png 3KB
post-img.png 4KB
slider-mobile.png 13KB
post-img2.png 5KB
post-img3.png 5KB
main-shadow.png 3KB
bullet-footer-col.png 1KB
logo-tablet.png 14KB
slider-tablet.png 13KB
blue-btn-mobile.png 5KB
blue-btn2@x.png 4KB
logo-@2x.png 14KB
section-shadow.png 2KB
header.png 66KB
favicon.ico 1KB
cols-img2.png 12KB
bullet.png 1KB
slider.png 16KB
header-tablet.png 15KB
control-nav-mobile.png 3KB
slide-img.png 324KB
blue-btn.png 8KB
i-img.png 61KB
cols-img3.png 10KB
nav-arr@2x.png 1KB
cols-img.png 8KB
header-@2x.png 13KB
tablet-section-shadow.png 2KB
mobile-section-shadow@2x.png 2KB
body.png 18KB
mobile-section-shadow.png 3KB
footer-nav-border.png 1008B
control-nav.png 4KB
index.html 10KB
共 53 条
- 1
资源评论
仙女网页制作
- 粉丝: 4451
- 资源: 177
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功