临摹PM百科写的一个页面

最新推荐文章于 2025-09-04 13:10:17 发布

转载最新推荐文章于 2025-09-04 13:10:17 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinjiebi/p/5115065.html

文章标签：

#产品运营

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{
    width: 1000px;
    margin: 0 auto;
}

.clearfix{
    overflow: hidden;
}

#header{
    width: 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;
    width: 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;
    width: 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;
    width: 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{
    width: 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");
    width: 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;
    width: 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;
}

写的重复语句有点多，还得继续学习

转载于:https://www.cnblogs.com/xinjiebi/p/5115065.html