記錄使用Spring MVC建立一個網站
时间：2023-06-24 02:30:02 | 来源：网站运营
时间：2023-06-24 02:30:02 来源：网站运营
記錄使用Spring MVC建立一個網站：內容都是自己課餘的愛好操作,如有冒犯,請聯繫本人微信13532992587進行刪除,謝謝各位看官......
使用工具:eclispe4.3
service:Tomcat v7.0
JDK:7.0
使用的JAR包(不是很多)
配置文件三個內容如下:
web.xml
<?xml version="1.0" encoding="UTF-8"?>
http://www.w3.org/2001/XMLSchema-instance" xmlns="Java EE: XML Schemas for Java EE Deployment Descriptors" xsi:schemaLocation="Java EE: XML Schemas for Java EE Deployment Descriptors
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>HibernateDemo1</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<!-- 使用SpringMVC load-on-startup代表优先启动-->
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 让Action加载SpringIOC的监听器，默认查询/WEB-INF/applicationContext.xml -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 指定配置文件位置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<!-- <param-value>/WEB-INF/applicationContext-*.xml, classpath*:applicationContext-*.xml</param-value> -->
<param-value>classpath:beans.xml</param-value>
</context-param>
<!-- 使用Spring的编码过滤器解决乱码问题，在Struts2中不在此处配置; forceEncoding表是是否强制转码 -->
<filter>
<filter-name>springEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>springEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 配置Hibernate的Session在VIEW打开后再关闭，Filter有先后顺序，要注意 -->
<filter>
<filter-name>openSessionInView</filter-name>
<filter-class>org.springframework.orm.hibernate4.support.OpenSessionInViewFilter</filter-class>
<init-param>
<param-name>sessionFactoryBeanName</param-name>
<param-value>sessionFactory</param-value>
</init-param>
<init-param>
<param-name>singleSession</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>flushMode</param-name>
<param-value>AUTO</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>openSessionInView</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
-->
</web-app>
beans.xml
<?xml version="1.0" encoding="UTF-8"?>
Index of /schema/beans"
xmlns:xsi="
http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="Index of /schema/context"
xmlns:aop="Index of /schema/aop"
xmlns:tx="Index of /schema/tx"
xsi:schemaLocation="Index of /schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsdIndex of /schema/context
http://www.springframework.org/schema/context/spring-context.xsdIndex of /schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsdIndex of /schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!-- 使用Spring的Annotation的配置 -->
<context:annotation-config/>
<!-- 除了Controller，Bean全部自动到包里面找 -->
<context:component-scan base-package="tenda.exam">
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 开启占位符来配置Properties文件的值 -->
<bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="locations">
<value>classpath:jdbc.properties</value>
</property>
</bean>
<!-- 使用Proxool来配置JDBC -->
<bean id="proxoolDataSource" class="org.logicalcobwebs.proxool.ProxoolDataSource">
<property name="alias"><value>Oracle</value></property>
<property name="driver"><value>${driverClassName}</value></property>
<property name="driverUrl"><value>${url}</value></property>
<property name="user"><value>${username}</value></property>
<property name="password"><value>${password}</value></property>
<!-- 最杭州接数（默认5个）,超过了这个连接数,再有请求时,就排在队列中等候 -->
<property name="maximumConnectionCount"><value>20</value></property>
<!-- 最小连接数（默认2个）-->
<property name="minimumConnectionCount"><value>3</value></property>
<!-- 最少保持的空闲连接数（默认2个） -->
<property name="prototypeCount"><value>3</value></property>
<!-- 是否记录数据库的每一步操作 -->
<property name="trace"><value>true</value></property>
<!-- 是否同时记录多个STUFF，会产生多个日志 -->
<property name="verbose"><value>true</value></property>
<!-- 保持数据库连接所使用的SQL语句 -->
<property name="houseKeepingTestSql"><value>select sysdate from dual</value></property>
<!-- 在使用之前测试 -->
<property name="testBeforeUse"><value>true</value></property>
<property name="testAfterUse"><value>true</value></property>
</bean>
<!-- Hibernate4 Annotation配置，XML配置在文档中有 -->
<bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
<property name="dataSource" ref="proxoolDataSource"/>
<!-- 直接扫描这个包里面的Entity类，建议使用 -->
<property name="packagesToScan">
<list>
<value>tenda.exam.entity</value>
</list>
</property>
<!-- Hibernate配置中的各种属性，具体请查询HinbernateDOC文档 -->
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">${hibernateDialect}</prop>
<prop key="hibernate.show_sql">${hibernateShowSQL}</prop>
<!-- 是否使用CGLIB动态代理对象（小而快，推荐，需要CGLIB包，建议配合Proxool使用） -->
<prop key="hibernate.bytecode.use_reflection_optimizer">true</prop>
<!-- 指定Hibernate在何时释放JDBC连接 -->
<prop key="hibernate.connection.release_mode">auto</prop>
</props>
</property>
</bean>
<!-- 自动Hibernate事务处理，自动Rollback，自动TryCatch -->
<bean id="txManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager">
<!-- 把SessionFactory注给Tx -->
<property name="sessionFactory" ref="sessionFactory" />
</bean>
<!-- 配置事务管理 -->
<tx:annotation-driven transaction-manager="txManager"/>
<!-- 配置Transcation 自动处理，属于切面编程 -->
<tx:advice id="txAdvice" transaction-manager="txManager">
<tx:attributes>
<tx:method name="exist*" read-only="true"/>
<tx:method name="get*" read-only="true"/>
<tx:method name="add*" propagation="REQUIRED"/>
</tx:attributes>
</tx:advice>
<aop:config expose-proxy="true">
<!-- 只对业务逻辑层实施事务 -->
<aop:pointcut id="txPointcut" expression="execution(* tenda.exam.service..*.*(..))" />
<!-- Advisor定义，切入点和通知分别为txPointcut、txAdvice -->
<aop:advisor pointcut-ref="txPointcut" advice-ref="txAdvice"/>
</aop:config>
</beans>
spring-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
Index of /schema/beans"
xmlns:mvc="Index of /schema/mvc" xmlns:xsi="
http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="Index of /schema/context"
xsi:schemaLocation="
Index of /schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsdIndex of /schema/context
http://www.springframework.org/schema/context/spring-context.xsdIndex of /schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 使用注解来配置Spring MVC -->
<mvc:annotation-driven />
<!-- 扫描目录中的Controller -->
<context:component-scan base-package="tenda.exam.control" />
<!-- 静态资源访问，防止图片等文件被拦截 ,若使用.do的Controller，则不必考虑 -->
<mvc:resources location="/image/" mapping="/image/**"></mvc:resources>
<mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
<mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
<mvc:resources location="/css/" mapping="/css/**"></mvc:resources>
<mvc:resources location="/theme/" mapping="/theme/**"></mvc:resources>
<mvc:resources location="/back/" mapping="/back/**"></mvc:resources>
<mvc:resources location="/" mapping="/*.html"></mvc:resources>
<!-- Spring MVC视图分解器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/"></property>
<property name="suffix" value=".html"></property>
</bean>
<!-- 使用Jackson2处理JSON数据转换的 -->
<!-- 为了处理返回的JSON数据的编码，默认是ISO-88859-1的，这里把它设置为UTF-8,解决有乱码的情况 -->
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</beans>
文件的位置如上圖
前台显示页面
style.css
.title {
height: 50px;
line-height: 50px;
}
._menu{
background: #222;
}
a {
font-size: 16px;
color: #000;
text-decoration: none;
}
.act {
padding-bottom: 4em;
padding-top: 3em;
}
.act h3 {
background: url(../images/cc.png) no-repeat center bottom;
height: 60px;
line-height: 60px;
margin: 0;
}
* a:hover {
color: #ff6d15;
text-decoration: none;
}
* {
transition: all 1s;
-webkit-transition: all 1s;
/* Safari */
}
.imgs:hover img {
padding: 10px;
overflow: hidden;
}
@-webkit-keyframes bounce-up {
25% {
-webkit-transform: translateY(3px);
}
50%,
100% {
-webkit-transform: translateY(0);
}
75% {
-webkit-transform: translateY(-3px);
}
}
@keyframes bounce-up {
25% {
transform: translateY(3px);
}
50%,
100% {
transform: translateY(0);
}
75% {
transform: translateY(-3px);
}
}
.animate-bounce-up {
-webkit-animation: bounce-up 1s linear infinite;
animation: bounce-up 1s linear infinite;
-webkit-animation: bounce-up 1s linear infinite;
animation: bounce-up 1s linear infinite;
margin: 15px 0 15px 15px;
width: 22px;
height: 20px;
background: url(../images/phone.png) no-repeat;
float: left;
}
.name {
position: absolute;
top: 10px;
left: 15%;
color: #fff;
font-size: 20px;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
.name {
position: absolute;
top: 10px;
left: 20%;
color: #fff;
font-size: 20px;
}
}
.last {
background: #fff;
margin: 3.0em 0.8em;
padding: 2.0em 0em;
}
.last:hover {
background: #dfdfdf;
}
.last:hover img {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Safari and Chrome */
}
.last a:hover {
color: #000;
}
.last a span:hover {
color: #ff6d15;
}
.footer {
border-top: solid 2px #f60;
background: #3f3b39;
color: #fff;
}
.footer a {
color: #fff;
}
.footer a:hover {
color: #ff6d15;
text-decoration: none;
}
.footer dl {
margin: 2.0em 0.0em;
}
.footer dl dt {
margin: 1.0em 0.0em;
}
.footer dl dd {
margin: 0.5em 0.0em;
}
.footer dl dd a {
font-size: 13px;
}
.finally {
border-top: 1px solid #333;
padding: 20px;
background: #3f3b39;
color: #FFFFFF;
}
.list_tab{
background: #f5f5f5;padding-top:1.0em;
}
.liast_tab_top{
background: #fff; padding: 0.5em;
}
.liast_tab_bot{
background: #e2e2e2;padding: 0.5em;
}
.black{
color: #fff;
}
.black_bg{
background: #fff;
}
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--联系我们-->
<div style="background: #f5f5f5; padding-top: 10px;">
<div class="container black_bg" >
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">可以通过下面的方式找到我哦</h2>
<ul class="list-unstyled">
<li>
<h3>联系邮箱</h3></li>
<li>1023124926@qq.com</li>
<li>商务合作、产品咨询、技术支持、建议、投诉、购买帮助等。</li>
</ul>
<ul class="list-unstyled">
<li>
<h3>VIP热线：</h3></li>
<li>13532992587 （服务时间：周一至周五 8:00~17:00）</li>
</ul>
<ul class="list-unstyled">
<li>
<h3>微信客服：</h3></li>
<li>
<img /> <sapn style="color:red;">這裡可以放你的二維碼</sapn>
</li>
<li>打开微信扫一扫，直接添加客服进行咨询</li>
</ul>
<ul class="list-unstyled ">
<li>
<h3>办公地址：</h3></li>
<li>[杭州*福永]具体地址:广东省杭州市福永镇福安工业区</li>
<li class="hidden-xs "><img /><sapn style="color:red;">這裡可以放你的地圖</sapn></li>
<li class="hidden-lg "><img " style="width: 100%; " /></li>
</ul>
<ul class="list-unstyled ">
<li>
<h3>意见反馈：</h3></li>
<li>
<a href="# ">在线给我们留言</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
job.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="/Tenda/css/bootstrap.min.css">
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--招聘信息-->
<div class="list_tab" >
<div class="container">
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top" >
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">后台开发</a></h4>
<p>任职要求：一年经验
</p>
<p>简历投递邮箱：229661797@qq.com</p>
</div>
<div class="liast_tab_bot" >
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
</div>
<!--上一页下一页-->
<nav class="text-center">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</nav>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--新闻资讯-->
<div>
<img src="/Tenda/images/bac.jpg" style="width: 100%;" />
</div>
<div style=" color: #fff;">
<div class="container">
<div class="" style="margin: 0;">
<a class="btn btn-default active" href="#" style="margin:10px 50px;">公司新闻</a>
<a class="btn btn-default" href="#">行业动态</a>
</div>
</div>
</div>
<div class="list_tab">
<div class="container">
<div class="col-lg-6 col-sm-6 col-xs-12" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-6" style="margin-bottom: 1.5em;">
<div class="liast_tab_top">
<h4><a href="#">杭州XXXXX有限公司官网强势来袭</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本着以人为本， 科技创新的企业文化和严谨求实的工作方法；齐心协力的团队作风；朝气蓬勃的精神面貌；敏锐执着的进取 心态；公正平等的工作环境，守信厚德的经营思想。
</p>
</div>
<div class="liast_tab_bot">
<span class="glyphicon glyphicon-folder-open"></span> 2016-12-30
</div>
</div>
</div>
<!--上一页下一页-->
<nav class="text-center">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</nav>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--关于我们-->
<div>
<img src="/Tenda/images/bac.jpg" style="width: 100%;"/>
</div>
<div style="background: #f2f2f2; padding-top: 1.0em;">
<div class="container">
<p>
<span style="font-size: 20px; font-weight: bold;">杭州XXXXX有限公司</span> 是一家专业研发、设计、生产和销售全系 列自动IC烧录机与非标自动化设备以及IC代工烧录的高科技企业。公司拥有专业的管理、技术人员，规模的生产车间。
</p>
<p>
我们的经营理念是“诚信承诺、品质保证、快速响应、用心服务”。
</p>
<p>
我们的服务宗旨是“你只管用，其他的交给我们”。
</p>
<p>
坚持以市场为导向，不断地为客户提供各种热压设备及配套的生产方案。为客户降低成本及提高生产效率是我们不懈的追求!
</p>
<p>
技术团队
</p>
<p>
拥有一支经验丰富的研发、生产技术团队，占公司总人数的70%。不断为客户提供各种技术支持和配套的生产方案。
</p>
<p>企业文化</p>
<p>经营理念</p>
<p>诚信承诺：承诺诚信经营，保证安全、有效的产品和即定交期，重合同、守信用。</p>
<p>品质保证：注重品质，苛求细节，为客户提供质量至优、品质精良的产品。</p>
<p>快速响应：在最短的时间内响应客户的需求；在保证质量的基础上，为客户节约资源、降低成本。</p>
<p>用心服务：24小时售后服务热线为您解忧，最短的时间内为您上门服务。</p>
<p>服务宗旨：<span style="color: #ff6d15;">你只管用，其他的交给我们。</span></p>
<p>主营业务</p>
<p style="color: #ff6d15;">编带机、烧录机</p>
<p style="color: #ff6d15;">产品展示、应用</p>
<p style="color: #ff6d15;">优质售后</p>
<p>24小时服务热线，最短时间内现场维护，设备保修期内定期售后回访。上门服务人员要求：为自己养
成一个好习惯，给客户 留一个好印象。要求佩戴工牌，自带工具箱，主动配合客户，尽可能满足客户的每一个合理要求。
</p>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
products.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img /><!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--产品选择-->
<style>
.active {
color: #f60;
}
.cata .col-xs-3,
.cata .col-xs-4,
.cata .col-xs-2 {
padding: 0;
}
</style>
<div class="container text-center" style="line-height: 40px;">
<div class="row cata">
<div class="col-lg-2 col-xs-4 col-sm-2 text-left">
<h4>产品目录:</h4>
</div>
<div class="col-m-1 hidden-xs col-sm-1">
<a href="#" class="active">全部</a>
</div>
<div class="col-lg-1 col-xs-2 col-sm-2">
<a href="#">烧录机</a>
</div>
<div class="col-lg-1 col-xs-3 col-sm-2">
<a href="#"> IC编带机</a>
</div>
<div class="col-lg-1 col-xs-3 col-sm-2">
<a href="#">辅料系列</a>
</div>
</div>
</div>
<div style="background: #f2f2f2; padding-top: 1.0em;">
<style>
@media screen and (min-width: 768px) and (max-width:2000px) {
.pro .col-lg-3 {
margin-bottom: 10px;
margin-right: 10px;
width: 23%;
}
}
@media screen and (min-width: 300px) and (max-width:768px) {
.pro .col-xs-12 {
margin-bottom: 10px;
}
}
</style>
<div class="container">
<div class="row pro">
<div class="col-lg-3 col-xs-12 " style="background: #fff; ">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="" style="padding: 1em 0.0em;">
<h4>H110A</h4>
<p>半自动烧录机台，主要是为工厂，设计公司烧录IC 所设计。</p>
</div>
</div>
<div class="col-lg-3 col-xs-12 " style="background: #fff; ">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="" style="padding: 1em 0.0em;">
<h4>H110A</h4>
<p>半自动烧录机台，主要是为工厂，设计公司烧录IC 所设计。</p>
</div>
</div>
<div class="col-lg-3 col-xs-12" style="background: #fff; ">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="" style="padding: 1em 0.0em;">
<h4>H110A</h4>
<p>半自动烧录机台，主要是为工厂，设计公司烧录IC 所设计。</p>
</div>
</div>
<div class="col-lg-3 col-xs-12 " style="background: #fff;">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="" style="padding: 1em 0.0em;">
<h4>H110A</h4>
<p>半自动烧录机台，主要是为工厂，设计公司烧录IC 所设计。</p>
</div>
</div>
<div class="col-lg-3 col-xs-12 " style="background: #fff;">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="" style="padding: 1em 0.0em;">
<h4>H110A</h4>
<p>半自动烧录机台，主要是为工厂，设计公司烧录IC 所设计。</p>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/Tenda/css/style.css">
<title>JimmyJJ</title>
<link rel="icon" href="favicon.ico" type="/Tenda/images/x-icon" /> <!-- 这里可以放置你在标签上面显示的icon -->
<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
<!--[if lt IE 9]>
<![endif]-->
<script src="/Tenda/js/jquery-1.12.1.min.js"></script>
<script src="/Tenda/js/bootstrap.min.js"></script>
</head>
<body>
<!--logo-->
<div class="name hidden-sm">
<a href="/Tenda/html/index.html">
<img /> <!-- 這裡自己添加logo -->
</a>
</div>
<div class="_menu">
<div class="container">
<div class="row">
<div class=" navbar-inverse">
<div class="navbar-header navbar-left">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".a">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#">
<img style="display:inline-block; width:50px;padding-top:5px;" /> <!-- 這裡自己添加logo -->
</a>
</div>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!--手機端菜單欄獨立出來-->
<div class="collapse navbar-collapse a navbar-right">
<ul class="nav navbar-nav">
<li>
<a style="color: #cecece;" href="/Tenda/html/index.html">首页</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/about.html">关于我们</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">产品中心</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/news.html">新闻资讯</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/job.html">人才招聘</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/contact.html">联系我们</a>
</li>
<li class="hidden-xs">
<div class="animate-bounce-up"></div><em style="line-height: 50px; color: red;">135-3299-2587</em>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--滾動區-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="aa">
<a href="#">
<img class="img-responsive" src="/Tenda/images/11.png" alt="..." />
</a>
</div>
<div class="item" id="aa">
<a href="#">
<img class="img-responsive" src="/Tenda/images/22.jpg" alt="..." />
</a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--产品中心-->
<div class="container act">
<div class=" text-center">
<h3>产品中心</h3>
<div class="title hidden-xs">
<a href="#">烧录机</a><span> | </span>
<a href="#">IC编带机</a><span> | </span>
<a href="#">辅料系列</a>
</div>
</div>
<div>
<div class="col-lg-3 col-xs-6 col-sm-3">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img1.jpg" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em 0.0em;">
<a href="#">H-911M 詳情</a>
<a href="#">參數</a>
</div>
</div>
<div class="col-lg-3 col-xs-6 col-sm-3">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img2.jpg" style="width: 100%; " />
</a>
</div>
<div class="text-center" style="padding: 1em 0.0em;">
<a href="#">H-772A 詳情</a>
<a href="#">參數</a>
</div>
</div>
<div class="col-lg-3 col-xs-6 col-sm-3">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img3.jpg" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em 0.0em;">
<a href="#">H110A 詳情</a>
<a href="#">參數</a>
</div>
</div>
<div class="col-lg-3 col-xs-6 col-sm-3">
<div class="imgs" style="border-bottom: 1px solid #dfdfdf;">
<a href="#">
<img src="/Tenda/images/img4.jpg" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em 0.0em;">
<a href="#">H-522M 詳情</a>
<a href="#">參數</a>
</div>
</div>
</div>
</div>
<!--公司简介-->
<div style="background: #f2f2f2;">
<div class="container act">
<div class=" text-center">
<h3>公司简介</h3>
</div>
<div style="margin-top: 1.2em;">
<div class="col-lg-12 col-sm-12">
<div style="padding: 1em; ">
<p>杭州XXXX有限公司是一家专业研发、 设计、生产和销售全系列自动IC烧录机与非标自动化设备以及IC代工烧录的高科技企业。公司拥有专业的管理、技术人员，规模的生产车间。 我们的经营 理念是“诚信承诺、品质保证、快速响应、用心服务”。 我们的服务宗旨是“你只管用，其他的交给我们”。 坚持以市场为导向，不断地为客户提供各种热 压设备及配套的生产方案。为客户降低成本及提高生产效率是我们不懈的追求!
</p>
</div>
</div>
</div>
</div>
</div>
<!--走進騰達-->
<div class="container act">
<div class=" text-center">
<h3>走进我們</h3>
<div class="title hidden-xs">
<a href="#">最新新闻</a><span> | </span>
<a href="#">最热新闻</a><span> | </span>
<a href="#">行业动态</a>
</div>
</div>
<div style="margin-top: 1.2em;">
<div class="col-lg-4 col-sm-6">
<div>
<a href="#">
<img src="/Tenda/images/img5.jpg" class="img-circle" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em; background: #fff;">
<a href="#">杭州XXXX有限公司官网强势来袭</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div>
<a href="#">
<img src="/Tenda/images/img5.jpg" class="img-circle" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em; background: #fff;">
<a href="#">电子元器件：IC烧录器发展趋势</a>
</div>
</div>
<div class="col-lg-4 col-sm-6 ">
<div>
<a href="#">
<img src="/Tenda/images/img5.jpg" class="img-circle" style="width: 100%;" />
</a>
</div>
<div class="text-center" style="padding: 1em; background: #fff;">
<a href="#">IC烧录概述，IC烧录发展方向</a>
</div>
</div>
</div>
</div>
<!--常見問題,下載中心,售後網點,企業介紹,聯繫我們-->
<div style="background: #f2f2f2;">
<div class="container text-center">
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>常見問題</h4>
<img src="/Tenda/images/hp1.png" style="width: 50%;" />
<div>产品指南和问题解决方案，帮助客户熟悉产品和自助解决问题</div>
<h6>查看详情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>下载中心</h4>
<img src="/Tenda/images/hp2.png" style="width: 50%;" />
<div>XXXX产品文档管理软件及产品说明书等各类下载汇总</div>
<h6>查看详情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>售后网点</h4>
<img src="/Tenda/images/hp3.png" style="width: 50%;" />
<div>售后服务网点,提供各省市的维修点、地址、电话等信息</div>
<h6>查看详情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>企业介绍</h4>
<img src="/Tenda/images/hp4.png" style="width: 50%;" />
<div>全方位服务跟踪客户需求，坚持做出高品质设备。</div>
<h6>查看详情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2 ">
<a href="#">
<h4>联系我们</h4>
<img src="/Tenda/images/hp5.png" style="width: 50%;" />
<div>24小时服务热线为您解忧，最短的时间内为您上门服务。</div>
<h6>查看详情 >></h6>
</a>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="row text-center hidden-xs">
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>服务支持</h4>
</dt>
<dd>
<a href="#">下载中心</a>
</dd>
<dd>
<a href="#">帮助文档</a>
</dd>
<dd>
<a href="#">视频中心</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>售后服务</h4>
</dt>
<dd>
<a href="#">保修政策</a>
</dd>
<dd>
<a href="#">售后网点</a>
</dd>
<dd>
<a href="#">产品退市说明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">联系方式</a>
</dd>
<dd>
<a href="#">企业动态</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>工作机会</h4>
</dt>
<dd>
<a href="#">社会招聘</a>
</dd>
<dd>
<a href="#">校园招聘</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>官方商城</h4>
</dt>
<dd>
<a href="#">天猫旗舰店</a>
</dd>
<dd>
<a href="#">京东旗舰店</a>
</dd>
<dd>
<a href="#">苏宁旗舰店</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>关注我們</h4>
</dt>
<dd>
<a href="#">我們官方微博</a>
</dd>
<dd>
<a href="#">我們官方微信</a>
</dd>
<dd>
<a href="#">我們官方Q群</a>
</dd>
</dl>
</div>
</div>
<div class="finally">
<div class="container text-center" style="">
<a href="" target="_blank" class="black">使用条款</a>
<a href="" target="_blank" class="black">隐私保护</a> <br class="visible-xs"> 杭州市XXXX有限公司 ©
<span id="toyear" class="black">2016</span> 粤ICP备00007007号
</div>
</div>
</div>
</body>
</html>
图片怎么发出来呢?????目前还没有涉及到后台...
在线咨询
