console 命令行工具 X clear

console

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

<body class="HolyGrail">
  <header> <h1>热门歌手简介</h1> </header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">
      <div class="polaroid">
  <img src="http://image.cnwest.com/attachement/jpg/site1/20100122/002564a32cd30cc354f541.jpg" alt="Norway" style="width:100% ">
  <div class="container">
    <h2>Jay</h2>
  </div>
 </div>
    </main>
    <nav class="HolyGrail-nav">
    <div id="content" >
 <div id="text">
   <h2>基本信息</h2>
   </div>
  <p>姓名：周杰伦<p>
  <p>外文名：Jay</p>
  <p>别名：周董</p>
  <p>血型：o型</p>
  <p>国籍：中国</p>
  <p>身高：175cm</p>
  <p>星座：摩羯座</p>
  <p>民族：汉族</p>
  <p>主要成就：</p>
  <p>生日：1979年1月18日</p>
  </div>  
    </nav>
    <aside class="HolyGrail-ads">
      <h3>周杰伦出生于台湾省新北市，祖籍福建省永春县。周杰伦4岁的
 时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴。周杰伦读初中二年级时，他的父母因性格不合离婚，而周杰伦则归母亲叶惠美抚养。中考时，周杰伦没有考上普通高中；同年，他因为擅长钢琴而被淡江中学第一届音乐班录取。高中毕业以后，他两次报考台北大学音乐系均没有被录取，于是他开始在一家餐馆打工。</h3>
<h3>1997年9月，周杰伦在父亲的鼓励下报名参加了台北星光电视台的娱乐节目《超级新人王》，并在节目中邀人演唱了自己创作的歌曲《梦有翅膀》。当主持人吴宗宪看到这首歌曲的曲谱后，就邀请周杰伦到阿尔发音乐公司担任音乐助理。1998年，他创作了歌曲《眼泪知道》，在公司把这首歌曲给刘德华以后却被退歌；而他为张惠妹创作的歌曲《双截棍》也被退回.</h3>
    </aside>
  </div>
  <div id="flip">Jay chou</div>
<div id="panel">欢迎来到jay的简介</div>
  <footer>
    <button><a href="http://jsrun.net/UtkKp/show">返回首页</a></button></footer>

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-self:center;
}
header
{
   text-shadow: 5px 5px 5px #FF0000;
}
header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;

}

.HolyGrail-content {
  flex: 1;
   flex-direction: column;
   padding-right:550px;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 30em;
   flex-grow:1;
}
.HolyGrail-ads
{
  text-indent:35px
}
.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
   flex-grow:1;
}
.polaroid 
{
  width:500px;
    box-shadow: 0 4px 8px 0  rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
   flex-grow:2;

}
.container
{
  padding:10px;
}
#text{
  margin-left:0px;
  margin-right:250px;
  border-bottom-width:0 0 2px 0;
  border-bottom-style:solid;
  border-bottom-color:red;
  height:30px;
  font-size:20;
}
.content
{
  text-align: center;
}
#panel,#flip
{
  margin:10px auto;
	padding:5px;
	text-align:center;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}

本项目引用的自定义外部资源

jquery.min.js