<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/tabs.css">
<link rel="stylesheet" href="css/zerogrid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all">
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/tms-0.3.js"></script>
<script src="js/tms_presets.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/Vegur-L_300.font.js"></script>
<script src="js/Vegur-M_500.font.js"></script>
<script src="js/Vegur-R_400.font.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/tabs.js"></script>
<script src="js/FF-cash.js"></script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script>
$(window).load(function(){
$('.slider')._TMS({
prevBu:'.prev',
nextBu:'.next',
pauseOnHover:true,
pagNums:false,
duration:800,
easing:'easeOutQuad',
preset:'Fade',
slideshow:7000,
pagination:'.pagination',
waitBannerAnimation:false,
banners:'fromLeft'
})
})
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http//windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http//storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<!--==============================header=================================-->
<header>
<div class="main zerogrid">
<h1><a href="index.html"><img src="images/logo.png" alt=""></a></h1>
<nav>
<ul class="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
</div>
</header>
<section id="header-content">
<div class="main zerogrid">
<div class="slider">
<ul class="items">
<li><img src="images/slider-1.jpg" alt="">
<div class="banner">
<p><strong class="font-1">Use</strong><strong class="font-2">our time</strong><strong class="font-1">to save your</strong><strong class="font-2">money!</strong></p>
<a href="#">Read More</a>
</div>
</li>
<li><img src="images/slider-2.jpg" alt="">
<div class="banner">
<p><strong class="font-1">Good</strong><strong class="font-2">solutions</strong><strong class="font-1">for your</strong><strong class="font-2">business!</strong></p>
<a href="#">Read More</a>
</div>
</li>
<li><img src="images/slider-3.jpg" alt="">
<div class="banner">
<p><strong class="font-1">Use</strong><strong class="font-2">our time</strong><strong class="font-1">to save your</strong><strong class="font-2">money!</strong></p>
<a href="#">Read More</a>
</div>
</li>
<li><img src="images/slider-4.jpg" alt="">
<div class="banner">
<p><strong class="font-1">Good</strong><strong class="font-2">solutions</strong><strong class="font-1">for your</strong><strong class="font-2">business!</strong></p>
<a href="#">Read More</a>
</div>
</li>
</ul>
<div class="pagination">
<ul>
<li><a href="#"><img src="images/slider-1-small.jpg" alt=""></a></li>
<li><a href="#"><img src="images/slider-2-small.jpg" alt=""></a></li>
<li><a href="#"><img src="images/slider-3-small.jpg" alt=""></a></li>
<li><a href="#"><img src="images/slider-4-small.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
</section>
<!--==============================content================================-->
<section id="content" class="border">
<div class="zerogrid">
<div class="row">
<div class="col-1-3">
<div class="block-1">
<h3>think.</h3>
<p class="color-1">Genesis is one of free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
<div class="col-1-3">
<div class="block-1">
<h3>choose.</h3>
<p class="color-1">This Genesis Template</a> goes with two packages â?with PSD source files and without them. PSD source files are available for the registered members.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
<div class="col-1-3">
<div class="block-1">
<h3>grow.</h3>
<p class="color-1">This website template has several pages: Home Page, About, Our Services, Projects, Clients, Contact Us (note that contact us form â?doesnât work).</p>
<a href="#" class="button">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-2-3">
<div class="left-1 page1-col1">
<h2 class="h2">Welcome to our website!</h2>
<p class="color-1 p2">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis </p>
<p>Nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit molestie consequat, vel illum dolore eu feugiat nulla.</p>
<div class="block-2 wrap">
<a href="#">Read More</a>
<p class="extra-wrap">Our work is<strong>dedicated to</strong><strong>the prosperity</strong><strong>of our clients!</strong></p>
</div>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</p>
<div class="page1-img1"></div>
</div>
</div>
<div class="col-1-3">
<h2 class="left-1">Our News</h2>
<div class="tabs">
<ul class="nav">
<li class="selected"><a href="#tab-1">Latest</a></li>
<li><a href="#tab-2">Popular</a></li>
<li><a href="#tab-3">All News</a></li>
</ul>
<div id="tab-1" class="tab-content">
<div class="inner">
<div class="wrap block-3 border-1">
<img src="images/page1-img2.jpg" alt="" class="img-indent">
<div class="extra-wrap">
<p class="color-1">Duis autem veeum iriure dolor hendrerit.</p>
<p>Molestie consequat, vel nulla
H16_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
需积分: 0 10 浏览量
更新于2023-08-01
收藏 1.16MB ZIP 举报
【标题与描述解析】
标题“H16_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”揭示了这是一个专门针对手机网站设计的HTML源码包,其中包含了移动端前端开发的H5(HTML5)模板。关键词“H16”可能指的是该模板系列的一个特定版本或者设计风格。源码是自适应和响应式的,意味着它能够根据不同的设备屏幕尺寸自动调整布局,提供良好的用户体验。
【前端模板】
前端模板是预先设计和编码的网页结构,开发者可以基于这些模板快速构建网站。在这个案例中,“H16_html手机网站”模板提供了适用于移动设备的网页设计基础,包括布局、样式、交互元素等。前端模板通常包含HTML、CSS(层叠样式表)和JavaScript文件,用于定义页面内容、样式和行为。
【响应式设计】
响应式设计是一种网页设计方法,使网站能够在不同设备上(如台式机、平板电脑、智能手机)以最优方式显示。通过使用媒体查询、流式布局和灵活的图片尺寸,响应式设计能够自动适应屏幕大小,确保内容在任何设备上都能清晰、易读且功能完备。
【H5模板】
H5通常指的是HTML5,是HTML的最新版本,增加了许多新功能和API,如拖放功能、媒体元素、离线存储、画布、SVG图形以及Geolocation API等。H5模板是基于这些新特性的,能提供更丰富的交互性和多媒体体验。此模板可能包含了HTML5的新标签,如<header>、<footer>、<nav>等,以帮助组织和语义化网页内容。
【手机前端】
手机前端开发专注于为移动设备创建用户界面和交互。它涉及到对小屏幕优化,如触摸事件处理、加载速度优化、屏幕方向适配等。使用H5模板进行手机前端开发,可以确保网站在移动设备上的性能和用户体验。
【文件名称列表:H16】
在压缩包中,只有一个名为“H16”的文件或文件夹。这很可能是整个模板项目的根目录,包含了所有必要的HTML、CSS、JavaScript以及其他资源文件,如图片、字体等。开发者需要解压这个文件并查看其内容来获取完整的源码结构,并根据需要进行修改和应用到自己的项目中。
总结起来,这个压缩包提供的是一套完整的移动端HTML5前端模板,具备响应式设计,适合于开发自适应各种设备的手机网站。开发者可以通过研究和修改这套模板,快速搭建起符合现代移动标准的网页项目。
qw_6918966011
- 粉丝: 27
- 资源: 6165
最新资源
- Golang_Puzzlers-春节主题资源
- 创创猫java单商户商城-品牌自营如三只松鼠-c/c++源码资源
- llvm-ocaml-doc-3.4.2-8.el7.x64-86.rpm.tar.gz
- 活动发布管理-活动资源
- llvm-private-7.0.1-1.el7.x64-86.rpm.tar.gz
- llvm-private-devel-7.0.1-1.el7.x64-86.rpm.tar.gz
- awesome-Geosciences-机器学习开发资源
- Simulation-matlab仿真资源
- llvm-static-3.4.2-8.el7.x64-86.rpm.tar.gz
- oops-game-kit-cocos资源
- HeartRateSPO2-硬件开发资源
- lm-sensors-3.4.0-8.20160601gitf9185e5.el7-9.1.x64-86.rpm.tar.gz
- Command on Scratch-scratch资源
- arlog-golang资源
- Golang_Puzzlers-春节主题资源
- lm-sensors-devel-3.4.0-8.20160601gitf9185e5.el7-9.1.x64-86.rpm.tar.gz