纯HTML仿写的网站

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- slide -->
    <script type="text/javascript" src="js/jquery-1.11.1.min_044d0927.js"></script>
    <script type="text/javascript" src="js/jquery.bxslider_e88acd1b.js"></script>
    <!-- 课程轮播 -->
    <script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>
    <!-- 师资团队轮播 -->
    <script src="js/jquery.foucs.js" type="text/javascript"></script>

</head>

<body>
    <!-- header -->
    <div id="header">
        <div class="header clearFloat">
            <div class="logo">
				<h1 style="font-size: 24px;line-height: 2.6;color: #fff;">广西地球记忆博物馆</h1>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="index.html" class="a">首页</a>
                    </li>
                    <li><a href="news.html ">新闻资讯</a>
                    </li>
                    <li><a href="project.html">馆藏品介绍</a>
                    </li>
                    <li><a href="class.html">解说团队</a>
                    </li>
                    <li><a href="teacher.html">师资力量</a>
                    </li>
                    <li><a href="registration.html">我要报名</a>
                    </li>
                    <li><a href="about.html">关于我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- header end-->
    <!-- slide -->
    <div id="slide">
        <div class="slide_top">
            <h1>
            <img src="images/h1wz.gif">
    		</h1>
        </div>
        <div class="top_slide_wrap">
            <ul class="slide_box bxslider">
                <li>
                    <a href="#"><img src="images/01_d56c756b.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/02_fea8ef37.jpg" alt="" title="城市预测">
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/03_475be110.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/04_4ce683b9.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/05_340d9fb4.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="op_btns clearFloat">
                <a href="#" class="op_btn op_prev"><span></span></a>
                <a href="#" class="op_btn op_next"><span></span></a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    (function() {
        $(".bxslider").bxSlider({
            auto: true,
            prevSelector: $(".top_slide_wrap .op_prev")[0],
            nextSelector: $(".top_slide_wrap .op_next")[0]
        });
    })();
    </script>
    <!-- slide end -->
    <div id="content">
        <div class="content">
            <div class="content_index">
                <div class="index_about clearFloat">
                    <div class="index_left">
                        <div class="index_left_h3">
                            <h3>关于地球记忆博物馆 About DQJY
							    <span><a href=""><img src="images/bai.png"></a></span>
							</h3>
                            <a href="about.html"><img src="images/feng.jpg">
                            </a>
                        </div>
                        <div class="index_left_p clearFloat">
                            <h1>
                                <a href="about.html">嘉特简介 CYTA Gate Brief Introduction</a><br>
                                <span>CYTA Gate Internation Youth Artist Program</span>
							</h1>
                            <h3>嘉特国际青年艺术人才名孵化器</h3>
                            <div class="index_left_p2">
                            <p>嘉特青年艺术人才孵化器是中国艺术人才培养计划的子项目之一,针对大学生开展的定向职业培训及辅导,帮助青年学生实现就业与创业。嘉特的课程倡导培养应用 型人才,让学生在课程中能获得最及时的行业资讯、更专业的行业知识、最权威的专业指……</p>	
                            </div>
                            
                            <a href="about.html" class="more"><i>更多</i></a>
                        </div>
                    </div>
                    <div class="index_right">
                        <div class="index_right_video">
                            <embed src="http://player.youku.com/player.php/sid/XODM4MTgzMzY0/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
                        </div>
                        <div class="index_left_p index_right_p clearFloat ">
                            <h1><a href="video.html">介绍视频 CYTA Gate Video</a><br>
								<span>CYTA Gate Internation Youth Artist Program</span>
							</h1>
                            <h3>嘉特国际青年艺术人才名孵化器</h3>
                            <div class="index_right_ul">
                            <ul>
                                <li><a href="about.html">地球记忆开馆啦</a><span>播放:23次</span>
                                </li>
                                <li><a href="about.html">地球记忆介绍</a><span>播放:23次</span>
                                </li>
                            </ul>
                            </div>
                            <a href="about.html" class="more"><i>更多</i></a>
                        </div>
                    </div>
                </div>
                <div class="index_about clearFloat">
					<div class="index_left  index_projecte">
                        <div class="index_left_h3">
                            <h3>馆区介绍 Projects
								<span><a href="project.html"><img src="images/bai.png"></a></span>
							</h3>
                            <a href="project.html"><img src="images/project.jpg">
                            </a>
                        </div>
                        <div class="index_left_p clearFloat">
                            <h1><a href="project.html">星语星愿 Audiences</a><br>
								<span>CYTA Gate Internation Youth Artist Program</span>
							</h1>
                            <h3>星座介绍专区</h3>
                            <div class="index_right_ul">
                            </div>
                            <a href="project.html" class="more"><i>更多</i></a>
                        </div>
                    </div>
                    <div class="index_left  index_projecte index_projecte2">
                        <div class="index_left_h3">
                            <h3>
							</h3>
                            <a href="project.html"><img src="images/project2.jpg">
                            </a>
                        </div>
                        <div class="index_left_p clearFloat">
                            <h1><a href="project.html">南丹陨石介绍 Module Structure</a><br>
								<span>CYTA Gate Internation Youth Artist Program</span>
							</h1>
                            <h3>南丹陨石</h3>
                            <div class="index_left_p2">
                            <p>河池地区《庆远府志》记载:“(明朝)正德丙子(1516年)夏五月夜,西北有星陨,长六丈,蜿蜒如龙蛇,闪烁如电,须叟而灭”。。</p>
                            </div>
                            
                            <a href="project.html" class="more"><i>更多</i></a>
                        </div>
                    </div>
                    <div class="index_left  index_projecte index_projecte3">
                        <div class="index_left_h3">
                            <h3>
							</h3>
                            <a href="project.html"><img src="images/project3.jpg">
                            </a>
                        </div>
                        <div class="index_left_p clearFloat">
                            <h1><a href="project.html">月球陨石 YQ Funds</a><br>
								<span>CYTA Gate Internation Youth Artist Program</span>
							</h1>
                            <h3>月球陨石</h3>
                            <div class="index_left_p2">
                            <p>月球陨石是遭受小行星撞击从月球飞溅出来并陨落到地球上的岩石,是研究月球物质成分和演化历史的重要对象。……</p>
                            </div>                            
                            <a href="project.html" class="more"><i>更多</i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content2">
        	<div class="index_about clearFloat">
        	    <div class="index_class">
        	    	<h1>Courses 藏品介绍</h1>
        	    </div>
				<div class="friend">
				    <div class="mr_frbox">
				        <img class="mr_frBtnL prev" src="images/mfrl.gif" />
				        <div class="mr_frUl" >
				            <ul id="mr_fu">
				                <li>
				                    <a href="class.html">
				                        <img src="images/i.jpg" />
				                    </a>
				                    <div class="mr_zhe">
				                        <div class="mr_zhe_i">
				                           <h1>I</h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>家居软装设计概念</span>Introduction soft home design</h3>
				                           </div>
				                        </div>
				                        <div class="mr_zhe_hover" >
				                            <h1><img src="images/plus.gif"></h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>家居软装设计概念</span>Introduction soft home design</h3>
				                           </div>
				                        </div> 
				                    </div>
				                </li>
				                <li>
				                    <a href="class.html">
				                        <img src="images/i2.jpg" />
				                    </a>
				                    <div class="mr_zhe">
				                        <div class="mr_zhe_i">
				                           <h1>A</h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>软装空间照明设计</span>Soft loading lighting design</h3>
				                           </div>
				                        </div>
				                        <div class="mr_zhe_hover" >
				                            <h1><img src="images/plus.gif"></h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>软装空间照明设计</span>Soft loading lighting design</h3>
				                           </div>
				                        </div> 
				                    </div>
				                </li>
				                <li>
				                    <a href="class.html">
				                        <img src="images/i3.jpg" />
				                    </a>
				                    <div class="mr_zhe">
				                        <div class="mr_zhe_i">
				                           <h1>S</h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>软装风格精讲</span>Soft-mounted style succinctly</h3>
				                           </div>
				                        </div>
				                        <div class="mr_zhe_hover" >
				                            <h1><img src="images/plus.gif"></h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>软装风格精讲</span>Soft-mounted style succinctly</h3>
				                           </div>
				                        </div> 
				                    </div>
				                </li>
				                <li>
				                    <a href="class.html">
				                        <img src="images/i4.jpg" />
				                    </a>
				                    <div class="mr_zhe">
				                        <div class="mr_zhe_i">
				                           <h1>E</h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>室内空间的情感设计</span>Emotional Design interior space</h3>
				                           </div>
				                        </div>
				                        <div class="mr_zhe_hover" >
				                            <h1><img src="images/plus.gif"></h1> 
				                           <div class="mr_zhe_p">
				                               <h3><span>室内空间的情感设计</span>Emotional Design interior space</h3>
				                           </div>
				                        </div> 
				                    </div>
				                </li>
				            </ul>
				        </div>
				        <img class="mr_frBtnR next" src="images/mfrr.gif" />
				    </div>
				</div>
				<script type="text/javascript">
				$(".mr_frbox").slide({
				titCell: "",
				mainCell: ".mr_frUl ul",
				autoPage: true,
				effect: "leftLoop",
				autoPlay: true,
				vis: 4
				});
				</script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
                        $("li").mouseout(function (e) {
                            if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
                                $(this).find('.mr_zhe_i').show();
                                $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '300px' }, { queue: false, duration: 190 });
                                return false;
                            }

                        });
                        $('.mr_zhe').mouseover(function (event) {
                            $(this).find('.mr_zhe_i').hide();
                            $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
                            return false;
                        });
                      
                    });
                </script>
        	</div>
        </div>
        <div class="content2">
    	    <div class="index_about clearFloat">
        	    <div class="index_class index_teacher">
        	    	<h1>TEACHING TEAM 师资团队</h1>
        	    </div>
			    <!-- 代码 开始 -->
			    <div id="main">
			        <div id="index_b_hero">
			            <div class="hero-wrap">
			                <ul class="heros clearfix">
			                    <li class="hero">
			                        <a href="teacher.html">
			                            <img src="images/teacher.jpg" class="thumb"  />
			                        </a>
			                    </li>
			                    <li class="hero">
			                        <a href="teacher.html" >
			                            <img src="images/teacher1.jpg" class="thumb"/>
			                        </a>
			                    </li>
			                    <li class="hero">
			                        <a href="teacher.html" >
			                            <img src="images/teacher.jpg" class="thumb"/>
			                        </a>
			                    </li>
			                    <li class="hero">
			                        <a href="teacher.html">
			                            <img src="images/teacher1.jpg" class="thumb"/>
			                        </a>
			                    </li>
			                </ul>
			            </div>
			            <div class="helper">
			                <div class="mask-left">
			                </div>
			                <div class="mask-right">
			                </div>
			                <a  class="prev icon-arrow-a-left"></a>
			                <a  class="next icon-arrow-a-right"></a>
			            </div>
			        </div>
			    </div>
			    <script type="text/javascript">
			        $.foucs({ direction: 'right' });
			    </script>
			    <!-- 代码 结束 -->
       	    </div>
        </div>
        <div class="content">
			<div class="index_about clearFloat">
				<div class="index_form clearFloat">
					<div class="index_form_left">
						<form action="">
							<div class="index_form_li">
								<ul>
									<li class="index_form_a"><input type="text" value="姓名 NAME" class="orgin_input"></li>
									<li><input type="text" value="姓别 SEX" class="orgin_input"></li>
									<li><input type="text" value="地区 AREA" class="orgin_input"></li>
									<li><input type="text" value="联系方式 CONTACT" class="orgin_input"></li>
									<li><input type="text" value="电子邮件 E-MAIL" class="orgin_input"></li>
								</ul>
							</div>
						</form>
						
					</div>
					<div class="index_form_right">
						<form action="">
							<div class="index_form_li">
								<ul>
									<li class="index_form_a">
									<textarea class="orgin_input">教育背景 EDUCATION BACKGROUND</textarea >
									</li>
									<li>
									<textarea  class="orgin_input">资询内容 CONSULTATION CONTENT</textarea ></li>
									<li class="index_form_p"><input type="submit"  id="index_submit" value="我要报名 I WANT TO REGISTER">
									</li>
									
								</ul>
							</div>
						</form>
					</div>
					<script type="text/javascript">
						$(function() {
						    $('.orgin_input').bind({
						        focus: function() {
						            if (this.value == this.defaultValue) {
						                this.value = "";
						            }
						        },
						        blur: function() {
						            if (this.value == "") {
						                this.value = this.defaultValue;
						            }
						        }
						    });
						})
					</script>
				</div>
			</div>
        </div>
    </div>
    <!-- footer -->
	<div id="footer">
		<div class="footer">
			<div class="footer_h3 clearFloat">
				<div class="footer_left">
					<h3><img src="images/footerlogo.png" width="72" height="49">
						<span>TEL&nbsp;&nbsp;<span class="footer_phone">0312-5658884</span></span>
						
					</h3>
					
				</div>
				<div class="footer_right">
					<div class="nav">
		                <ul>
		                    <li><a href="index.html" class="a">首页</a>
		                    </li>
		                    <li><a href="about.html">关于我们</a>
		                    </li>
		                    <li><a href="project.html">项目介绍</a>
		                    </li>
		                    <li><a href="class.html">课程介绍</a>
		                    </li>
		                    <li><a href="teacher.html">师资力量</a>
		                    </li>
		                    <li><a href="registration.html">我要报名</a>
		                    </li>
		                </ul>
	               </div>
				</div>
			</div>
			<div class="footer_h3 footer_kuai clearFloat">
			     <div class="foote_domestic clearFloat">
			     	<h3>国内合作企业<span>Domestic cooperative enterpries</span></h3>
			     	<ul>
			     		<li><a href="">ACF设计产业集团</a></li>
			     		<li><a href="">钛马赫别墅家装</a></li>
			     		<li><a href="">博洛马</a></li>
			     		<li><a href="">科宝入住家装</a></li>
			     		<li><a href="">DARA</a></li>
			     		<li><a href="">东易日盛</a></li>
			     		<li><a href="">实装装饰</a></li>
			     		<li><a href="">业之峰装饰</a></li>
			     		<li><a href="">高度国际装饰集团</a></li>
			     	</ul>
			     	<ul>
			     		<li><a href="">山川设计</a></li>
			     		<li><a href="">锦道软装公社</a></li>
			     		<li><a href="">圣菲国际空间设计</a></li>
			     		<li><a href="">SNP</a></li>
			     		<li><a href="">汤物臣肯文创意集团</a></li>
			     		<li><a href="">德易家艺术空间</a></li>
			     		<li><a href="">......</a></li>
			     	</ul>
			     </div>
			     <div class="foote_domestic foote_media clearFloat">
			     	<h3>国外合作品牌<span>Foreign co-brand</span></h3>
			     	<ul>
			     		<li><a href="">Altamoda Italian</a></li>
			     		<li><a href="">Asnaghi Interiors</a></li>
			     		<li><a href="">Savio firmino</a></li>
			     		<li><a href="">Ciacci</a></li>
			     		<li><a href="">Imart</a></li>
			     		<li><a href="">Mantellassi1926</a></li>
			     		<li><a href="">Antologia</a></li>
			     		<li><a href="">Poltrona Frau</a></li>
			     		<li><a href="">Francesco Molon</a></li>
			     	</ul>
			     	<ul class="footer_width">
			     		<li><a href="">Boffi</a></li>
			     		<li><a href="">Rational</a></li>
			     		<li><a href="">Provasi</a></li>
			     		<li><a href="">Ahura</a></li>
			     		<li><a href="">Haro</a></li>
			     		<li><a href="">......</a></li>
			     	</ul>
			     </div>
			     <div class="foote_domestic foote_foeign clearFloat">
			     	<h3>合作媒体<span>Media Partners</span></h3>
			     	<ul class="foote_foeign_ul">
			     		<li><a href="">新浪网</a></li>
			     		<li><a href="">新浪微博</a></li>
			     		<li><a href="">搜狐网</a></li>
			     		<li><a href="">腾讯网</a></li>
			     		<li><a href="">QQ</a></li>
			     		<li><a href="">微信</a></li>
			     		<li><a href="">网易</a></li>
			     		<li><a href="">凤凰网</a></li>
			     		<li><a href="">优酷</a></li>
			     	</ul>
			     	<ul class="foote_foeign_ul foote_foeign_ul3">
			     		<li><a href="">土豆网</a></li>
			     		<li><a href="">爱奇艺</a></li>
			     		<li><a href="">乐视网</a></li>
			     		<li><a href="">北青网</a></li>
			     		<li><a href="">中国教育</a></li>
			     		<li><a href="">第一视频</a></li>
			     		<li><a href="">人民网</a></li>
			     		<li><a href="">光明网</a></li>
			     		<li><a href="">新华网</a></li>
			     	</ul>
			     	<ul class="foote_foeign_ul2 foote_foeign_ul3">
			     		<li><a href="">北京广播电台</a></li>
			     		<li><a href="">北京晚报</a></li>
			     		<li><a href="">北京晨报</a></li>
			     		<li><a href="">北京商报</a></li>
			     		<li><a href="">法制晚报</a></li>
			     		<li><a href="">北京青年报</a></li>
			     		<li><a href="">参考消息</a></li>
			     		<li><a href="">京华时报</a></li>
			     		<li><a href="">新京报</a></li>
			     	</ul>
			     	<ul class="foote_foeign_ul2 foote_foeign_ul4">
			     		<li><a href="">扬子晚报</a></li>
			     		<li><a href="">成都商报</a></li>
			     		<li><a href="">重庆晚报</a></li>
			     		<li><a href="">北京商报</a></li>
			     		<li><a href="">羊城晚报</a></li>
			     		<li><a href="">经济观察报</a></li>
			     		<li><a href="">精品购物指南</a></li>
			     		<li><a href="">......</a></li>
			     	</ul>
			     </div>
			     <div class="foote_domestic foote_media clearFloat">
			     	<h3>欢迎关注<span>Welcome attention</span></h3>
					<a href="" class="foote_welcom"><img src="images/weixin.jpg"></a>
			     </div>
			</div>
			<div class="footer_h3 footer_copyright clearFloat">
				<p>北京奥佳得教育科技有限公司版权所有 | Copyright 2014-2015 All rights reserved | 技术支持:万虎网络 设计支持:弘睿品牌顾问</p>
			</div>
		</div>
	</div>
	<!-- footer end-->
    
</body>

</html>

09-10 102
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值