码迷，mamicode.com
首页 > 其他好文 > 详细

临摹PM百科写的一个页面

时间：2016-01-08 23:46:06      阅读：572      评论：0      收藏：0      [点我收藏+]

标签：

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;
}

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

 

临摹PM百科写的一个页面

标签：

原文地址：http://www.cnblogs.com/xinjiebi/p/5115065.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！