<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名人名言页面</title>
<link href="css/Page_248_4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--导航栏-->
<div class="container">
<div class="top">
<h1>名人名言</h1>
<p><em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </em></p>
<ul class="list">
<li class="firsta"><a href="#">登录</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">名人名言</a></li>
<li><a href="#">英文名言(English)</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="middle">
<!--左边部分-->
<div class="left">
<!--心理学经典名言-->
<div class="first">
<h3 class="title1">心理学经典名言的智慧</h3>
<p>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久
弥香，它总是能给人们带来心灵的滋养。
</p>
</div>
<p class="firstp">创造力（creativity）有两个词根：Crera拉丁语的意思是“去
创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现
的能力。
</p>
<p>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去
实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的
能力。
</p>
<p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
<!---->
<h3 class="title2">作者简介</h3>
<p class="secondp">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人
生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴
趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他
们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一
点。
</p>
<p>
如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人
生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴
趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他
们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一
点。
</p>
<p>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>
<div class="pic">
<h4 class="title3"><em>赞助广告</em></h4>
<img src="img1/ad_2.jpg" />
</div>
</div>
<!--右边部分-->
<div class="right">
<h4 class="title4"><em>赞助广告</em></h4>
<img src="img1/ad.jpg" />
<h4 class="title5"><em>搜索</em></h4>
<!--搜索框-->
<input type="text" placeholder="点击搜索" />
<h4 class="title6"><em>标签</em></h4>
<p><em>
60年语录 《犯罪心理》 世间百态 二十四史传统
名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗
语录 历史 友谊爱情 古代格言 名人名言 名人随语
教子立人 新闻事件 李白 爱情语录 韩寒语录
</em>
</p>
</div>
</div>
<!--底部-->
<div class="bottom">
<h1>Copyright?2004-2017 京东JD.com 版权所有</h1>
</div>
</div>
</body>
</html>
//CSS样式
body{
margin: 0px auto;
background:pink;
}
.container{
/*border:1px solid black;*/
width: 880px;
overflow: hidden;
margin: 0px auto;
background: white;
}
.top,.middle,.bottom{
border:1px dashed gray;
}
/*头部样式*/
.top{
/*防止父级元素的塌陷*/
overflow: hidden;
border: none;
}
.top h1{
margin-top: 10px;
margin-bottom: 10px;
}
.top p{
font-weight: normal;
font-size: 12px;
color: #7d7d95;
margin-bottom: 25px;
}
.top ul{
list-style: none;
}
.top ul li{
float: left;
}
.top ul li a{
display: block;
color: #7d7d95;
font-size: 10px;
/*border-bottom:1px solid #cccccc ;*/
border-right: 1px solid #cccccc ;
border-top:1px solid #cccccc ;
text-decoration: none;
padding: 10px;
}
.top ul .firsta a{
border-left: 1px solid #cccccc ;
}
a:hover{
color:white;
background: black;
}
/*内容样式*/
/*左边部分*/
.middle{
overflow: hidden;
padding-top: 20px;
padding-bottom: 30px;
}
.middle .left{
width: 60%;
float: left;
/*margin-left: 20px;*/
}
.middle .left ,.first{
border:1px solid #cccccc;
padding-left: 10px;
/*margin-top: 20px;*/
/*padding-top: 20px;*/
}
.middle{
border: none;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}
.middle .left {
border: none;
}
.middle .left .first .title1{
margin-top: 10px;
margin-bottom: 0px;
font-size: 14px;
}
.middle .left .first p{
font-size: 10px;
line-height: 15px;
margin-top: 5px;
margin-bottom: 5px;
}
.middle .left p{
font-size: 10px;
line-height: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.middle .left .firstp{
font-weight: bold;
margin-top: 10px;
}
.middle .left .title2{
border:1px solid #cccccc;
margin-top:0px;
margin-bottom: 0px;
font-size: 14px;
}
.middle .left .secondp{
font-weight: bold;
margin-top: 10px;
}
.middle .left .title3{
font-weight: normal;
font-size: 12px;
margin-bottom: 10px;
}
.middle .left .pic{
border: 1px solid #cccccc;
}
.middle .left .pic img{
display: block;
margin-bottom: 5px;
}
/*右边部分*/
.middle .right{
width: 35%;
border: 1px solid #cccccc;
float: right;
padding-left: 20px;
/*margin-left: 0px;*/
}
.middle .right .title4,.title5,.title6{
font-weight: normal;
font-size: 12px;
margin-bottom: 10px;
}
.middle .right .title5,.title6{
margin-top: 10px;
}
.middle .right img{
display: inline-block;
}
.middle .right p{
font-size: 10px;
font-weight: normal;
line-height: 20px;
}
.bottom{
border: none;
}
.bottom h1{
color:#666666;
font-size: 10px;
font-weight: normal;
padding-left: 350px;
}
