1.效果图
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PM百科</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div class="header-top">
<div class="layout">
<a class="logo" href="#"></a>
<div class="header-tools">
<div class="header-menu">
<ul>
<li><p>投稿邮箱:2652859321@qq.com</p></li>
<li><a href="#"><p>邮箱订阅</p></a></li>
<li><a href="#"><p>RSS订阅</p></a></li>
<li><a href="#"><p>登录</p></a></li>
</ul>
</div>
<div class="search">
<form>
<input type="text" placeholder="请输入关键字进行搜索...">
<button type="submit" class="btn-search">搜索</button>
</form>
</div>
</div>
</div>
</div>
<div class="navbar">
<div class="layout">
<ul>
<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>
<li><a href="#">工具下载</a> </li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="layout">
<div class="article">
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="article-list">
<a href="#"><img class="article-img" src="assets/images/miali.jpg"></a>
<div class="article-text">
<a class="article-title" href="#">为什么大家都等着看小米和阿里的笑话？</a>
<ul>
<li><p>发布日期：2016年01月01日</p></li>
<li><p class="highlight">标签：</p><a href="#">PM</a><p class="highlight">,</p><a href="#"> 产品经理</a><p class="highlight">,</p><a href="#"> 软件</a></li>
<li><p>点击:</p><p class="highlight">1697次</p> </li>
</ul>
<h5>最近中国两大互联网公司小米和阿里巴巴似乎都遇到了些麻烦，“好事不出门，坏事传千里”，媒体的争锋相对，哗众取宠，似乎揭了别人短才足以彰显自己的锐利。鲁迅、茅于轼都有深刻的揭示中国人的那些心理，似乎“见不得别人过的比自己好，...</h5>
</div>
</div>
<div class="page-table">
<ul>
<li><a href="#" class="active">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
<li><a href="#">6</a> </li>
<li><a href="#">7</a> </li>
<li><a href="#">8</a> </li>
<li><a href="#">9</a> </li>
<li><a href="#">10</a> </li>
<li><a href="#">下一页</a> </li>
<li><a href="#">最后一页</a> </li>
</ul>
</div>
</div>
<div class="side">
<div class="rss-box">
<ul>
<li><a class="sinaweibo" href="http://www.baidu.com" target="_blank">新浪微博</a> </li>
<li><a class="tengxunweibo" href="#" target="_blank">腾讯微博</a> </li>
<li><a class="qq" href="#" target="_blank">QQ</a> </li>
<li><a class="renren" href="#" target="_blank">人人</a> </li>
<li><a class="email" href="#" target="_blank">邮件</a> </li>
<li><a class="rss" href="#" target="_blank">rss</a> </li>
</ul>
<form>
<input class="email-box" type="text" placeholder="输入邮箱订阅本站">
<button class="btn-sure" type="submit">订阅</button>
</form>
</div>
<div class="hot">
<div class="hot-tables">
<ul>
<li><a class="active" href="#">最新文章</a> </li>
<li><a href="#">热门文章</a> </li>
<li><a href="#">随机推荐</a> </li>
</ul>
</div>
<div class="hot-list">
<div class="new-article">
<ul>
<li><a class="title-point" href="#">为什么大家都等着看小米和阿里的笑话？</a> </li>
<li><a class="title-point" href="#">互联网产品经理常用软件及工作平台</a> </li>
<li><a class="title-point" href="#">微信5.0的深度体验，腾讯的野心暴露无遗</a> </li>
<li><a class="title-point" href="#">我要吐槽百度新闻客户端安卓版</a> </li>
<li><a class="title-point" href="#">第31次中国互联网发展报告：中国互联网...</a> </li>
<li><a class="title-point" href="#">八个移动产品设计必备网站</a> </li>
<li><a class="title-point" href="#">猫扑、拉手、凡客、九城2013将会离我们...</a> </li>
<li><a class="title-point" href="#">那些年人人网错过的需求，被这些创业者...</a> </li>
<li><a class="title-point" href="#">如何尝试做一款互联网产品</a> </li>
<li><a class="title-point" href="#">产品经理相关书籍下载大全</a> </li>
</ul>
</div>
<div class="hot-article"></div>
<div class="random-article"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="spread">
<div class="layout">
<div class="spread-link">
<ul>
<li class="link-header">友情链接:</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>
</div>
<div class="about">
<div class="layout">
<div class="footer-link">
<ul>
<li><a class="sitemap" href="#">Sitemap</a> </li>
<li><a class="baidumap" href="#">百度地图</a> </li>
<li><a class="googlemap" href="#">谷歌地图</a> </li>
<li><a class="mianze" href="#">免责声明</a> </li>
</ul>
</div>
<div class="footer-text">
<p>本站内容仅供观摩学习交流之用，将不对任何资源负法律责任,如有侵犯您的版权,请及时联系我们更改。</p>
<p>投稿/联系：2652859321@qq.com(注明来自PM百科)</p>
<p>Copyright © 2012-2018 PMBAIKE.COM. 站长统计</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
body{
background-color: #f3f3f3;
}
a{
text-decoration: none;
}
.layout{
1000px;
margin: 0 auto;
}
.clearfix{
overflow: hidden;
}
#header{
100%;
height: 150px;
background-color: #3e92ce;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}
.header-top{
height: 112px;
border-bottom: 2px solid #ffffff;
}
.header-top .logo{
background-image: url("../assets/images/logo.png");
background-repeat: no-repeat;
380px;
height: 80px;
margin-top: 30px;
float: left;
}
.header-tools{
float: right;
}
.header-menu{
margin-top: 10px;
}
.header-menu ul li{
list-style: none;
display: inline-block;
padding: 0px 10px;
border-right: 1px solid rgba(255,255,255,0.6);
}
.header-menu ul li:last-of-type{
border-right: none;
}
.header-menu p{
color: #ffffff;
font-size: 12px;
}
.header-menu a{
color: #ffffff;
font-size: 12px;
}
.header-tools .search{
margin-top: 30px;
float: right;
}
.search input{
display: inline-block;
height: 36px;
padding-left: 10px;
padding-right: 80px;
border: 1px solid #2e7fb9;
border-radius: 4px 0px 0px 4px;
background-color: #fcfcfc;
position: relative;
left: 8px;
}
.search input:focus{
color: #000000;
border: 1px solid #f17c33;
background-color: #ffffff;
}
.search .btn-search{
display: inline-block;
height: 38px;
margin-left: 0px;
padding: 0px 20px;
color: #ffffff;
border-radius: 0px 4px 4px 0px;
background-color: #08609f;
border: 1px solid #08609f;
}
.search .btn-search:hover{
background-color: #044675;
}
.navbar{
height: 36px;
line-height: 36px;
}
.navbar ul li{
text-decoration: none;
display: inline-block;
padding: 0px 20px;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar ul li:last-of-type{
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar ul li:hover{
background-color: rgba(0, 0, 0, 0.05);
}
.navbar ul li a{
color: #ffffff;
}
#content{
margin-top: 16px;
margin-bottom: 20px;
}
.article{
float: left;
708px;
}
.article-list{
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
padding: 15px;
overflow: hidden;
margin-bottom: 10px;
}
.article-list .article-img{
background-color: #ffffff;
border: 1px solid #dfdfdf;
padding: 4px;
145px;
float: left;
}
.article-list .article-img:hover{
border: 1px solid #3592d5;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
.article-text{
margin-left: 175px;
}
.article-text .article-title{
color: #000000;
font-size: 18px;
font-weight: 900;
}
.article-text .article-title:hover{
color: #ff6600;
}
.article-text ul li{
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px solid #dcdcdc;
padding: 0px 10px;
font-size: 12px;
}
.article-text ul li:first-of-type{
padding-left: 0px;
}
.article-text ul li:last-of-type{
border-right: none;
}
.article-text li p{
display: inline-block;
color: #666666;
}
.article-text .highlight{
color: #ff6600;
}
.article-text li a{
color: #000000;
}
.article-text li a:hover{
color: #ff6600;
}
.article-text h5{
font-size: 12px;
color: #7e7e7e;
line-height: 20px;
font-weight: 100;
}
.page-table{
margin: 40px 0px;
padding-left: 100px;
}
.page-table ul li{
text-decoration: none;
display: inline-block;
}
.page-table ul li a{
padding: 5px 10px;
border: 1px solid #a8a8ee;
color: #727272;
font-size: 10px;
margin-left: 2px;
border-radius: 18px;
}
.page-table ul li a:hover{
border: 1px solid #f28d32;
color: #f50400;
}
.page-table a.active{
border: 1px solid #f28d32;
color: #f50400;
}
.side{
276px;
float: right;
}
.side .rss-box{
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
padding: 10px 4px;
}
.rss-box ul li{
text-decoration: none;
display: inline-block;
}
.rss-box ul li a{
display: block;
background-image: url("../assets/images/contact.png");
40px;
height: 40px;
text-indent: -99999px;
}
.rss-box li a.sinaweibo{
background-position: 0 -120px;
}
.rss-box li a.tengxunweibo{
background-position: 0 -80px;
}
.rss-box li a.qq{
background-position: 0 -160px;
}
.rss-box li a.renren{
background-position: 0 0px;
}
.rss-box li a.email{
background-position: 0 -40px;
}
.rss-box li a.rss{
background-position: 0 -200px;
}
.rss-box .email-box{
margin: 8px 0px;
padding: 0px 70px 0px 8px;
display: inline-block;
height: 24px;
position: relative;
left: 4px;
}
.rss-box .btn-sure{
height: 28px;
padding:0px 10px;
background-color: #c0c0c0;
color: #000000;
display: inline-block;
margin-left: 0px;
border: 1px solid #cccccc;
}
.side .hot{
background-color: #ffffff;
border: 1px solid #dedede;
margin-top: 10px;
padding: 0px;
clear: both;
}
.hot .hot-tables{
padding: 0px;
background-color: #e6e6e6;
}
.hot-tables ul li{
text-decoration: none;
display: inline-block;
}
.hot-tables ul li a{
background-color: #e6e6e6;
display: block;
color: #000000;
87px;
height: 36px;
line-height: 36px;
text-align: center;
font-weight: bold;
}
.hot-tables ul li{
border-right: 1px solid #d2d2d2;
}
.hot-tables ul li:last-of-type{
border-right: none;
}
.hot-tables a.active{
background-color: #3991d0;
color: #ffffff;
}
.new-article{
background-color: #ffffff;
}
.hot-list{
padding: 5px;
}
.new-article ul li{
text-decoration: none;
display: block;
padding: 5px;
border-bottom:1px dashed #cdcdcd;
}
.new-article ul li:last-of-type{
border-bottom:none;
}
.new-article ul li a{
font-size: 10px;
color: #000000;
}
.new-article ul li a:hover{
color: #ff6600;
}
.new-article li .title-point{
background-image: url("../assets/images/newAirtl_icon.png");
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
overflow: hidden;
}
#footer{
clear: both;
}
.spread{
background-color: #ffffff;
height: 62px;
border: 1px solid #dcdcdc;
}
.spread .spread-link{
text-align: center;
line-height: 62px;
}
.spread-link ul li{
text-decoration: none;
display: inline-block;
}
.spread-link ul li a{
color: #000000;
font-size: 14px;
padding: 0px 8px;
}
.spread-link ul li a:hover{
color: #ff6600;
}
.spread-link .link-header{
font-size: 14px;
font-weight: bold;
color: #ff6600;
}
.about{
background-color: #3991d0;
height: 160px;
}
.footer-link{
text-align: center;
padding: 30px;
}
.footer-link ul li{
text-decoration: none;
display: inline-block;
}
.footer-link ul li a{
background-image: url("../assets/images/ft_nav.png");
background-repeat: no-repeat;
color: #ffffff;
padding: 10px 10px 10px 32px;
font-size: 14px;
display: inline-block;
}
.footer-link .sitemap {
background-position: 0px 2px;
}
.footer-link .baidumap {
background-position: 0px -28px;
}
.footer-link .googlemap {
background-position: 0px -58px;
}
.footer-link .mianze {
background-position: 0px -88px;
}
.footer-text{
text-align: center;
}
.footer-text p{
font-size: 10px;
color: rgba(255,255,255,0.8);
line-height: 20px;
}
写的重复语句有点多，还得继续学习