記錄使用Spring MVC建立一個網(wǎng)站
時間：2023-06-24 02:30:02 | 來源：網(wǎng)站運營
時間：2023-06-24 02:30:02 來源：網(wǎng)站運營
記錄使用Spring MVC建立一個網(wǎng)站：內(nèi)容都是自己課餘的愛好操作,如有冒犯,請聯(lián)繫本人微信13532992587進行刪除,謝謝各位看官......
使用工具:eclispe4.3
service:Tomcat v7.0
JDK:7.0
使用的JAR包(不是很多)
配置文件三個內(nèi)容如下:
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代表優(yōu)先啟動-->
<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的監(jiān)聽器，默認查詢/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表是是否強制轉(zhuǎn)碼 -->
<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打開后再關(guān)閉，F(xiàn)ilter有先后順序，要注意 -->
<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>
<!-- 最杭州接數(shù)（默認5個）,超過了這個連接數(shù),再有請求時,就排在隊列中等候 -->
<property name="maximumConnectionCount"><value>20</value></property>
<!-- 最小連接數(shù)（默認2個）-->
<property name="minimumConnectionCount"><value>3</value></property>
<!-- 最少保持的空閑連接數(shù)（默認2個） -->
<property name="prototypeCount"><value>3</value></property>
<!-- 是否記錄數(shù)據(jù)庫的每一步操作 -->
<property name="trace"><value>true</value></property>
<!-- 是否同時記錄多個STUFF，會產(chǎn)生多個日志 -->
<property name="verbose"><value>true</value></property>
<!-- 保持數(shù)據(jù)庫連接所使用的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動態(tài)代理對象（小而快，推薦，需要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">
<!-- 只對業(yè)務邏輯層實施事務 -->
<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" />
<!-- 靜態(tài)資源訪問，防止圖片等文件被攔截 ,若使用.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數(shù)據(jù)轉(zhuǎn)換的 -->
<!-- 為了處理返回的JSON數(shù)據(jù)的編碼，默認是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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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>
<!--聯(lián)系我們-->
<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>聯(lián)系郵箱</h3></li>
<li>1023124926@qq.com</li>
<li>商務合作、產(chǎn)品咨詢、技術(shù)支持、建議、投訴、購買幫助等。</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>[杭州*福永]具體地址:廣東省杭州市福永鎮(zhèn)福安工業(yè)區(qū)</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">后臺開發(fā)</a></h4>
<p>任職要求：一年經(jīng)驗
</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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="#">行業(yè)動態(tài)</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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有限公司官網(wǎng)強勢來襲</a></h4>
<p>杭州市XXXXXX有限公司成立于2016年，公司本著以人為本， 科技創(chuàng)新的企業(yè)文化和嚴謹求實的工作方法；齊心協(xié)力的團隊作風；朝氣蓬勃的精神面貌；敏銳執(zhí)著的進取 心態(tài)；公正平等的工作環(huán)境，守信厚德的經(jīng)營思想。
</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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>
<!--關(guān)于我們-->
<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> 是一家專業(yè)研發(fā)、設計、生產(chǎn)和銷售全系 列自動IC燒錄機與非標自動化設備以及IC代工燒錄的高科技企業(yè)。公司擁有專業(yè)的管理、技術(shù)人員，規(guī)模的生產(chǎn)車間。
</p>
<p>
我們的經(jīng)營理念是“誠信承諾、品質(zhì)保證、快速響應、用心服務”。
</p>
<p>
我們的服務宗旨是“你只管用，其他的交給我們”。
</p>
<p>
堅持以市場為導向，不斷地為客戶提供各種熱壓設備及配套的生產(chǎn)方案。為客戶降低成本及提高生產(chǎn)效率是我們不懈的追求!
</p>
<p>
技術(shù)團隊
</p>
<p>
擁有一支經(jīng)驗豐富的研發(fā)、生產(chǎn)技術(shù)團隊，占公司總?cè)藬?shù)的70%。不斷為客戶提供各種技術(shù)支持和配套的生產(chǎn)方案。
</p>
<p>企業(yè)文化</p>
<p>經(jīng)營理念</p>
<p>誠信承諾：承諾誠信經(jīng)營，保證安全、有效的產(chǎn)品和即定交期，重合同、守信用。</p>
<p>品質(zhì)保證：注重品質(zhì)，苛求細節(jié)，為客戶提供質(zhì)量至優(yōu)、品質(zhì)精良的產(chǎn)品。</p>
<p>快速響應：在最短的時間內(nèi)響應客戶的需求；在保證質(zhì)量的基礎(chǔ)上，為客戶節(jié)約資源、降低成本。</p>
<p>用心服務：24小時售后服務熱線為您解憂，最短的時間內(nèi)為您上門服務。</p>
<p>服務宗旨：<span style="color: #ff6d15;">你只管用，其他的交給我們。</span></p>
<p>主營業(yè)務</p>
<p style="color: #ff6d15;">編帶機、燒錄機</p>
<p style="color: #ff6d15;">產(chǎn)品展示、應用</p>
<p style="color: #ff6d15;">優(yōu)質(zhì)售后</p>
<p>24小時服務熱線，最短時間內(nèi)現(xiàn)場維護，設備保修期內(nèi)定期售后回訪。上門服務人員要求：為自己養(yǎng)
成一個好習慣，給客戶 留一個好印象。要求佩戴工牌，自帶工具箱，主動配合客戶，盡可能滿足客戶的每一個合理要求。
</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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>
<!--產(chǎn)品選擇-->
<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>產(chǎn)品目錄:</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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收縮的內(nèi)容，即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容器里的內(nèi)容都會隱藏，顯示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">關(guān)于我們</a>
</li>
<li>
<a style="color: #cecece;" href="/Tenda/html/products.html">產(chǎn)品中心</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">聯(lián)系我們</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>
<!--滾動區(qū)-->
<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>
<!--產(chǎn)品中心-->
<div class="container act">
<div class=" text-center">
<h3>產(chǎn)品中心</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="#">參數(shù)</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="#">參數(shù)</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="#">參數(shù)</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="#">參數(shù)</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有限公司是一家專業(yè)研發(fā)、 設計、生產(chǎn)和銷售全系列自動IC燒錄機與非標自動化設備以及IC代工燒錄的高科技企業(yè)。公司擁有專業(yè)的管理、技術(shù)人員，規(guī)模的生產(chǎn)車間。 我們的經(jīng)營 理念是“誠信承諾、品質(zhì)保證、快速響應、用心服務”。 我們的服務宗旨是“你只管用，其他的交給我們”。 堅持以市場為導向，不斷地為客戶提供各種熱 壓設備及配套的生產(chǎn)方案。為客戶降低成本及提高生產(chǎn)效率是我們不懈的追求!
</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="#">行業(yè)動態(tài)</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有限公司官網(wǎng)強勢來襲</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燒錄器發(fā)展趨勢</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燒錄發(fā)展方向</a>
</div>
</div>
</div>
</div>
<!--常見問題,下載中心,售後網(wǎng)點,企業(yè)介紹,聯(lián)繫我們-->
<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>產(chǎn)品指南和問題解決方案，幫助客戶熟悉產(chǎn)品和自助解決問題</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產(chǎn)品文檔管理軟件及產(chǎn)品說明書等各類下載匯總</div>
<h6>查看詳情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>售后網(wǎng)點</h4>
<img src="/Tenda/images/hp3.png" style="width: 50%;" />
<div>售后服務網(wǎng)點,提供各省市的維修點、地址、電話等信息</div>
<h6>查看詳情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2">
<a href="#">
<h4>企業(yè)介紹</h4>
<img src="/Tenda/images/hp4.png" style="width: 50%;" />
<div>全方位服務跟蹤客戶需求，堅持做出高品質(zhì)設備。</div>
<h6>查看詳情 >></h6>
</a>
</div>
<div class="col-lg-2 last col-sm-2 ">
<a href="#">
<h4>聯(lián)系我們</h4>
<img src="/Tenda/images/hp5.png" style="width: 50%;" />
<div>24小時服務熱線為您解憂，最短的時間內(nèi)為您上門服務。</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="#">售后網(wǎng)點</a>
</dd>
<dd>
<a href="#">產(chǎn)品退市說明</a>
</dd>
</dl>
<dl class="col-xs-4 col-sm-2 list-group">
<dt>
<h4>關(guān)于我們</h4>
</dt>
<dd>
<a href="#">公司介紹</a>
</dd>
<dd>
<a href="#">聯(lián)系方式</a>
</dd>
<dd>
<a href="#">企業(yè)動態(tài)</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>關(guān)注我們</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>
圖片怎么發(fā)出來呢?????目前還沒有涉及到后臺...
在線咨詢