网页期末大作业

最新推荐文章于 2024-06-06 11:18:39 发布
最新推荐文章于 2024-06-06 11:18:39 发布
阅读量5.6k 收藏 162
点赞数 30
分类专栏： html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43610614/article/details/111729031
版权

文章目录

声明

网页内容全部来自微信公众号：吃货研究所

界面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

html代码

index

<html>
	<head>
		<meta charset="UTF-8">
		<title>吃货研究所</title>
		<link rel="shortcut icon" href="images/tu1.jpg"/>
		<link href="css/style.css?v=2" rel="stylesheet" type="text/css" media="all">
		<script src="js/time.js"></script>
	</head>
	<body>
		<div class="div_header">
			<div class="logo">
				<img src="images/tu3.jpg" class="xwcms" onmouseover="this.src='images/tu3.jpg'" onmouseout="this.src='images/tu3.jpg'"/>
				<div class="logo-text">吃货研究所</div>
			</div>
			<div class="right-right-div">
				<p id="time1" class="p-right-div-time"></p>

			</div>
		</div>
		<div class="clear">
		</div>
		<nav id="nav" class="nav-wrap">
			<ul class="clearfix">
				<li class="menuactive">
					<a href="index.html">
						首页
					</a>
				</li>
				<li class="menuactive">
					<a href="tclz.html">
						冷知识
					</a>
				</li>
				<li>
					<a href="df.html">
					   地域美食
					</a>
				</li>
			
				<li>
					<a href="zt.html">
					   所长厨房
					</a>
				</li>
				<li id="navEnd">
					<a href="mdl.html">
						所长测评
					</a>
				</li>   
			</ul>                 
		</nav>

		<div class="banner">
			<ul class="banner_pic" id="banner_pic">
				<li class="current"><img class="one" src="images/tu5.jpg"/></li>
				<li class="pic"><img class="one" src="images/tu7.jpg"/></li>
				<li class="pic"><img class="one" src="images/tu8.jpg"/></li>
				<li class="pic"><img class="one" src="images/lb1.jpg"/></li>
				<li class="pic"><img class="one" src="images/lb2.jpg"/></li>
				<li class="pic"><img class="one" src="images/lb3.jpg"/></li>
				<li class="pic"><img class="one" src="images/lb5.jpg"/></li>
			</ul>
			<ol id="button">
				<li class="current"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
			</ol>
		</div>

		<section class="container-content">
			<div class="article-list">
				<div class="item">
					<div class="art-img">
						<img src="images/wen_tu1.jpg" />
					</div>
					<div class="title">
						<a href="tclz.html">糖炒栗子有糖吗？有，但不是为了<br>吃……</a>
					</div>
					<div class="base-info">
						<ul>
							<li>
								发布时间： 2020-02-02 22:22:2
							</li>
						</ul>
					</div>
					<div class="desc">
						紫烂山梨红皱枣，总输易栗十分甜。在日益萧瑟的深秋里，热乎乎的糖炒栗子可称“恩物”。
					</div>
				</div>
				
				<div class="item">
					<div class="art-img">
						<img src="images/wen_tu7.png" />
					</div>
					<div class="title">
						<a href="df.html">没吃过这些豆腐，你就不算真正的<br>了解云南</a>
					</div>
					<div class="base-info">
						<ul>
							<li>
								发布时间： 2020-02-02 22:22:22
							</li>
						</ul>
					</div>
					<div class="desc">
						云南豆腐，是继汽锅鸡、过桥米线、宣威火腿后火出云南的又一产物。
					</div>
				</div>
				
				
				<div class="item">
					<div class="art-img">
						<img src="images/wen_tu5.png" />
					</div>
					<div class="title">
						<a href="zt.html">双11剁完手了吗？进来补个蹄儿吧！<br></a>
					</div>
					<div class="base-info">
						<ul>
							<li>
								发布时间： 2020-02-02 22:22:22
							</li>
						</ul>
					</div>
					<div class="desc">
						双十一过完了，你的手还在吗？不过吃货是不用担心吃土的，因为我的钱都拿去买肉了啊～看我买的猪蹄，它又大又香！
					</div>
				</div>
				
				<div class="item">
					<div class="art-img">
						<img src="images/wen_tu3.jpg" />
					</div>
					<div class="title">
						<a href="mdl.html">麦当劳5G炸鸡好吃吗？刚吃完的我们<br>有话说</a>
					</div>
					<div class="base-info">
						<ul>
							<li>
								发布时间： 2020-02-02 22:22:22
							</li>
						</ul>
					</div>
					<div class="desc">
						前几天麦当劳大力宣传它们的5G炸鸡，于是今天所里赶紧点了份来尝尝！
					</div>
				</div>
			</div>
			
			<div class="right-fun">
				<div class="model">
					<div class="title">站内搜索</div>
					<div class="content">
						    <div class="bar7">
								<form>
									<input type="text" placeholder="请输入关键词" name="">
									<button type="submit"></button>
								</form>
							</div>
					</div>
				</div>
				
				<div class="model">
					<div class="title">快捷菜单</div>
					<div class="menu">
						 <span><a href="http://www.youtiy.com">个人日记</a></span> <span><a href="http://www.youtiy.com">联系我们</a></span> <span><a href="http://www.youtiy.com">关于我们</a></span> <span><a href="http://www.youtiy.com">给我留言</a></span>
					</div>
				</div>
				
				<div class="model recommend">
					<div class="title">热门推荐</div>
					<div class="content">
						<p>
							<a href="http://www.baidu.com">吃不完的橘子不要扔， 拿来煎猪排吧</a>
						</p>
						<p>
							<a href="http://www.baidu.com">哪种做法才是小海鲜的终极终结者？</a>
						</p>
						<p>
							<a href="http://www.baidu.com">冻起来的东北，老好吃了！</a>
						</p>
						<p>
							<a href="http://www.baidu.com">怎样熬一碗温柔时光惊艳味蕾的酸梅汤？</a>
						</p>
					</div>
				</div>
			</div>
		</section>

		<div class="clear">
		</div>	
		
		<footer class="footer">
			<div class="footer_bottom">
				<h2><a href="index.html">@吃货研究所</a></h2>
				<p><a href="tclz.html">冷知识|</a><a href="df.html">地域美食|</a><a href="zt.html">所长厨房|</a><a href="mdl.html">所长测评</a></p>
			</div>
		</footer>
	</body>
</html>

mdl

<html>
<head>
    <meta charset="UTF-8">
    <title>吃货研究所</title>
    <link rel="shortcut icon" href="images/tu1.jpg"/>
    <link href="css/mdl.css?v=2" rel="stylesheet" type="text/css" media="all">
    <script src="js/time.js"></script>
</head>
<body>
<div class="div_header">
    <div class="logo">
        <img src="images/tu3.jpg" class="xwcms" onmouseover="this.src='images/tu3.jpg'" onmouseout="this.src='images/tu3.jpg'"/>
        <div class="logo-text">吃货研究所</div>
    </div>
    <div class="right-right-div">
        <p id="time1" class="p-right-div-time"></p>

    </div>
</div>
<div class="clear">
</div>
<nav id="nav" class="nav-wrap">
    <ul class="clearfix">
        <li class="menuactive">
            <a href="index.html">
                首页
            </a>
        </li>
        <li class="menuactive">
            <a href="tclz.html">
                冷知识
            </a>
        </li>
        <li>
            <a href="df.html">
                地域美食
            </a>
        </li>

        <li>
            <a href="zt.html">
                所长厨房
            </a>
        </li>
        <li id="navEnd">
            <a href="mdl.html">
                所长测评
            </a>
        </li>
    </ul>
</nav>
<div class="div1">
    <div class="article_head">
        <h1 class="article_head_h">双十一剁完手了吗？进来补个蹄儿吧！</h1>
        <p>发布时间： 2020-02-02 22:22:22</p>
        <br>
        <img src="images/wenzhang_tu1.gif" alt="">
    </div>
    <div class="div2">
        <p class="article_P">前几天麦当劳就开始大力宣传它们的5G炸鸡，于是今天所里赶紧点了份来尝尝。为什么没有一出来就马上吃呢？那当然是因为等着我们吃的东西太多了啊（狗头）！</p>
        <img src="images/mdl1.gif" alt="" class="article_img">


        <p class="article_P">除了5G炸鸡（麦麦脆汁鸡），我们干脆斥巨资把新品都试了一下，以下观点仅供参考，毕竟口味这个东西，千人千面。</p>

        <p class="article_P2">麦麦炸鸡桶 ——108元</p>
        <p class="article_P2">椰香伴咖伴沙 ——28元</p>
        <p class="article_P2">莓莓车厘子麦旋风 ——15.5元</p>
        <p class="article_P2">蜜桃派 ——9.5元</p>
        <p class="article_P2">共花费：161元</p>

        <img src="images/mdt2.jpg" alt="" class="article_img">

       <p class="article_P">想一下集齐3个部位的炸鸡，索性就直接要了麦麦炸鸡桶，里边有5块麦麦脆汁鸡（鸡胸2块+琵琶腿2块+上腿排1块）、4块麦辣鸡翅、1份大薯条和3杯中可乐。</p>

       <p class="article_P">桶里自带了麦辣鸡翅，正好可以把新品炸鸡和麦当劳自家的经典炸鸡对比一下。</p>
        <img src="images/mdl3.gif" alt="" class="article_img">

        <p class="article_P">麦麦脆汁鸡一共有3个部位：琵琶腿、上腿排、鸡胸</p>


        <h2 class="article_h">01</h2>
        <h3 class="article_h2">麦麦脆汁鸡VS麦辣鸡翅</h3>
        <h3 class="article_h3">/ 真的很不一样 /</h3>

        <p class="article_P">为什么要叫5G炸鸡呢？麦当劳说因为是用“5大黑科技打造的划时代炸鸡”：<span class="article_span">脆、大、汁、嫩、味</span>。emmm……我们感觉和现在的网络5G差不多，更像是实际的4G。</p>
        <img src="images/mdl4.gif" alt="" class="article_img">


        <p class="article_P">把麦麦脆汁鸡和麦辣鸡放一起，就能直观感受到两种炸鸡的不同。</p>

       <h3 class="article_h4">❶ 比大小</h3>

        <p class="article_P">麦麦脆汁鸡有<span class="article_span">琵琶腿、上腿排、鸡胸</span>3个部位，每个部位都挺大。相比之下，麦辣鸡翅的翅根和翅中看起来就显得气势弱了些。
        </p>
        <img src="images/mdl5.jpg" alt="" class="article_img">
        <p>左边为麦麦脆汁鸡琵琶腿，右边为麦辣鸡翅根</p>

        <h3 class="article_h4">❷ 比外皮</h3>

        <p class="article_P">麦麦脆汁鸡的<span class="article_span">外皮颜色更深，颗粒感小</span>；麦辣鸡翅的外皮颜色浅，颗粒感粗。麦麦脆汁鸡就像是磨了皮再打了好几斤阴影的麦辣鸡。
            以至于<span class="article_span">外皮厚度，肉眼看起来差不多</span>。</p>
        <img src="images/mdl6.jpg" alt="" class="article_img">

        <h3 class="article_h4">❸ 比口感</h3>


        <p class="article_P">吃起来，<span class="article_span">麦麦脆汁鸡明显要比麦辣鸡更“汁”</span>，但这不排除因为个头更大肉更多的原因，鸡腿肉本身就会比鸡翅肉的肉汁更多。</p>

        <p class="article_P">麦麦脆汁鸡的<span class="article_span">琵琶腿真的挺嫩</span>，轻轻一撕就撕开了，嚼起来鲜嫩多汁。不过麦麦脆汁鸡的鸡胸肉真的太柴了，简直噎嗓子（就是因为鸡胸肉，我们觉得5G中的“嫩”被扣掉，应该叫4G）。</p>

        <p class="article_P">在“脆”上面，<span class="article_span">麦麦脆汁鸡确实要比麦辣鸡更优秀</span>，一口下去就是清脆利落的咔嚓声。都是外卖送来的，而麦辣鸡咬起来有点像开封放了一夜的薯片，稍微有点“皮”了。</p>
        <img src="images/mdl7.gif" alt="" class="article_img">

        <p> 麦麦脆汁鸡更脆更多汁麦</p>
            <img src="images/mdl8.gif" alt="" class="article_img">
        <p>辣鸡相比没那么多汁没那么脆</p>

        <h3 class="article_h4">❹ 比味道</h3>


        <p class="article_P">跟多汁一起伴随的是油腻感，大家普遍觉得麦麦脆汁鸡咬开之后油挺多，尤其是上腿排，油多到流出来，多吃两口就被腻到。有个别小姐姐觉得皮太咸了但是肉没味儿，如果不混着吃的话就有点灾难。
        </p>
        <p class="article_P">吃完一块麦麦脆汁鸡，味道其实没留下什么记忆点，<span class="article_span">和别的炸鸡调味相比没有辨识度，就……咸味的炸鸡</span>。而对比之下，麦辣鸡就真的挺辣的！</p>
        <img src="images/mdl9.jpg" alt="" class="article_img">

        <p class="article_P">
        所长揪了3个小姐姐和我一起来吃，最后在麦麦脆汁鸡 VS麦辣鸡的抉择中，2人投了麦麦脆汁鸡，理由是不爱吃辣的；2人投了麦辣鸡，理由是麦麦脆汁鸡调味普通。
        </p>
        <p class="article_P">
        那么，麦麦脆汁鸡值不值得去试试呢？所长觉得<span class="article_span">如果你想快点吃到炸鸡，喜欢脆脆的口感，然后不想吃辣，还是可以去试试的！</span>在3个部位里，最建议大家点琵琶腿，是最符合5G的！
        </p>

        <h2 class="article_h">02</h2>
        <h3 class="article_h2">其他新品表现如何？</h3>
        <h3 class="article_h3">/ 一言难尽 /</h3>

       <p class="article_P">如果说麦麦脆汁鸡还可以去尝试一下的话，这几个新品就劝大家还是按需选择吧。
       </p>

        <h3 class="article_h4">■ 蜜桃派</h3>

       <p class="article_P">掰开之后晶莹剔透的粉色，让小姐姐看了就发出赞叹，颜值真的挺不错。</p>
        <img src="images/mdl10.jpg" alt="" class="article_img">


        <p class="article_P">但是一口下去，<span class="article_span">浓烈的甜味真的上头，所谓的蜜桃味充满了人工香精的感觉</span>。大家尝了一口之后就没怎么动过了……</p>

        <img src="images/mdl11.gif" alt="" class="article_img">

        <h3 class="article_h4">■ 莓莓车厘子麦旋风</h3>

        <p class="article_P">果酱很甜，冰淇淋很甜，饼干碎很甜，组合在一起就是甜味炸弹。<span class="article_span">如果你喜欢吃很甜的冰淇淋，那么可以去试试</span>。对冰淇淋容忍度很高的小姐姐表示，她觉得这个她可以。
        </p>
        <img src="images/mdl12.gif" alt="">

        <h3 class="article_h4">■ 椰香伴咖伴沙</h3>

        <p class="article_P">不得不说，包装还是很上档次的，纸盒防漏包装，里面还放了一个小冰袋。<span class="article_span">咖啡冰沙+椰果</span>，组合出了你难以想象的口感，记忆中不曾出现过。整体味道不苦微甜，如果你是惧怕黑咖啡但又有点想喝咖啡并且不太差钱的朋友，可以去试试。
        </p>
        <img src="images/mdl13.jpg" alt="" class="article_img">
    </div>
</div>



<footer class="footer">
    <div class="footer_bottom">
        <h1><a href="index.html">@吃货研究所</a></h1>
        <p><a href="tclz.html">冷知识|</a><a href="df.html">地域美食|</a><a href="zt.html">所长厨房|</a><a href="mdl.html">所长测评</a></p>
    </div>
</footer>
</body>
</html>

tclz

<html>
<head>
    <meta charset="UTF-8">
    <title>吃货研究所</title>
    <link rel="shortcut icon" href="images/tu1.jpg"/>
    <link href="css/tclz.css?v=2" rel="stylesheet" type="text/css" media="all">
    <script src="js/time.js"></script>
</head>
<body>
<div class="div_header">
    <div class="logo">
        <img src="images/tu3.jpg" class="xwcms" onmouseover="this.src='images/tu3.jpg'" onmouseout="this.src='images/tu3.jpg'"/>
        <div class="logo-text">吃货研究所</div>
    </div>
    <div class="right-right-div">
        <p id="time1" class="p-right-div-time"></p>

    </div>
</div>
<div class="clear">
</div>
<nav id="nav" class="nav-wrap">
    <ul class="clearfix">
        <li class="menuactive">
            <a href="index.html">
                首页
            </a>
        </li>
        <li class="menuactive">
            <a href="tclz.html">
                冷知识
            </a>
        </li>
        <li>
            <a href="df.html">
                地域美食
            </a>
        </li>

        <li>
            <a href="zt.html">
                所长厨房
            </a>
        </li>
        <li id="navEnd">
            <a href="mdl.html">
                所长测评
            </a>
        </li>
    </ul>
</nav>
<div class="div1">
<div class="article_head">
    <h1 class="article_head_h">糖炒栗子有糖吗？有，但不是为了吃……</h1>
    <p>发布时间： 2020-02-02 22:22:22</p>
    <br>
    <img src="images/wenzhang_tu1.gif" alt="">
</div>
<div class="div2">
    <p class="article_P">
        紫烂山梨红皱枣，总输易栗十分甜。在日益萧瑟的深秋里，热乎乎的糖炒栗子可称“恩物”。
        相信许多人在经过手剥牙咬，才把香甜的栗仁送进嘴里的时候，都会在内心发出天问：</p>
        <p class="article_P">为什么栗子要在一大堆砂子里炒？为什么砂子里要洒上根本渗不进硬壳的糖？</p>

        <img src="images/tclz_tu1.jpg" alt="" class="article_img">
        <p>糖炒栗子</p>


        <h1 class="article_h">01</h1>
        <h2 class="article_h2">糖炒栗子没有糖味？</h2>
        <p class="article_P">
        第一个问题很好回答，砂石的吸热能力强，能在较长时间内保持稳定的温度，这样就可以<span class="article_span">保证栗子受热均匀</span>，同样的原理也可以用在炒带壳花生上。</p>
        <p class="article_P">这题连作诗达人、盖章能手乾隆皇帝都会：“小熟大者生，大熟小者焦。<span class="article_span">大小得均熟，所待火候调</span>。”这几句顺口溜一样的诗虽然代表了他的文笔水平，但不是他的原创，
        而是“借鉴”了辽代大儒萧韩家奴的掌故，此人曾经主管南京栗园——辽朝所说的南京不是现在的江苏省会，而是北京西南一带，正是产栗子的地方。</p>
        <p class="article_P">后来辽兴宗询问萧韩家奴在外见闻时，他借炒栗子的诀窍来讲了讲“不能一刀切”的用人观：“臣惟知炒栗：<span class="article_span">小者熟，则大者必生；大者熟，则小者必焦</span>。使大小均熟，始为尽美。”似乎乾隆只看懂了字面意思。</p>
    <img src="images/tclz_tu2.jpg" alt="" class="article_img">
        <p>沙子是必需品 | Pixabay</p>

        <p class="article_P">炒栗子表面黏糊糊的糖，好像只有把手指弄脏的效果，就像鸡蛋灌饼里的蔫生菜一样让人不爽。而且因为稀薄的糖浆无法透过栗子皮，并不会增加栗仁的甜度。</p>
        <p class="article_P">不过店家也不是为了给栗子增加甜味而放糖的，<span class="article_span">糖的作用是粘去表皮杂质</span>，让栗子看上去油光闪亮，闻起来甜香扑鼻，“糖炒”的名字也让顾客感觉比单纯的“炒”更诱人。</p>


        <h1 class="article_h">02</h1>
        <h2 class="article_h2">家有栗树，等于有矿</h2>

       <p class="article_P2">栗子在中国的种植历史可以追溯到周代，采集食用历史就更久远了。</p>
        <img src="images/tclz_tu3.jpg" alt="">
        <p>甲骨文里的“栗”字非常形象地刻画出结满毛栗子的树形</p>
        <p class="article_P">
        《诗经》里栗子的身影频频出现，不仅生长在山上、低地上，还被当成行道树种植，国君的御苑里也种有栗树，栗子是祭祀的供品[“馈食之笾（biān），其实栗”]，<span class="article_span">木材还是制作宗庙牌位的指定原料</span>。</p>
         <p class="article_P">《韩非子》中就记载了秦国遭遇饥荒，范雎请求秦昭襄王将内苑的栗子、橡实拿来赈灾的故事。拥有大量栗树的人家就等于有了取之不尽的财富，“燕、秦千树栗，此其人与千户侯等”。</p>

         <p class="article_P">栗树高大茂盛，意大利西西里岛有一棵至今尚存的“百骑栗树”，传说它的枝叶曾为阿拉贡王国的百名骑士遮挡雷雨，故得此名。</p>
        <img src="images/tclz_tu4.jpg" alt="" class="article_img">
      <p>图片：Wikimedia Commons</p>
    <p class="article_P">
        栗木质地坚实，所以“栗”字也有坚硬之意，在此基础上产生了表达害怕的形声字“慄”，例如“不寒而慄”，现在已经二字合一。
        汉代帝王陵寝原本采用大量柏木垒成“黄肠题凑”，后来因为柏木材料砍伐殆尽改成质地、粗细相近的栗木，但颜色较深，被后世讥为“黑肠题凑”。
    </p>

        <h1 class="article_h">03</h1>
        <h2 class="article_h2">栗子食用指南</h2>
        <p class="article_P">
        古人吃栗子通常比较讲究原汁原味，蒸、煮、煨、生吃均可。“堆盘栗子炒深黄，客到长谈索酒尝”，至迟宋代已经有了“炒栗子”的记载，诗人陆游不仅爱猫也爱栗子，他在年老时写诗感叹牙齿松动了，<span class="article_span">幸好还能吃点炒栗当夜宵</span>，
            回忆起年轻时吃栗子的往事：“唤起少年京辇梦，和宁门外早朝时"，原来<span class="article_span">在等着上朝时，也不忘抓紧时间吃点栗子</span>。
    </p><p class="article_P">
        陆游还在笔记里回忆了一段往事，当年汴京最有名的栗子铺叫“李和煼（chǎo）（炒）栗”，属于只能被模仿不能被超越的水平，及至北方沦陷多年后，南宋使者出使燕山，李和的两个儿子为故国来使送去十包栗子，不胜唏嘘。
    </p>

        <p class="article_P">火烤是最简单的办法，但要注意先切一个小口，否则栗子会爆裂。</p>
    <img src="images/ctlz_tu5.jpg" alt=""  class="article_img">
    <p>图片：Pixabay</p>
        <p class="article_P">
        但那时的炒法和今天的糖炒栗子可能不同，南宋林洪在《山家清供》里写道，烹调栗子的办法，是在形状像茶壶的“铁铫（diào）”中放一个蘸了油的栗子和一个蘸水的栗子，再堆满四十七个栗子，将铁铫放进炭火里加热，听到有爆裂声就熟了。
    </p><p class="article_P">
        明朝人王象晋记录了类似的炒栗办法：选两个平底栗子，将底分别用油和水涂湿，扣在一起放在锅底，上面堆满栗子，盖严后烧熟；或是把大栗子的壳底用刀切个十字口，底向下在锅里排满，绕着锅撒一撮盐，加热焖熟。
    </p><p class="article_P">
        更复杂的吃法，还有将栗子切薄片和橄榄片一起吃的“<span class="article_span">梅花脯</span>”，山药和栗子一起用羊肉汤炖煮的“<span class="article_span">金玉羹</span>”，栗子粉混合糯米粉用蜜水搅拌蒸熟的“<span class="article_span">栗糕</span>”。晚近时的<span class="article_span">栗子扒白菜、栗子烧鸡</span>就更加为我们所熟悉了。
    </p>

        <h1 class="article_h">04</h1>
    <h2 class="article_h2">栗子也有咸党？！</h2>
    <p class="article_P">
        同属东亚文化圈的日本、韩国吃栗子的历史也相当悠久，这两个国家主要种植日本栗（Castanea crenata Sieb.& Zucc.），和中国板栗（C. mollissima Bl.）、欧洲栗（C. sativa Mill.）、美洲栗（C. dentata Borkh.）同属不同种。
    </p><p class="article_P">
        因为<span class="article_span">日语里去除栗子皮的“捣”和“胜”发音相同</span>，古代武士认为它有象征胜利的口彩，日本好几个地方都流传着“在某位名人的加持下，此地栗子树一年结了三次果”的故事，
    相关名人有空海大师、德川家康、亲鸾法师等等，类似于中国同一个美食传说有着刘秀、李世民、慈禧等源头。</p>
    <p class="article_P">日本传统的栗子吃法既有栗金团、栗子羊羹一类甜品，又有栗子饭这样的主食，在西方口味影响下还出现了栗子蛋糕、栗子冰激凌等等。</p>

    <img src="images/tclz_tu5.jpg" alt="" class="article_img">
        <p>栗子饭
    </p>
    <p class="article_P">
        栗子也是韩国每年中秋节必吃的食物，中国古代有“桃花源”的乌托邦神话，韩国其实也有，但他们的乌托邦叫“<span class="article_span">栗岛国</span>”，是反抗暴政的好汉洪吉童远航栖身之处，也可见栗子的重要性了。
    </p>
    <p class="article_P">
        在欧洲，栗子曾经是重要的碳水化合物来源，高淀粉含量使它可以替代主食，口感又比同样淀粉含量较高的橡子要好得多，有“<span class="article_span">穷人的面包</span>”之称。如果想要了解栗子做主食的吃法，
        不妨去拿破仑的家乡科西嘉岛一品其味，栗子粉可以摊薄饼、炸面圈，虽然热量不低，但我们难以抗拒它的美味。
    </p>
    <img src="images/tcliz_tu6.jpg" alt="" class="article_img">
        <p>勃朗峰栗子蛋糕</p>

        <p class="article_P">除此之外，还有鼎鼎大名的栗子蛋糕，国内我们看惯的蛋糕造型，是将细腻的栗子蓉和奶油搅拌后，放在打底的海绵蛋糕片上食用，这种做法在法国叫“勃朗峰”，奶油就是栗子山峰上的积雪。
            另有一种栗子蛋糕是用栗子粉替代面粉烤成的，看上去相当扎实。
    </p>
    <p class="article_P">
        糖渍栗子也是一种历史悠久的甜品，将去皮的完整栗子在加了香草和白兰地的糖浆中浸煮多次，不断提高糖浆的浓度，直到栗子吸收糖分达到饱和，成为不折不扣的“<span class="article_span">糖栗子</span>”，是《茶花女》女主角的最爱。
    </p>
    <img src="images/tcliz_tu7.jpg" alt="" class="article_img">
       <p> 放在铁板上的烤栗子</p>
<p class="article_P">
        欧洲的“原教旨吃栗法”通常是<span class="article_span">用火将生栗子烧熟</span>，所以也有了“火中取栗”的寓言故事。为了让栗子不至于被烧糊，一般将它们架在铁丝网上或放在有洞的陶锅里烧烤。
    煮栗子则以咸口为多，一般在<span class="article_span">加盐和茴香的水中煮熟</span>。</p>
   <p class="article_P"> 加泰罗尼亚地区至今仍有专门的“栗子节”，在11月初，人们要在脸上抹上灰尘，跳过烤栗子的篝火祈求好运，后来也和万圣节的一些庆典结合在一起。</p>


        <h1 class="article_h">05</h1>
        <h2 class="article_h2">走向末日的美洲栗</h2>
        <p class="article_P">
        在北美洲，美洲栗的分布原本也极为广泛，为人们无私地提供了食物和木材。因为<span class="article_span">栗木单宁含量较高具有耐腐性</span>，19世纪的美国铁道枕木、电线杆、煤井支柱等几乎都是栗木制成，可以说为工业发展立下了汗马功劳。
            </p><p class="article_P">
        但如今，美洲栗几乎全部倒在了<span class="article_span">栗疫病菌</span>（Cryphonectria parasitica）的攻击下。中国板栗和日本栗对栗疫病有抗性，但美洲栗、欧洲栗则不具备，这种致病真菌正是附在进口的亚洲栗树上引入北美的。
            </p>
            <img src="images/tcliz_tu8.jpg" alt="" class="article_img">
        <p>美国19世纪描绘采摘栗子的版画</p>
        <p class="article_P">
        1906年的检查结果显示，纽约布朗克斯区98%的栗树已被感染。真菌可以通过空气传播，在几十年内让30亿棵美洲栗树变成了“活死树”——当主茎死亡时，根部会萌出新芽，随后继续遭到感染，因此被归类为功能绝种。
            目前仅有数百棵幸存，成为第一个因真菌感染而濒危的物种。美洲栗的命运令人感叹，也让人生出“不如珍惜眼前栗”的感受。
            </p><p class="article_P">
        所以，不来一颗吗？</p>

</div>
</div>




<footer class="footer">
    <div class="footer_bottom">
        <h1><a href="index.html">@吃货研究所</a></h1>
        <p><a href="tclz.html">冷知识|</a><a href="df.html">地域美食|</a><a href="zt.html">所长厨房|</a><a href="mdl.html">所长测评</a></p>
    </div>
</footer>
</body>
</html>

zt

<html>
<head>
    <meta charset="UTF-8">
    <title>吃货研究所</title>
    <link rel="shortcut icon" href="images/tu1.jpg"/>
    <link href="css/zt.css?v=2" rel="stylesheet" type="text/css" media="all">
    <script src="js/time.js"></script>
</head>
<body>
<div class="div_header">
    <div class="logo">
        <img src="images/tu3.jpg" class="xwcms" onmouseover="this.src='images/tu3.jpg'" onmouseout="this.src='images/tu3.jpg'"/>
        <div class="logo-text">吃货研究所</div>
    </div>
    <div class="right-right-div">
        <p id="time1" class="p-right-div-time"></p>

    </div>
</div>
<div class="clear">
</div>
<nav id="nav" class="nav-wrap">
    <ul class="clearfix">
        <li class="menuactive">
            <a href="index.html">
                首页
            </a>
        </li>
        <li class="menuactive">
            <a href="tclz.html">
                冷知识
            </a>
        </li>
        <li>
            <a href="df.html">
                地域美食
            </a>
        </li>

        <li>
            <a href="zt.html">
                所长厨房
            </a>
        </li>
        <li id="navEnd">
            <a href="mdl.html">
                所长测评
            </a>
        </li>
    </ul>
</nav>
<div class="div1">
    <div class="article_head">
        <h1 class="article_head_h">双十一剁完手了吗？进来补个蹄儿吧！</h1>
        <p>发布时间： 2020-02-02 22:22:22</p>
        <br>
        <img src="images/wenzhang_tu1.gif" alt="">
    </div>
    <div class="div2">
        <p class="article_P">
            双十一过完了，你的手还在吗？不过吃货是不用担心吃土的，因为我的钱都拿去买肉了啊～看我买的猪蹄，它又大又香！
        </p>
        <p class="article_P">
            而且烤猪蹄这么香，不许你不会！

            好吃的烤猪蹄每一块骨头啃起来都滋滋香，厚厚的皮、滑嫩嫩的筋，别管是用手撕开还是用牙抿开，每一口都糯得劲道、滑得弹牙！</p>
        <img src="images/zt1.png" alt="" class="article_img">

        <p class="article_P">烤猪蹄，名字上叫烤，其实大部分时间是在卤，先卤后烤，步骤很简单，属于“看过就会”系列。只要火候够，没有整不明白的猪肉，再不灵巧的手也能拿下一盘香喷喷的猪肉！</p>

        <img src="images/zt2.gif" alt="" class="article_img">


        <h1 class="article_h">你需要准备的材料</h1>
        <p class="article_P">食材：猪蹄400克、生姜10片、料酒15克。</p>

        <img src="images/zt3.png" alt="" class="article_img">


        <p class="article_P">香料：小葱3根、桂皮1块、香叶2片、干辣椒3根、花椒20粒、八角2个、十三香5克、白胡椒粉5克、小茴香5克。</p>
        <p class="article_P">卤料：冰糖50克、料酒5克、蚝油15克、酱油20克、米醋5克。</p>
        <p class="article_P">烧烤料：辣椒粉5克、孜然粉5克、蜂蜜10克、韩式辣椒酱15克。</p>
        <img src="images/zt4.png" alt="" class="article_img">


        <h1 class="article_h">制作步骤</h1>

        <h2 class="article_h2">一、 猪蹄焯水</h2>

        <p class="article_P">① 猪蹄、生姜和料酒倒入锅中，加入冷水没过肉。</p>
        <p class="article_P">② 中火煮到沸腾，撇去猪蹄血沫儿，煮到骨头缝里不再往外冒血，捞出来沥水、用厨房用纸吸吸水。</p>
        <p class="article_P">③ 再检查一下猪毛，一般缝隙里的猪毛都清理得不干净，煮完的猪蹄更容易薅猪毛，提前准备好镊子，一根根往下拽。</p>
        <img src="images/zt5.png" alt="" class="article_img">


        <h2 class="article_h2">二、 卤猪蹄</h2>
        <p class="article_P">① 中大火把油加热，冰糖一次全部倒进去，炒成没有明显颗粒的棕色液体。</p>

        <img src="images/zt6.png" alt="" class="article_img">


        <p class="article_P">② 糖炒好了下猪蹄，翻炒让糖包裹着每块猪蹄，皮厚的那一面朝下多煎一小会儿，煎出焦糖色就可以了。</p>
        <img src="images/zt7.png" alt="" class="article_img">


        <p class="article_P">③ 将准备好的所有香料和卤料倒入，翻炒几下爆香，然后倒水与所有食材平齐。</p>
        <img src="images/zt8.png" alt="" class="article_img">


        <p class="article_P">④ 大火将汤汁烧到沸腾，再转小火，盖上锅盖，普通锅焖一个半小时到两个小时，根据猪蹄的厚度调整时间。</p>
        <img src="images/zt9.png" alt="" class="article_img">

        <p class="article_P">猪蹄卤好之后，不用着急放烤箱，散一下热气再烤会更劲道，我晾了大概半个小时。 卤完的猪蹄非常滑嫩，用叉子插一下看看能不能非常容易的穿透猪肉，像图这样就是可以了。</p>

        <img src="images/zt10.gif" alt="" class="article_img">

        <h2 class="article_h2">三、 烤猪蹄</h2>

        <p class="article_P">① 烤盘铺上铝箔纸，摆好猪蹄，骨头那面朝下，用牙签在肉皮上戳一些小洞洞，每一小块猪蹄大概戳10下。</p>

        <p class="article_P">② 把4种烧烤料加一点温水，搅拌在一起，均匀地刷在上面，连骨头也不要放过。</p>

        <p class="article_P">③ 烤箱200℃预热，根据猪蹄的厚度，烤10-15分钟，就可以吃了。</p>

        <img src="images/zt7.png" alt="" class="article_img">

        <p class="article_P">夜宵吃个烤猪蹄，感觉自己美美哒～我最享受撕开肉皮的那一下，粘糯的肉质带着热气，散发出迷人的香味，光看着都很满足！</p>


        <h2 class="article_h2">絮叨叨的小贴士</h2>

        <p class="article_P">① 猪蹄我是直接买了切块儿的，如果是整只猪蹄可以焯完水之后再切块，生切骨头太费刀了！</p>

        <p class="article_P">② 一般超市卖的猪蹄都是处理过猪毛的，买的时候可以检查一下。</p>

        <p class="article_P">③ 炒糖色会很提升香味，即便是后面卤了一个多少时，猪皮上面被焦糖煎过的痕迹依然在。但是猪蹄焯过水，非常容易蹦油，新手可以略过这一步，直接把猪蹄、冰糖、调料和水一起倒入锅里开始煮。
        </p>
        <p class="article_P">
            ④ 卤完猪蹄的汤汁非常香，可以用来炖豆角或者煮个面吃……
        </p>
    </div>
</div>



<footer class="footer">
    <div class="footer_bottom">
        <h1><a href="index.html">@吃货研究所</a></h1>
        <p><a href="tclz.html">冷知识|</a><a href="df.html">地域美食|</a><a href="zt.html">所长厨房|</a><a href="mdl.html">所长测评</a></p>
    </div>
</footer>
</body>
</html>

df

<html>
<head>
    <meta charset="UTF-8">
    <title>吃货研究所</title>
    <link rel="shortcut icon" href="images/tu1.jpg"/>
    <link href="css/df.css?v=2" rel="stylesheet" type="text/css" media="all">
    <script src="js/time.js"></script>
</head>
<body>
<div class="div_header">
    <div class="logo">
        <img src="images/tu3.jpg" class="xwcms" onmouseover="this.src='images/tu3.jpg'" onmouseout="this.src='images/tu3.jpg'"/>
        <div class="logo-text">吃货研究所</div>
    </div>
    <div class="right-right-div">
        <p id="time1" class="p-right-div-time"></p>

    </div>
</div>
<div class="clear">
</div>
<nav id="nav" class="nav-wrap">
    <ul class="clearfix">
        <li class="menuactive">
            <a href="index.html">
                首页
            </a>
        </li>
        <li class="menuactive">
            <a href="tclz.html">
                冷知识
            </a>
        </li>
        <li>
            <a href="df.html">
                地域美食
            </a>
        </li>

        <li>
            <a href="zt.html">
                所长厨房
            </a>
        </li>
        <li id="navEnd">
            <a href="mdl.html">
                所长测评
            </a>
        </li>
    </ul>
</nav>
<div class="div1">
    <div class="article_head">
        <h1 class="article_head_h">没吃过这些豆腐，你就不算真正了解云南</h1>
        <p>发布时间： 2020-02-02 22:22:22</p>
        <br>
        <img src="images/wenzhang_tu1.gif" alt="">
    </div>
    <div class="div2">
        <p class="article_P">云南豆腐，是继汽锅鸡、过桥米线、宣威火腿后火出云南的又一产物。《舌尖上的中国》、《风味人间》、《人生一串》等纪录片中都能见到它的身影。
        石屏豆腐、建水豆腐、七步场豆腐、倘塘黄豆腐，还有密祉豆腐宴，形成了浓厚的云南吃豆腐文化。
        </p>
        <img src="images/df1.png" alt="" class="article_img">


        <h1 class="article_h">01</h1>
        <h2 class="article_h2">云南的豆腐文化</h2>
        <p>/ 水是重要的一环 /</p>

        <p class="article_P">中国吃豆腐的历史可以追溯至汉代。但直至明朝朱元璋统一云南，豆腐的做法才随着他的军队进入云南。</p>

        <p class="article_P">相比其他地区，云南人吃豆腐的历史虽短，却形成了浓厚的豆腐文化。究其原因，可能当地水的作用更多一点。比如有名的石屏豆腐，就不用卤水，而是直接用当地的井水点豆腐。</p>

        <img src="images/df2.gif" alt="" class="article_img">
        <p class="article_P2">井水点化的豆腐，不仅软嫩鲜香，还没有豆腥味和石膏味。</p>


        <h1 class="article_h">02</h1>
        <h2 class="article_h2">细数云南有名的豆腐</h2>
        / 你吃过哪些? /
        <h3 class="article_h3"> <span class="article_span">石屏豆腐</span></h3>
        <p class="article_P">


        石屏人常说，“吃肉不如吃豆腐”。

        石屏豆腐，从长相上看，就不一般。其体形巨大，长约28cm，宽约8cm，厚约2cm，颜色略微黄，极具韧性，不易破损，提溜起来一甩，有DuangDuang的动感。
        </p>
        <img src="images/df3.png" alt="" class="article_img">
        <p>石屏豆腐</p>

       <p class="article_P">所有豆腐中，唯有石屏豆腐，可以直接用井水点卤。

        石屏县城里，除了用来饮用的甜水井，还散布着一些无法饮用，口感酸涩的井水，当地人称之为酸水。这些酸水含有石膏、盐卤、复合磷酸盐等成分，可与豆浆产生化学反应，直接形成豆腐。</p>
           <p class="article_P">用井水直接点卤的豆腐，去掉了卤水或石膏点卤的腥味。

        在放入井水点卤的过程中，手法及其重要。越慢，点卤的效果越好。速度过快，将导致豆腐无法成型。而快慢之间，全靠师傅多年经验。</p>

        <img src="images/df4.jpg" alt="" class="article_img">
        <p>石屏豆腐</p>
    <p class="article_P">
        一块豆腐没有腥味，只是其最基本的要求。要征服当地吃豆腐的老餮，这还远远不够。

        一块合格的石屏豆腐，还需在前期洗去豆皮，去除豆子的苦涩味，再用传统的石磨来获取豆浆。

        石磨的使用保证了豆子的低温，又避开了钢磨的铁锈味，能做出更优质的豆腐。
        </p>

        <img src="images/df5.png" alt="" class="article_img">
        <p class="article_P">
        在石屏，豆腐最常见的食用方式，就是烧豆腐。而烧豆腐的精髓，就是用手撕着吃。

        围坐在火炉边，一边聊天，一边吃大块的切成长条状的烧豆腐，好不快哉。
        </p>
        <img src="images/df6.png" alt="" class="article_img">
        <p>烧豆腐</p>
    <p class="article_P">
        而上好的石屏豆腐，可自行发酵二、三天，在豆腐表面产生淡黄色的霉菌时，放入油、盐、花椒、辣椒面等调料，蒸熟后食用，风味更佳独特。
    </p>
        <h3 class="article_h3"> <span class="article_span">建水豆腐</span></h3>
        <p class="article_P">
        距离石屏50多公里，就是另一个吃豆腐的重镇，建水。两地虽相距不远，且建水也吃烧豆腐，但这两地的豆腐却是两种完全不同的风格。

        建水的烧豆腐以一个个的小豆腐最出名。小豆腐块不大，像棋子大小，发酵成熟的豆腐呈黄褐色，表皮刚硬。放在炭火上烘烤，表皮膨胀裂开，豆香弥漫开来。
        </p>

        <img src="images/df7.gif" alt="" class="article_img">
        <p>翻滚的烧豆腐</p>
       <p class="article_P">要得到这种建水豆腐，少不了建水的井。大板井甜，小节井凉，西门大板井就是制作建水豆腐最重要的水源。</p>

        <img src="images/df8.gif" alt="" class="article_img">
        <p>大板井</p>

        <p class="article_P">每天天刚亮，就能在大板井边看到制作豆腐的流水线。小块纱布包裹嫩豆腐，用木板挤压出水分后定型，再风干三、四天，水分除去六、七成，建水小豆腐就做成了。</p>

        <img src="images/df9.jpg" alt="" class="article_img">
        <p>大板井</p>
        <p class="article_P">
        与石屏直接用井水点豆腐不同，建水人习惯用酸浆来点卤。酸浆，是制作豆腐后沥出的汁水，在适宜的温度下，由自身的乳酸菌发酵变酸，行业称之为酸浆。

        因是酸浆点卤，建水的豆腐在发酵过程中会带有一股特殊的酸味，待豆腐发酵成熟，酸味自动消失。

        与石屏豆腐一致，建水豆腐的常见打开方式也是烧豆腐。
        </p>
        <img src="images/df10.jpg" alt="" class="article_img">
        <p>烧豆腐</p>
        <p class="article_P">
        在火炉边吃烧豆腐，时机很重要。一定要眼明手快，看到豆腐外皮泛黄，毫不犹豫地出手。若时间过短，外皮发白，豆腐会酸；若火候过大，外皮迅速发黑，豆腐会苦。

        好的豆腐，还得配上好的食客，才能享受到这一美食。
        </p>

        <img src="images/df11.gif" alt="" class="article_img">
        <h3 class="article_h3"> <span class="article_span">包浆豆腐</span></h3>
        <p class="article_P">
        虽然石屏人和建水人在谁的豆腐更胜一筹这件事上无法达成一致，但他们却都表达出了对包浆豆腐的无限喜爱。

        包浆豆腐，可追溯至清代，是建水的特色小吃之一。发展至今，除了建水，石屏等地也可见到。
        </p>
        <img src="images/df12.png" alt="" class="article_img">
        <p>包浆豆腐</p>
        <p class="article_P">
        包浆豆腐，可不是指里面包豆浆哟。包浆，是把豆腐脑倒在铺好棉布的模具内，包裹严实，重物挤压的过程。

        包浆豆腐除了常见的烧豆腐，油炸、香煎、铁板都是其常见做法。
        </p>
        <img src="images/df13.png" alt="" class="article_img">
        <h3 class="article_h3"> <span class="article_span">七步场豆腐</span></h3>
        <p class="article_P">

        七步场豆腐，与石屏、建水豆腐并称云南三大豆腐。而其也是三大豆腐中唯一用卤水来点卤的豆腐。

        位于昆明呈贡的七步场制作豆腐距今已有600多年的历史。臭豆腐是其招牌，在清代已得到过康熙帝的赞美，赐名“青方臭豆腐”，列为“御膳房”小吃之一。现为呈贡非物质文化遗产。</p>
        <p class="article_P">
        七步场臭豆腐，模样与别的臭豆腐不大相同。厚约一厘米，成巴掌大小的长方形，在豆腐上长着一层密密的银白色绒毛，闻着臭，吃起来香。
        </p>
        <img src="images/df14.png" alt="" class="article_img">
        <p>发霉的豆腐</p>
        <p class="article_P">
        吃七步场臭豆腐，放上油、盐、辣椒蒸熟就是其最传统的吃法。而现在的七步场，除了有特色臭豆腐，还形成了豆腐宴。

        考验厨师手艺的瓦片香煎臭豆腐，臭豆腐炒茼蒿，可甜可咸的现点豆花，豆腐圆子，凉拌豆腐……煎、炒、蒸、炸、煮，各种豆腐的烹饪手法，都能在这豆腐宴上品尝到。
        </p>
        <img src="images/df15.png" alt="" class="article_img">
        <p>煎臭豆腐</p>
        <h3 class="article_h3"> <span class="article_span">倘塘黄豆腐</span></h3>
        <p class="article_P">

        倘塘吃豆腐的历史，也可追溯至明朝。在明朝军队进来之前，他们是只吃豆渣的“铁憨憨”，留下豆渣，把豆浆给汉人。后来才从汉人那学到了制作豆腐的工艺。而“小小黄豆圆又圆，堆成豆腐卖成钱”的顺口溜也不知在何时悄悄兴起。

        倘塘黄豆腐的点卤方式与建水类似，也是用酸浆点卤。

        豆腐要经历泡豆磨浆，烫浆滤渣，用酸点浆，趁热包成小块，挤压出水分，包块成形。
        </p>
        <img src="images/df16.gif" alt="" class="article_img">
<p class="article_P">
        之后，就迎来了它最重要的步骤——染色。黄豆腐的染色剂来自于姜黄。在倘塘，制作豆腐的人家都会种植着几株姜黄。姜黄根晒干，磨成粉，放入水中，煮至豆腐浮起，天然染色的黄豆腐形成。
        </p>
        <img src="images/df17.gif" alt="" class="article_img">
        <p class="article_P">
        染色完成，豆腐再用麻绳挂晾，晒干水汽，防止变质。
        </p>
        <img src="images/df18.png" alt="" class="article_img">

        <h3 class="article_h3"> <span class="article_span">密祉豆腐宴</span></h3>
    <p class="article_P">

        如果说之前的豆腐都专攻豆腐的某一个领域，那大理州弥渡县密祉镇的豆腐宴则胜在一个全。

        密祉豆腐的点卤方式与建水豆腐和倘塘黄豆腐一致，均为酸浆点卤，而它好酸浆的品质来自文盛街的珍珠泉。</p>
        <p class="article_P">
        用这酸浆点出的豆腐，制成密祉响当当的豆腐宴八大碗：一碗豆浆，一豌豆花，一碗油炸豆腐，一碗豆腐肉圆子，一碗麻婆豆腐，一碗荷花豆腐、一碗毛豆豆腐煮大蒜、再来一碗野坝子黑肉鸡（野坝子，又名野巴子、狗尾巴香，分布于四川、云南、广西等省）。
        </p>
        <img src="images/df21.png" alt="" class="article_img">
        <p>豆腐宴</p>
        <p class="article_P">
        虽然七步场也有豆腐宴，但和七步场的豆腐宴比，密祉豆腐宴不仅仅是运用了煎、炒、蒸、煮等各种烹饪方法，也更具艺术特色，在豆腐宴上，除了八大碗，还能见到珍珠情、凤山宴等艺术豆腐。
        </p>
        <p class="article_P">
        豆腐之多，无法争出高下，有人喜欢这，有人喜欢那，最终胜出的，是让人留恋的童年味道。
        </p>
    </div>
</div>




<footer class="footer">
    <div class="footer_bottom">
        <h1><a href="index.html">@吃货研究所</a></h1>
        <p><a href="tclz.html">冷知识|</a><a href="df.html">地域美食|</a><a href="zt.html">所长厨房|</a><a href="mdl.html">所长测评</a></p>
    </div>
</footer>
</body>
</html>

js

time

/**
 * Created by Administrator on 2020/11/12.
 */
    function clock() {
        var time1=document.getElementById('time1');
        var now=new Date();
        var h=now.getHours();
        if(h<10)
        {
            h='0'+h;
}
        var m=now.getMinutes();
        if(m<10)
        {
            m='0'+m;
        }
        var s=now.getSeconds();
        if(s<10)
        {
            s='0'+s;
        }
        time1.innerHTML="现在时间: "+h+":"+m+":"+s;
    }
setInterval(clock,1000);

//实现轮播效果
window.onload=function(){
    //顶部的焦点图切换
    function hotChange(){
        var current_index=0;
        var timer=window.setInterval(autoChange, 5000);
        var button_li=document.getElementById("button").getElementsByTagName("li");
        var pic_li=document.getElementById("banner_pic").getElementsByTagName("li");
        for(var i=0;i<button_li.length;i++){
            button_li[i].onmouseover=function(){
                if(timer){
                    clearInterval(timer);
                }
                for(var j=0;j<pic_li.length;j++){
                    if(button_li[j]==this){
                        current_index=j;
                        button_li[j].className="current";
                        pic_li[j].className="current";
                    }else{
                        pic_li[j].className="pic";
                        button_li[j].className="but";
                    }
                }
            }
            button_li[i].onmouseout=function(){
                timer=setInterval(autoChange,3000);
            }
        }
        function autoChange(){
            ++current_index;
            if (current_index==button_li.length) {
                current_index=0;
            }
            for(var i=0;i<button_li.length;i++){
                if(i==current_index){
                    button_li[i].className="current";
                    pic_li[i].className="current";
                }else{
                    button_li[i].className="but";
                    pic_li[i].className="pic";
                }
            }
        }
    }
    hotChange();
}

css

style

@charset "utf-8";
*{
	font-family: 微软雅黑;
	margin:0;
	padding:0;
	list-style:none;
	outline:none;
	border:0;
}
body{
	overflow-x:hidden;
	/*background-image: url("bg_tu1.gif");*/
	background-color: #FAEFEFEF;
	/*设置背景图片*/
	/*background-attachment: fixed;*/
}

a:link {
	color:black;
	text-decoration:none;
}

a:visited {
	color:black;
	text-decoration:none;
}
	
a:hover {
	color: black;
	text-decoration:none;
	}
	
a:active {
	color: black;
	text-decoration:none;
}

/***鼠标悬浮图片旋转360度 begin***/
.xwcms {
            margin: 0 auto;
			margin-top: 25px;
            -webkit-border-radius: 110px;
            border-radius: 110px;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            -o-transition: -o-transform 0.4s ease-out;
            -ms-transition: -ms-transform 0.4s ease-out;
			width:80px;
			height:80px;
			box-shadow:0 0 0 4px #fff;
			float:left;
			margin-left:30px;
       }
.xwcms:hover {
            -webkit-transform: rotateZ(360deg);
            -moz-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
        }
/***鼠标悬浮图片旋转360度 begin***/


/***鼠标悬浮图片旋转360度 begin***/
.xwcms2 {    
			margin: 0 auto;
            -webkit-border-radius: 110px;
            border-radius: 110px;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            -o-transition: -o-transform 0.4s ease-out;
            -ms-transition: -ms-transform 0.4s ease-out;
			width:30px;
			height:30px;
			box-shadow:0 0 0 2px #fff;
			float:left;
			margin-left:5px;
       }
body{
	/*background: #EBFFD1;*/
	/*background-image: url("images/tu1.gif");*/
}

.div_header{
	width:1000px;
	height:150px;
	/*background-color: #FA7E3E;*/
	background-color: #FAA862;
	margin:0 auto;
	/*margin-bottom: 3px;*/
}

.logo{
	float:left;
	height:100%;
	width:50%;
	line-height:140px;
	font-size:2.3em;
	color: white;
	font-weight:800;
}
 .logo-text{
	margin-left:20px;
	float:left;
}

.right-right-div{
    margin-top: 10px;
    margin-right: 0;
	height:130px;
	width:200px;
	float:right;
	line-height:30px;

}
 .p-right-div{
     float:left;
     line-height:5px;
     font-size:1.0em;
     /*color: #EBFFD1;*/
     font-weight:400;

    }
.p-right-div-time{
	line-height:140px;
	font-size:1em;
	color: white;
	font-weight:600;
}
.clear{
	clear:both;
	margin-bottom: 0;
}

/* 菜单 */
nav{
	width:1000px;
	height:45px;
	margin:0 auto;
	margin-bottom: 10px;
	margin-top: 10px;
	/*background-color: #FA8C2E;*/
	background-color: #FAA862;
}

nav ul{
	margin: 0px; /* 与外界元素的距离为0 */
	padding: 0px; /* 与内部元素的距离为0 */
}

nav ul li{
	list-style-type:none;
	float:left; /* 向左漂移，将竖排变为横排 */
	color:white;
	height:45px;
	width:100px;
	text-align:center;
	line-height:45px;
	margin-left:75px;
}

nav ul li:link{
	background: #53868B;
}

nav ul li:hover{
	background-color: white;
}
/*banner*/
.banner{
	position:relative;
	overflow:hidden;
	width:1000px;
	height:650px;
	background: white;
	margin:0 auto;
}
.one{
	position:absolute;
	/*left:100%;*/
	top:0;
	/*margin-left:0px;*/
}
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{
	position:absolute;
	left:40%;
	top:90%;
	margin-left:-62px;
}
.banner ol .but{
	float:left;
	width:28px;
	height:1px;
	border:1px solid #d6d6d6;
	margin-right:20px;
}
.banner ol li{cursor:pointer;}
.banner ol .current{
	background:#90d1d5;
	float:left;
	width:28px;
	height:1px;
	border:1px solid #90d1d5;
	margin-right:10px;
}


.container-content{
	width:1000px;
	margin:0 auto;
}

.container-content .article-list{
	width:700px;
	float:left;
}

.container-content .article-list .item{
	width:100%;
	height:200px;
	background:white;
	/*-webkit-border-radius: 10px;
     border-radius: 10px;*/
	 margin-top:20px;
	 border:2px solid #F4F4F4;
	 overflow:hidden;
}

.container-content .article-list .item .art-img{
	float:left;
	width:40%;
	overflow:hidden;
}

.container-content .article-list .item .art-img img{
	width:98%;
	margin:0 auto;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	max-height:180px;
}

.container-content .article-list .item .title{
	float:left;
	font-size:1.5em;
	padding-left:15px;
	padding-top:8px;
	color:#7A7A7A;
}

.container-content .article-list .item .base-info{
	float:left;
	width:60%;
	height:50px;
}

.container-content .article-list .item .base-info ul li{
	 list-style-type:none;
	 float:left; /* 向左漂移，将竖排变为横排 */
	 /*color: #CD2626;*/
	 height:60px;
	 text-align:left;
	 line-height:50px;
	 margin-left:50px;
	 font-size:.1em;
	 color:#696969;
	 
}


.container-content .article-list .item .desc{
	float:left;
	width:60%;
	overflow:hidden;
	box-sizing: border-box;/*不让padding影响元素的宽度*/
	padding:15px;
	font-size:1em;
	line-height:30px;
	color:#696969;
	text-indent:30px;
	margin-top:-15px;
}

/*右侧区域*/
.right-fun{
	width:280px;
	float:right;
}

.right-fun .model{
	width:100%;
	border:2px solid #F4F4F4;
	margin-top:20px;
	background:white;
}

.right-fun .model .title{
	border-left:3px solid #FA7E3E;;
	height:30px;
	padding-left:10px;
	box-sizing: border-box;/*不让padding影响元素的宽度*/
	font-weight:800;
	line-height:30px;
}

.right-fun .model .content{
	width:100%;
	margin-bottom:20px;
}

.right-fun .model .content p{
	margin:15px;
	font-size:.8em;
	
	-moz-transition:all .5s linear .1s;  
	  -webkit-transition:all .5s linear .1s;  
	  -o-transition:all .5s linear .1s;  
	  -ms-transition:all .5s linear .1s;  
	  transition:all .5s linear .1s;  


}

.right-fun .model .content p:hover{
	padding-left:20px;
}

.right-fun .model .menu{
	width:100%;
	height:140px;
}

.right-fun .model .menu span{
	display:block;
	width:100px;
	height:35px;
	background:#F2F2F2;
	float:left;
	margin:15px;
	line-height:35px;
	-webkit-border-radius: 10px;
    border-radius: 10px;
	color: #FA7E3E;
	/*color:lightsteelblue;*/
	text-align:center;
	
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	-o-transition: -o-transform 0.4s ease-out;
	-ms-transition: -ms-transform 0.4s ease-out;
}

.right-fun .model .menu span:hover {
	-webkit-transform: rotateZ(360deg);
	-moz-transform: rotateZ(360deg);
	-o-transform: rotateZ(360deg);
	-ms-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
}

.right-fun .model .menu span a,.right-fun .model .menu span a:visited,.right-fun .model .menu span a:link{
	color: #2C6328;
}

.right-fun .recommend{
	width:280px;
}

/*搜索框7*/  
form {
	position:relative;
	margin:0 auto;
} 
button {
	border:none;
	outline:none;
}
button {
	height:42px;
	width:42px;
	cursor:pointer;
	position:absolute;
}
.bar7 form {
	height:52px;
	padding-right:10px;
}
.bar7 input {
	width:200px;
	border-radius:42px;
	border:2px solid #324B4E;
	background:white;
	transition:.3s linear;
	float:right;
	height:35px;
	margin-top:10px;
	outline:none;
}
.bar7 input:focus {
	width:250px;
}
.bar7 button {
	background:none;
	top:3px;
	right:20px;
}
.bar7 button:before {
	content:"Search";
	/*font-family:FontAwesome;*/
	color:#324b4e;
}

/*footer*/
footer{
	width:1000px;
	height: 100px;
	/*background:lightsteelblue;*/
	background-color: #FAA862;
	display:block;
	margin:0px auto;
	overflow:hidden;
	text-align:center;
	margin-top:20px;
}
.footer_bottom{
	margin-top: 30px;
}

/*article-content*/
.article-content{
	width:700px;
	float:left;
	margin-top:20px;
	text-align:center;
	background:white;
}

.article-content h3{
	margin-top:10px;
}

.article-content .tt{
	margin-top:20px;
	color:#CD2626;
}

.article-content .content{
	margin-top:20px;
}

.article-content .content p{
	margin-top:5px;
	text-align:left;
	padding:20px;
	text-indent:30px;
	line-height:40px;
}
.div1{
	width: 1000px;
	height: 100px;
	margin: 0 auto;
	background-color: #90d1d5;
}

mdl

@charset "utf-8";
*{
    font-family: 微软雅黑;
    margin:0;
    padding:0;
    list-style:none;
    outline:none;
    border:0;
}
body{
    overflow-x:hidden;
    /*background-image: url("bg_tu1.gif");*/
    background-color: #FAEFEFEF;
    /*设置背景图片*/
    /*background-attachment: fixed;*/
}

a:link {
    color:black;
    text-decoration:none;
}

a:visited {
    color:black;
    text-decoration:none;
}

a:hover {
    color: black;
    text-decoration:none;
}

a:active {
    color: black;
    text-decoration:none;
}

/***鼠标悬浮图片旋转360度 begin***/
.xwcms {
    margin: 0 auto;
    margin-top: 25px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:80px;
    height:80px;
    box-shadow:0 0 0 4px #fff;
    float:left;
    margin-left:30px;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
/***鼠标悬浮图片旋转360度 begin***/


/***鼠标悬浮图片旋转360度 begin***/
.xwcms2 {
    margin: 0 auto;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:30px;
    height:30px;
    box-shadow:0 0 0 2px #fff;
    float:left;
    margin-left:5px;
}
body{
    /*background: #EBFFD1;*/
    /*background-image: url("images/tu1.gif");*/
}

.div_header{
    width:1000px;
    height:150px;
    /*background-color: #FA7E3E;*/
    background-color: #FAA862;
    margin:0 auto;
    /*margin-bottom: 3px;*/
}

.logo{
    float:left;
    height:100%;
    width:50%;
    line-height:140px;
    font-size:2.3em;
    color: white;
    font-weight:800;
}
.logo-text{
    margin-left:20px;
    float:left;
}

.right-right-div{
    margin-top: 10px;
    margin-right: 0;
    height:130px;
    width:200px;
    float:right;
    line-height:30px;

}
.p-right-div{
    float:left;
    line-height:5px;
    font-size:1.0em;
    /*color: #EBFFD1;*/
    font-weight:400;

}
.p-right-div-time{
    line-height:140px;
    font-size:1em;
    color: white;
    font-weight:600;
}
.clear{
    clear:both;
    margin-bottom: 0;
}

/* 菜单 */
nav{
    width:1000px;
    height:45px;
    margin:0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    /*background-color: #FA8C2E;*/
    background-color: #FAA862;

}

nav ul{
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
}

nav ul li{
    list-style-type:none;
    float:left; /* 向左漂移，将竖排变为横排 */
    color:white;
    height:45px;
    width:100px;
    text-align:center;
    line-height:45px;
    margin-left:75px;
}

nav ul li:link{
    background: #53868B;
}

nav ul li:hover {
    background-color: white;
}

/*footer*/
footer{
    width:1000px;
    height: 100px;
    background: #FAA862;
    display:block;
    margin:0 auto;
    overflow:hidden;
    text-align:center;
    margin-top:20px;
}
.footer_bottom{
    margin-top: 30px;
}

.div1{
    width: 1000px;
    /*height: 1000px;*/
    margin: 30px auto;
    /*background-color: #FA7E3E;*/
    /*font-family: 微软雅黑;*/
    font-size: 15px;
    text-align: center;
}
.div2{
    width: 1000px;
    /*height: 1000px;*/
    margin: 0 auto;
    /*background-color: white;*/
    /*font-family: 微软雅黑;*/
    font-size: 16px;
    text-align: center;
}
/*文章部分*/
.article_head{

    /*background-color: white;*/
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    margin-left: 0%;
    margin-bottom: 10px;
    /*font-size: 2em;*/
}
.article_head_h{
    margin: 0 auto;
    /*全文总标题*/ text-align: center;
    /*margin-left: 250px;*/
}
.article_h{
    margin-top: 30px;
    color: #0B143D;
}
.article_h2{
    margin-bottom: 10px;
    color: white;
    /*padding: 2px 2px 2px 2px;*/
    background-color: #BA4A3C;
    margin-left: 280px;
    margin-right: 280px;
}
.article_h3{
    margin-bottom: 30px;
    color: #0B143D;
}
.article_h4{
    color: #BA4A3C;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    /*padding: 2px 2px 2px 2px;*/
}
.article_text{
    margin: 20px 10px 10px 10px;
}
.article_P{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: left;
    line-height: 1.5em;
    text-indent: 2em;
    margin: 0.5em 0em 1em 0em
}
.article_P2{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: center;
    line-height: 1.5em;
    text-indent: 2em;
    margin: 0.5em 0em 1em 0em
}
.article_img{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 70%;
}
.article_span{
    color: orangered;
}

tclz

@charset "utf-8";
*{
    font-family: 微软雅黑;
    margin:0;
    padding:0;
    list-style:none;
    outline:none;
    border:0;
}
body{
    overflow-x:hidden;
    /*background-image: url("bg_tu1.gif");*/
    background-color: #FAEFEFEF;
    /*设置背景图片*/
    /*background-attachment: fixed;*/
}

a:link {
    color:black;
    text-decoration:none;
}

a:visited {
    color:black;
    text-decoration:none;
}

a:hover {
    color: black;
    text-decoration:none;
}

a:active {
    color: black;
    text-decoration:none;
}

/***鼠标悬浮图片旋转360度 begin***/
.xwcms {
    margin: 0 auto;
    margin-top: 25px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:80px;
    height:80px;
    box-shadow:0 0 0 4px #fff;
    float:left;
    margin-left:30px;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
/***鼠标悬浮图片旋转360度 begin***/


/***鼠标悬浮图片旋转360度 begin***/
.xwcms2 {
    margin: 0 auto;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:30px;
    height:30px;
    box-shadow:0 0 0 2px #fff;
    float:left;
    margin-left:5px;
}
body{
    /*background: #EBFFD1;*/
    /*background-image: url("images/tu1.gif");*/
}

.div_header{
    width:1000px;
    height:150px;
    /*background-color: #FA7E3E;*/
    background-color: #FAA862;
    margin:0 auto;
    /*margin-bottom: 3px;*/
}

.logo{
    float:left;
    height:100%;
    width:50%;
    line-height:140px;
    font-size:2.3em;
    color: white;
    font-weight:800;
}
.logo-text{
    margin-left:20px;
    float:left;
}

.right-right-div{
    margin-top: 10px;
    margin-right: 0;
    height:130px;
    width:200px;
    float:right;
    line-height:30px;

}
.p-right-div{
    float:left;
    line-height:5px;
    font-size:1.0em;
    /*color: #EBFFD1;*/
    font-weight:400;

}
.p-right-div-time{
    line-height:140px;
    font-size:1em;
    color: white;
    font-weight:600;
}
.clear{
    clear:both;
    margin-bottom: 0;
}

/* 菜单 */
nav{
    width:1000px;
    height:45px;
    margin:0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    /*background-color: #FA8C2E;*/
    background-color: #FAA862;

}

nav ul{
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
}

nav ul li{
    list-style-type:none;
    float:left; /* 向左漂移，将竖排变为横排 */
    color:white;
    height:45px;
    width:100px;
    text-align:center;
    line-height:45px;
    margin-left:75px;
}

nav ul li:link{
    background: #53868B;
}

nav ul li:hover {
    background-color: white;
}

/*footer*/
footer{
    width:1000px;
    height: 100px;
    background: #FAA862;
    display:block;
    margin:0 auto;
    overflow:hidden;
    text-align:center;
    margin-top:20px;
}
.footer_bottom{
    margin-top: 30px;
}

.div1{
     width: 1000px;
     /*height: 1000px;*/
     margin: 30px auto;
     /*background-color: #FA7E3E;*/
     /*font-family: 微软雅黑;*/
     font-size: 15px;
     text-align: center;
 }
.div2{
    width: 1000px;
    /*height: 1000px;*/
    margin: 0 auto;
    /*background-color: white;*/
    /*font-family: 微软雅黑;*/
    font-size: 16px;
    text-align: center;
}
/*文章部分*/
.article_head{

    /*background-color: white;*/
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    margin-left: 0%;
    margin-bottom: 10px;
    /*font-size: 2em;*/
}
.article_head_h{
    margin: 0 auto;
    /*全文总标题*/ text-align: center;
    /*margin-left: 250px;*/
}
.article_h{
    margin-top: 30px;
    color: #0B143D;
}
.article_h2{
    margin-bottom: 30px;
    color: white;
    /*padding: 2px 2px 2px 2px;*/
    background-color: #BA4A3C;
    margin-left: 280px;
    margin-right: 280px;
}
.article_text{
    margin: 20px 10px 10px 10px;

}
.article_P{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: left;
    line-height: 1.5em;
    text-indent: 2em;
    margin: 0.5em 0em 1em 0em
}
.article_P2{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: center;
    line-height: 1.5em;
}
.article_img{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 70%;
}
.article_span{
    color: orangered;
}

zt

@charset "utf-8";
*{
    font-family: 微软雅黑;
    margin:0;
    padding:0;
    list-style:none;
    outline:none;
    border:0;
}
body{
    overflow-x:hidden;
    /*background-image: url("bg_tu1.gif");*/
    background-color: #FAEFEFEF;
    /*设置背景图片*/
    /*background-attachment: fixed;*/
}

a:link {
    color:black;
    text-decoration:none;
}

a:visited {
    color:black;
    text-decoration:none;
}

a:hover {
    color: black;
    text-decoration:none;
}

a:active {
    color: black;
    text-decoration:none;
}

/***鼠标悬浮图片旋转360度 begin***/
.xwcms {
    margin: 0 auto;
    margin-top: 25px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:80px;
    height:80px;
    box-shadow:0 0 0 4px #fff;
    float:left;
    margin-left:30px;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
/***鼠标悬浮图片旋转360度 begin***/


/***鼠标悬浮图片旋转360度 begin***/
.xwcms2 {
    margin: 0 auto;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:30px;
    height:30px;
    box-shadow:0 0 0 2px #fff;
    float:left;
    margin-left:5px;
}
body{
    /*background: #EBFFD1;*/
    /*background-image: url("images/tu1.gif");*/
}

.div_header{
    width:1000px;
    height:150px;
    /*background-color: #FA7E3E;*/
    background-color: #FAA862;
    margin:0 auto;
    /*margin-bottom: 3px;*/
}

.logo{
    float:left;
    height:100%;
    width:50%;
    line-height:140px;
    font-size:2.3em;
    color: white;
    font-weight:800;
}
.logo-text{
    margin-left:20px;
    float:left;
}

.right-right-div{
    margin-top: 10px;
    margin-right: 0;
    height:130px;
    width:200px;
    float:right;
    line-height:30px;

}
.p-right-div{
    float:left;
    line-height:5px;
    font-size:1.0em;
    /*color: #EBFFD1;*/
    font-weight:400;

}
.p-right-div-time{
    line-height:140px;
    font-size:1em;
    color: white;
    font-weight:600;
}
.clear{
    clear:both;
    margin-bottom: 0;
}

/* 菜单 */
nav{
    width:1000px;
    height:45px;
    margin:0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    /*background-color: #FA8C2E;*/
    background-color: #FAA862;

}

nav ul{
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
}

nav ul li{
    list-style-type:none;
    float:left; /* 向左漂移，将竖排变为横排 */
    color:white;
    height:45px;
    width:100px;
    text-align:center;
    line-height:45px;
    margin-left:75px;
}

nav ul li:link{
    background: #53868B;
}

nav ul li:hover {
    background-color: white;
}

/*footer*/
footer{
    width:1000px;
    height: 100px;
    background: #FAA862;;
    display:block;
    margin:0px auto;
    overflow:hidden;
    text-align:center;
    margin-top:20px;
}
.footer_bottom{
    margin-top: 30px;
}

.div1{
    width: 1000px;
    /*height: 1000px;*/
    margin: 30px auto;
    /*background-color: #FA7E3E;*/
    /*font-family: 微软雅黑;*/
    font-size: 15px;
    text-align: center;
}
.div2{
    width: 1000px;
    /*height: 1000px;*/
    margin: 0 auto;
    /*background-color: white;*/
    /*font-family: 微软雅黑;*/
    font-size: 16px;
    text-align: center;
}
/*文章部分*/
.article_head{

    /*background-color: white;*/
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    margin-left: 0%;
    margin-bottom: 10px;
    /*font-size: 2em;*/
}
.article_head_h{
    margin: 0 auto;
    /*全文总标题*/ text-align: center;
    /*margin-left: 250px;*/
}
.article_h{
    margin-top: 30px;
    color: #0B143D;
}
.article_h2{
    margin-bottom: 30px;
    margin-top: 50px;
    color: white;
    /*padding: 2px 2px 2px 2px;*/
    background-color: #BA4A3C;
    /*margin-left: 20px;*/
    width: 200px;
    /*text-align: center;*/
    /*margin-right: 280px;*/
}
.article_h3{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}
.article_text{
    margin: 20px 10px 10px 10px;
}
.article_P{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: left;
    line-height: 1.5em;
    text-indent: 2em;
    margin: 0.5em 0em 1em 0em
}

.article_img{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 60%;
}
.article_span{
    color: black;
}

df

@charset "utf-8";
*{
    font-family: 微软雅黑;
    margin:0;
    padding:0;
    list-style:none;
    outline:none;
    border:0;
}
body{
    overflow-x:hidden;
    /*background-image: url("bg_tu1.gif");*/
    background-color: #FAEFEFEF;
    /*设置背景图片*/
    /*background-attachment: fixed;*/
}

a:link {
    color:black;
    text-decoration:none;
}

a:visited {
    color:black;
    text-decoration:none;
}

a:hover {
    color: black;
    text-decoration:none;
}

a:active {
    color: black;
    text-decoration:none;
}

/***鼠标悬浮图片旋转360度 begin***/
.xwcms {
    margin: 0 auto;
    margin-top: 25px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:80px;
    height:80px;
    box-shadow:0 0 0 4px #fff;
    float:left;
    margin-left:30px;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
/***鼠标悬浮图片旋转360度 begin***/


/***鼠标悬浮图片旋转360度 begin***/
.xwcms2 {
    margin: 0 auto;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    width:30px;
    height:30px;
    box-shadow:0 0 0 2px #fff;
    float:left;
    margin-left:5px;
}
body{
    /*background: #EBFFD1;*/
    /*background-image: url("images/tu1.gif");*/
}

.div_header{
    width:1000px;
    height:150px;
    /*background-color: #FA7E3E;*/
    background-color: #FAA862;
    margin:0 auto;
    /*margin-bottom: 3px;*/
}

.logo{
    float:left;
    height:100%;
    width:50%;
    line-height:140px;
    font-size:2.3em;
    color: white;
    font-weight:800;
}
.logo-text{
    margin-left:20px;
    float:left;
}

.right-right-div{
    margin-top: 10px;
    margin-right: 0;
    height:130px;
    width:200px;
    float:right;
    line-height:30px;

}
.p-right-div{
    float:left;
    line-height:5px;
    font-size:1.0em;
    /*color: #EBFFD1;*/
    font-weight:400;

}
.p-right-div-time{
    line-height:140px;
    font-size:1em;
    color: white;
    font-weight:600;
}
.clear{
    clear:both;
    margin-bottom: 0;
}

/* 菜单 */
nav{
    width:1000px;
    height:45px;
    margin:0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    /*background-color: #FA8C2E;*/
    background-color: #FAA862;

}

nav ul{
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
}

nav ul li{
    list-style-type:none;
    float:left; /* 向左漂移，将竖排变为横排 */
    color:white;
    height:45px;
    width:100px;
    text-align:center;
    line-height:45px;
    margin-left:75px;
}

nav ul li:link{
    background: #53868B;
}

nav ul li:hover {
    background-color: white;
}

/*footer*/
footer{
    width:1000px;
    height: 100px;
    background: #FAA862;;
    display:block;
    margin:0px auto;
    overflow:hidden;
    text-align:center;
    margin-top:20px;
}
.footer_bottom{
    margin-top: 30px;
}

.div1{
    width: 1000px;
    /*height: 1000px;*/
    margin: 30px auto;
    /*background-color: #FA7E3E;*/
    /*font-family: 微软雅黑;*/
    font-size: 15px;
    text-align: center;
}
.div2{
    width: 1000px;
    /*height: 1000px;*/
    margin: 0 auto;
    /*background-color: white;*/
    /*font-family: 微软雅黑;*/
    font-size: 16px;
    text-align: center;
}
/*文章部分*/
.article_head{

    /*background-color: white;*/
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    margin-left: 0%;
    margin-bottom: 10px;
    /*font-size: 2em;*/
}
.article_head_h{
    margin: 0 auto;
    /*全文总标题*/ text-align: center;
    /*margin-left: 250px;*/
}
.article_h{
    margin-top: 30px;
    color: #0B143D;
}
.article_h2{
    margin-bottom: 30px;
    color: white;
    /*padding: 2px 2px 2px 2px;*/
    background-color: #BA4A3C;
    margin-left: 280px;
    margin-right: 280px;
}
.article_h3{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}
.article_text{
    margin: 20px 10px 10px 10px;
}
.article_P{
    font-family: 微软雅黑;
    color: #585859;
    font-size: 1.2em;
    font-weight: 100;
    text-align: left;
    line-height: 1.5em;
    text-indent: 2em;
    margin: 0.5em 0em 1em 0em
}

.article_img{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 70%;
}
.article_span{
    color: black;
}

完整文件

link

@玉面小蛟龙
关注
  • 30
    点赞
  • 踩
  • 162
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
php网站制作作业源码
07-30
这是php网站作业源码，是用pbootcms框架制作的，自带管理后台，pbootcms只得用于练习，不能用于商用，
web网页制作期末大作业
11-17
在本项目中，"web网页制作期末大作业"是一个典型的Web开发学习任务，涉及到的核心技术是HTML、CSS和JavaScript，这三者构成了网页制作的基础。下面将分别详细讲解这三个技术及其在网页制作中的作用。 HTML...
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
网页设计与制作
03-12 779
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
基于PHP+mysql实现美食网站网页的设计演示【附项目源码+论文说明】
螺旋翻转大大雄
06-15 864
人们生活水平的不断提高，日常生活中人们对美食的关注和意识也在不断提高，对于浏览美食网站的人数更是不断增加，使得基于PHP美食网站网页的设计的开发成为必需而且紧迫的事情。基于PHP美食网站网页的设计主要是借助计算机，通过对基于PHP美食网站网页的设计所需的信息管理，增加用户的选择，同时也方便对广大用户信息的及时查询、修改以及对用户信息的及时了解。基于PHP美食网站网页的设计，在基于PHP美食网站网页的设计首页可以查看首页、特色美食、国外美食、论坛、个人中心、后台管理等内容，如图5-1所示。
web网页设计期末课程大作业 基于HTML仿淘宝电商网站项目的设计与实现 企业网站制作
最新发布
STU网页设计
06-06 368
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
PHP程序设计网页设计,html简介及php网页程序设计.ppt
weixin_30596151的博客
04-15 84
html简介及php网页程序设计实验习题 ACM目录_相关链接.htm 相关链接 Online Judge Virtual Judge RecentContest 训练计划 /a> 做题统计 ACM论坛 ACM校赛 ACM省赛 ACM协会 实验...
基于PHP的简易教务管理系统
专注PHP源码
01-12 4151
前言 项目包部署 Q 1115487855 交流群：758350964 一 项目介绍 本套学生选课信息管理系统基于PHP7 / MySQL编写，部署简易，功能强大，上手简单。 系统界面，逻辑简单。可搭建在phpstudy下,实现快速部署。 二 主要功能 1 学生管理(增删改查学生信息) 2 奖惩管理(记录学生奖惩信息) 3 学院管理(增删改查) 4 课程管理(课程信息，学生选课) 打印报表 5 考试管理(学生成绩记录，补考重修等) 6 用户管理，修改密码 三 系统界面 以上为部分截图 四 系统源码
html简单网页代码：个人设计web前端大作业——HTML+CSS华为官网首页
wx___BJ050106的博客
12-22 836
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
网页期末大作业（含期末报告）
06-10
大学生网页设计期末大作业，含期末报告（讲述每个网页的作用及实现过程），实现了登陆注册，文件上传下载功能，留言板、图片轮播功能，代码简单，网页时尚，个人原创作品！ 本网页是一个类似时尚芭莎的网页，含下拉...
Web前端网页期末大作业
01-10
主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片放到pic文件夹中，背景音乐放到music文件夹中。
HTML+CSS课程设计大一网页期末大作业
08-28
希望大家能结合自己的主题，和我的页面布局及结构，顺利地完成自己的网页期末大作业或者HTML5课设，如果在学习过程有什么不理解不明白的地方也可以私信我，看到的话第一时间会给予及时的回复的，我会尽自己的所能给...
php大作业.zip
07-01
php大作业缘分测试网页，连上数据库就能用，不过纯属娱乐，切勿当真
个人php大作业.zip
06-17
，使用方法： 1.将studyweb文件拷贝至服务器目录中； 2.将study.sql数据库文件导入数据库中； dbtype //数据库类型 dbhost //主机名 dbuser //用户名 dbpass //密码 dbname //数据库名 def //数据库前缀 charset //数据库编码 timezone //时间规范
php大作业
03-30
主要是用php做的一个个人网站，包括增删改查等一些基本功能.
系统辨识期末大作业
06-29
系统辨识理论及应用 期末大作业 有matlab代码和实验内容
html+php实现个人博客网站（超高分作业）毕业设计
12-11
功能说明 未登录用户：仅可以浏览所有博客的内容。 已登录用户：1、浏览所有博客的内容；2、发表博客；3、删除自己的博客；4、修改自己的博客；5、在任一博客下评论；6、修改昵称和密码。 管理员：1、可以执行普通用户的所有功能；2、修改任一博客的内容；3、删除任一博客；4、删除任一用户。 网站平台功能补充说明：1、动态显示博客信息（如当前所有博客数量，用户个人博客数量，以及博客内容信息）；2、博客和评论发表的时间遵循北京时间；3、登录时只要输入账号密码即可，后台会自动判断该账号为普通用户还是管理员，进而推送到对应的网页。 ———————————————— 原文链接：https://blog.csdn.net/qq_44186838/article/details/118391048（附带超详细的运行说明）
前端网页期末大作业（品优购）
06-28
在“前端网页期末大作业（品优购）”这个项目中，我们可以了解到前端开发的一些关键知识点，包括HTML、CSS、JavaScript以及网页布局等。 1. HTML：HyperText Markup Language（超文本标记语言）是网页的基础结构...
个人设计web前端大作业——HTML+CSS华为官网首页
html精品源码
01-05 667
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
HTML网页设计制作大作业（div+css）基于web在线汽车网站的设计与实现 (宝马轿车介绍)
qq_524614081的博客
01-10 907
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web期末网页设计大作业
12-13
Web期末网页设计大作业是一项需要学生使用HTML和CSS技术来设计和制作网页的任务。通常，老师会提供一些主题或要求，学生需要根据这些要求来设计和制作网页。在设计和制作网页的过程中，学生需要考虑网页的布局、颜色、字体、图片、链接等方面，以及网页的响应式设计，以确保网页在不同设备上都能够正常显示。此外，学生还需要注意代码的规范性和可读性，以便其他人能够理解和修改代码。 如果你需要参考一些网页设计的模板或者教程，可以在网上搜索相关资源。同时，你也可以参考一些优秀的网页设计作品，从中学习和借鉴一些设计思路和技巧。最后，不要忘记在完成作业后进行测试和调试，以确保网页的正常运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@玉面小蛟龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值