Demo-2（豆瓣）

最新推荐文章于 2021-02-14 18:32:07 发布

荒原芒果

最新推荐文章于 2021-02-14 18:32:07 发布

阅读量212

点赞数

分类专栏： demo 文章标签：浏览器标签

本文链接：https://blog.csdn.net/qq_36683228/article/details/53242399

版权

demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近的时间都拿来练习吧
这一个页面有个关于定位和浏览器的问题有点弄不清楚
就是nav设置最小宽度与主体内容宽度等宽（与豆瓣小组相同），希望右侧的标签不会跟随浏览器宽度变窄而向左，始终靠右保持在nav的最小宽度里面，但是没能实现，有点昏…

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"/>
    <title>豆瓣</title>
</head>
<body>
<header>
    <!--顶部head-->
    <div class="link">
        <ul class="left">
            <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="#">FM</a></li>
            <li><a href="#">东西</a></li>
            <li><a href="#">市集</a></li>
            <li><a href="#">更多</a></li>
        </ul>
        <ul class="right">
            <li class="code"><a href="#">下载豆瓣客户端</a>
                <div class="code-box">
                    <img src="pic/db-logo.jpg" alt="db-logo" class="db-logo"/>
                    <h1>豆瓣</h1>
                    <p>我们的精神角落</p>
                    <img src="pic/erweima.png" alt="erweima" class="erweima"/>
                    <a href="#">iPhone</a>
                    <p>·</p>
                    <a href="#">Android</a>
                </div>

            </li>
            <li><a href="#">提醒</a></li>
            <li><a href="#">豆邮</a></li>
        </ul>
        <div class="code">

        </div>
    </div>
    <!--常规head 包含搜索框-->
    <nav>
        <div class="bg">
            <div class="head">
                <ul>
                    <li><a href="#">
                        <img src="pic/logo.png" alt="logo"/></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>
                        <input type="text" placeholder="搜索你感兴趣的内容和人..."/>
                        <a href="#" class="search"><i></i></a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
</header>
<div class="clear"></div>
<div class="content">
    <!--左侧内容-->
    <div class="contentL">
        <!--内容发布标签-->
        <div class="share">
            <ul>
                <li>
                    <a href="#"><i></i> 说句话</a>
                </li>
                <li>
                    <a href="#"><i></i> 发照片</a>
                </li>
                <li>
                    <a href="#"><i></i> 推荐网页</a>
                </li>
                <li>
                    <a href="#"><i></i> 写日记</a>
                </li>
                <li>
                    <a href="#"><i></i> 发布东西</a>
                </li>
                <li>
                    <!--<i></i>-->
                    <a href="#"><i></i> 首页设置</a>
                </li>
            </ul>
            <div class="clear"></div>
            <div class="input">
                <input type="text" placeholder="分享生活点滴..."/>
                <a href="#"><i class="photo"></i></a>
                <a href="#"><i class="sharp"></i></a>
            </div>
        </div>
        <!--主要内容-已发布-->
        <div class="news">
            <div class="userhead">
                <a href="#"><i></i></a>
            </div>
            <div class="box">
                <div class="username">
                    <a href="#">Violet 的日记:</a>
                </div>
                <div class="article">
                    <div class="text">
                        <h2><a href="#">
                            怪力八面体——胡夫金字塔
                        </a></h2>
                        <p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p>
                        <a href="#" class="like"><i></i> 喜欢</a>
                    </div>
                    <div class="pic">
                            <img src="pic/picture.jpg" alt=""/>
                    </div>
                </div>
                <div class="from">
                    <p>一小时前，来自 <a href="#">精选热门</a></p>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="userhead">
                <a href="#"><i></i></a>
            </div>
            <div class="box">
                <div class="username">
                    <a href="#">Violet 的日记:</a>
                </div>
                <div class="article">
                    <div class="text">
                        <h2><a href="#">
                            怪力八面体——胡夫金字塔
                        </a></h2>
                        <p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p>
                        <a href="#" class="like"><i></i> 喜欢</a>
                    </div>
                    <div class="pic">
                        <img src="pic/picture.jpg" alt=""/>
                    </div>
                </div>
                <div class="from">
                    <p>一小时前，来自 <a href="#">精选热门</a></p>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="userhead">
                <a href="#"><i></i></a>
            </div>
            <div class="box">
                <div class="username">
                    <a href="#">Violet 的日记:</a>
                </div>
                <div class="article">
                    <div class="text">
                        <h2><a href="#">
                            怪力八面体——胡夫金字塔
                        </a></h2>
                        <p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p>
                        <a href="#" class="like"><i></i> 喜欢</a>
                    </div>
                    <div class="pic">
                        <img src="pic/picture.jpg" alt=""/>
                    </div>
                </div>
                <div class="from">
                    <p>一小时前，来自 <a href="#">精选热门</a></p>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="userhead">
                <a href="#"><i></i></a>
            </div>
            <div class="box">
                <div class="username">
                    <a href="#">Violet 的日记:</a>
                </div>
                <div class="article">
                    <div class="text">
                        <h2><a href="#">
                            怪力八面体——胡夫金字塔
                        </a></h2>
                        <p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p>
                        <a href="#" class="like"><i></i> 喜欢</a>
                    </div>
                    <div class="pic">
                        <img src="pic/picture.jpg" alt=""/>
                    </div>
                </div>
                <div class="from">
                    <p>一小时前，来自 <a href="#">精选热门</a></p>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="userhead">
                <a href="#"><i></i></a>
            </div>
            <div class="box">
                <div class="username">
                    <a href="#">Violet 的日记:</a>
                </div>
                <div class="article">
                    <div class="text">
                        <h2><a href="#">
                            怪力八面体——胡夫金字塔
                        </a></h2>
                        <p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p>
                        <a href="#" class="like"><i></i> 喜欢</a>
                    </div>
                    <div class="pic">
                        <img src="pic/picture.jpg" alt=""/>
                    </div>
                </div>
                <div class="from">
                    <p>一小时前，来自 <a href="#">精选热门</a></p>
                </div>
            </div>
        </div>
        <!--翻页-页码-->
        <div class="pages">
            <ul>
                <li><a href="#">＜前页</a></li>
                <li><a href="#">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="#">...</a></li>
                <li><a href="#">后页＞</a></li>
            </ul>
        </div>
    </div>
    <!--右侧内容-->
    <div class="contentR">
        <div class="first">
            <h2>豆瓣正在发生······</h2>
            <a href="#">哈利·波特第八部全球同步上架</a>
            <a href="#">China Joy优秀游戏鉴赏</a>
        </div>
        <div class="second">
            <img src="pic/news.jpg" alt=""/>
            <a href="#">>申请创建小站</a>
            <img src="pic/code.png" alt=""/>
        </div>
        <div class="third">
            <div>
                <h2>热门活动······</h2><span>（<a href="#">换一个</a>）</span>
            </div>
            <div class="hd">
                <a href="#">给我看看你们的美好工作台吧~</a>
                <p>时间：6月27日-8月26日</p>
                <p>参加：266人参加</p>
                <div class="hd-p"></div>
            </div>
            <a href="#" class="hd-a">>更多线上活动</a>
        </div>
        <div class="fourth">
            <div>
                <h2>豆瓣一拍一······</h2><span>（<a href="#">换一个</a>）</span>
            </div>
            <div>
                <div class="nice"></div>
                <div class="fourth-t">
                    <a href="#">很高兴遇见你</a>
                    <p>城市：厦门</p>
                    <p>价格：2400</p>
                </div>
            </div>
            <div>
                <div class="wei"></div>
                <div class="fourth-t">
                    <a href="#">微套系 | 至真系列</a>
                    <p>城市：北京</p>
                    <p>价格：1480</p>
                </div>
            </div>
            <div class="clear"></div>
            <a href="#">>已开发17个城市</a>
        </div>
        <div class="fifth">
            <img src="pic/news.jpg" alt=""/>
        </div>
    </div>
</div>
<div class="clear"></div>
<footer>
    <div class="about">
        <ul class="copyright">
            <li>
                <p>&copy; 2005 - 2016 douban.com,all rights reserved 北京豆网科技有限公司</p>
            </li>
        </ul>
        <ul class="other">
            <li><a href="#">关于豆瓣</a></li>
            <li><span>·</span><a href="#">在豆瓣工作</a></li>
            <li><span>·</span><a href="#">联系我们</a></li>
            <li><span>·</span><a href="#">免责声明</a></li>
            <li><span>·</span><a href="#">帮助中心</a></li>
            <li><span>·</span><a href="#">移动应用</a></li>
            <li><span>·</span><a href="#">豆瓣广告</a></li>
        </ul>
    </div>
</footer>


</body>
</html>

*{
    padding: 0;
    margin: 0;
    font-family: Arial, "Microsoft Yahei";
}
ul li{
    list-style: none;
}
a{
    text-decoration: none;
}
input{
    outline: none;
    border: 1px solid #e5e5e5;
}
.clear{
    clear: both;
}

header .link{
    width: auto;
    background: #545454;
    overflow: hidden;
}
header .left{
    float: left;
}
header .right{
    float: right;
    position: absolute;
    right: 0;
}
header ul li{
    float: left;
}
header .link a{
    font-size: 12px;
    /*font-weight: bold;*/
    line-height: 28px;
    color: #e5e5e5;
    padding: 0 12px;
}
header .link a:hover{
    color: #ffffff;
}
header .code-box{
    display: none;
    width: 248px;
    height: 500px;
    border: 1px solid #e5e5e5;
    border-top: none;
    background-color: #fff;
    text-align: center;
}
.code:hover .code-box{
    position: absolute;
    display: block;
    left: -71px;
    z-index: 2;
}
.code-box .db-logo{
    display: block;
    width: 110px;
    margin: 60px auto 0;
}
.code-box .erweima{
    display: block;
    width: 172px;
    margin: 12px auto 0;
}
.link .code-box h1{
    font-weight: lighter;
    font-size: 24px;
    margin-top: 20px;
}
.link .code-box a{
    color: #3377bb;
    padding: 0;
    font-size: 12px;
    line-height: 32px;
}
.link .code-box p{
    display: inline;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: 4px;
}
.link .code-box a:hover{
    color: #3377bb;
}


nav .bg{
    width: 100%;
    background-color: #edf4ed;
}
nav .head{
    position: relative;
    width: 950px;
    margin: auto;
    /*outline: 1px solid;*/
    overflow: hidden;
}
nav .head ul li a{
    font-size: 16px;
    color: #2b8e3a;
    line-height: 74px;
    margin: auto 12px;
}
nav .head a:hover{
    color: #fff;
    background-color: #2b8e3a;
}
nav .head img{
    vertical-align: middle;
}
.head ul li:last-child{
    float: right;
    line-height: 74px;
}
.head input{
    width: 250px;
    height: 30px;
    text-indent: 8px;
}
.search{
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    right: -12px;
    bottom: 21px;
}
.search i{
    position: absolute;
    display: block;
    width: 14px;
    height: 14px;
    left: 8px;
    top: 8px;
    background-image: url("pic/search.png");
}
.content{
    width: 950px;
    margin: 50px auto;
    /*outline: 1px solid;*/
}
.contentL{
    width: 604px;
    float: left;
}
.share ul li{
    float: left;
    margin-right: 20px;
}
.share ul li a{
    color: #3377bb;
    line-height: 16px;
    font-size: 14px;
}
.share ul li:last-child a{
    color: #cecece;
}
.share ul li:hover a{
    color: #000;
}
.share ul li:last-child{
    float: right;
    margin-right: 0;
}
.share ul li i{
    display: inline-block;
    width: 19px;
    height: 16px;
    vertical-align: middle;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
}
.share ul li:nth-child(1) i{
    background-position: 0 -98px;
}
.share ul li:nth-child(2) i{
    background-position: 0 -38px;
}
.share ul li:nth-child(3) i{
    background-position: 0 -8px;
}
.share ul li:nth-child(4) i{
    background-position: 0 -129px;
}
.share ul li:nth-child(5) i{
    background-position: 0 -158px;
}
.share ul li:last-child i{
    width: 12px;
    height: 12px;
    background-image: url("pic/set.png");
}
.input{
    position: relative;
}
.input input{
    display: block;
    width: 602px;
    height: 30px;
    margin-top: 8px;
    text-indent: 8px;
}
.input i{
    display: inline-block;
    width: 19px;
    height: 16px;
    /*outline: 1px solid;*/
    background-image: url("pic/icon.png");
}
.photo{
    position: absolute;
    top: 9px;
    right: 36px;
    background-position: 0 -38px;
}
.sharp{
    position: absolute;
    top: 9px;
    right: 12px;
    background-position: 0 -68px;
}
.news{
    width: 604px;
    height: 240px;
    margin: 24px 0;
    /*outline: 1px solid;*/
}
.userhead{
    float: left;
}
.userhead i{
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("pic/head.jpg");
}
.box{
    float: right;
    width: 516px;
    height: 239px;
    /*outline: 1px solid;*/
    border-bottom: 1px solid #e5e5e5;
}
.username a{
    position: relative;
    font-size: 14px;
    left: -20px;
    color: #000;
}
.article{
    width: 472px;
    height: 128px;
    padding: 16px 24px 16px 20px;
    background-color: #f9f9f9;
    margin-top: 8px;
    margin-bottom: 12px;
}
.text{
    position: relative;
    width: 340px;
    height: 128px;
    /*outline: 1px solid;*/
    float: left;
}
.text h2{
    line-height: 14px;
    font-size: 14px;
    width: auto;
    font-weight: normal;
}
.text h2 a{
    color: #3377bb;
}
.text h2:hover a{
    color: #fff;
    background-color: #3377bb;
}
.text p{
    font-size: 12px;
    line-height: 16px;
    margin-top: 8px;
    color: #414141;
}
.like{
    position: absolute;
    display: inline-block;
    width: 52px;
    height: 22px;
    background: none;
    /*outline: 1px solid;*/
    border: 1px solid #bababa;
    border-radius: 2px;
    bottom: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #000;
}
.text i{
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    /*outline: 1px solid;*/
    background-image: url("pic/ic_actions.png");
}
.text a:hover i{
    background-position: 0 -20px;
}
.pic{
    float: right;
    margin-top: 8px;
}
.pic img{
    height: 60px;
}
.from p{
    color: #bababa;
    font-size: 14px;
    margin-top: 12px;
    margin-left: 20px;
}
.from a{
    color: #999999;
    font-size: 14px;
}
.from a:hover{
    color: #fff;
    background-color: #3377bb;
}

.contentR{
    width: 250px;
    float: right;
}
.contentR a {
    font-size: 12px;
    line-height: 18px;
    color: #3377bb;
}
.contentR a:hover{
    color: #fff;
    background-color: #3377bb;
}
.contentR h2{
    font-size: 16px;
    color: #2b8e3a;
    margin-bottom: 18px;
}
.contentR p{
    color: #999999;
    font-size: 12px;
    line-height: 18px;
}
.first{
    width: 218px;
    height: 82px;
    padding: 18px 16px;
    background-color: #f2f7f6;
    border-radius: 4px;
    margin-bottom: 20px;
}
.first a{
    font-size: 14px;
    line-height: 26px;
}
.second img{
    width: 250px;
}
.second a{
    display: inline-block;
    margin: 40px 0;
}
.third{
    width: 100%;
    margin: 30px 0;
}
.third h2,span{
    display: inline-block;
}
.third span{
    font-size: 12px;
}
.third .hd-a{
    display: inline-block;
    margin-top: 16px;
}
.third .hd{
    position: relative;
    width: 100%;
}
.third .hd-p{
    position: absolute;
    width: 48px;
    height: 30px;
    top: 0;
    right: 0;
    background-color: #95825C;
}
.fourth{
    width: 100%;
    margin: 30px 0 16px;
}
.fourth h2,span{
    display: inline-block;
}
.fourth span{
    font-size: 12px;
}
.nice{
    float: left;
    width: 120px;
    height: 80px;
    background-color: #F3BFA1;
    margin: 8px 0;
}
.wei{
    float: left;
    width: 120px;
    height: 80px;
    background-color: #18171C;
    margin: 8px 0 16px;
}
.fourth-t{
    float: right;
    width: 120px;
    height: 80px;
    margin: 8px 0;
}
.fifth{
    width: 100%;
    margin: 8px 0;
}

.pages{
    width: 604px;
    margin: auto;
    /*text-align: center;*/
}
.pages ul{
    text-align: center;
}
.pages ul li{
    display: inline;
    /*float: left;*/
}
.pages a{
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    color: #3377bb;
    margin: 0 4px;
}
.pages ul li:first-child a{
    width: auto;
    color: #bababa;
}
.pages ul li:last-child a{
    width: auto;
}
.pages ul li:hover a{
    color: #fff;
    background-color: #83BF73;
}
footer{
    position: relative;
    margin: 64px auto 0;
    width: 950px;
    font-size: 12px;
    bottom: 8px;
}
footer .about{
    display: block;
    /*height: 30px;*/
    padding: 8px 0 24px;
    border-top: 1px dashed #bababa;
}
footer .copyright{
    float: left;
    color: #999999;
}
footer .other{
    float: right;
}
.other li{
    float: left;
}
.other span{
    text-align: center;
    width: 10px;
    color: #999999;
}
.other a{
    color: #3377bb;
}
.other a:hover{
    background-color: #3377bb;
    color: #fff;
}

荒原芒果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo-2（豆瓣）

最近的时间都拿来练习吧这一个页面有个关于定位和浏览器的问题有点弄不清楚就是nav设置最小宽度与主体内容宽度等宽（与豆瓣小组相同），希望右侧的标签不会跟随浏览器宽度变窄而向左，始终靠右保持在nav的最小宽度里面，但是没能实现，有点昏…<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel=
复制链接

扫一扫