html网页练习豆瓣网

html

</head>
<body>
    <!-- 头部 -->
    <header class="header1">
        <!-- 左侧 -->
        <div>
<a href="#">豆瓣</a>
            <a href="#">读书</a>
            <a href="#">电影</a>
            <a href="#">音乐</a>
            <a href="#">同城</a>
            <a href="#">小组</a>
            <a href="#">阅读</a>
            <a href="#">FM</a>
            <a href="#">东西</a>
            <a href="#">市集</a>
            <a href="#">更多</a>
        </div>
        <!-- 右侧 -->
        <div>
            <a href="#">下载豆瓣客户端</a>
            <a href="#">提醒</a>
            <a href="#">豆邮</a>
        </div>
    </header>
    <header class="header2">
        <!-- 左侧 -->
        <div><img src="../img/logo.png"></div>
        <!-- 中间 -->
        <div>
            <a href="#">首页</a>
            <a href="#">我的豆瓣</a>
            <a href="#">浏览发现</a>
            <a href="#">移动应用</a>
            <a href="#">游戏</a>
            <a href="#">线上活动</a>
        </div>
        <!-- 右侧 -->
        <div>
            <a href="#"><i></i></a>
            <input type="text" placeholder="搜索你感兴趣的人">
        </div>
    </header>
    <!-- 内容 -->
    <article>
        <!-- 左侧 -->
        <div>
            <!-- icon标签 -->
            <div class="icon_1">
                <a href="#"><i></i>说句话</a>
                <a href="#"><i></i>发照片</a>
                <a href="#"><i></i>推荐网页</a>
                <a href="#"><i></i>写日记</a>
                <a href="#"><i></i>发布东西</a>
                <a href="#"><i></i>首页设置</a>
            </div>
            <!-- input -->
            <div class="icon_2">
                <input type="text" placeholder="分享生活点滴...">
                <a href="#"><i></i></a>
                <a href="#"><i></i></a>
            </div>
            <!-- 重复样式内容1 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div>
                            <h2>Lorem ipsum dolor sit.</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
                            <button><i></i>喜欢</button>
                        </div>
                        <!-- 图片 -->
                        <div>
                            <img src="../img/img3.jpg" alt="">
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容2 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div>
                            <h2>Lorem ipsum dolor sit.</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
                            <button><i></i>喜欢</button>
                        </div>
                        <!-- 图片 -->
                        <div>
                            <img src="../img/img3.jpg" alt="">
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容3 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div class="wid">
                            <h2>Lorem ipsum dolor sit.</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
                            <button><i></i>喜欢</button>
                        </div>
                        <!-- 图片 -->
                        <!-- <div>
                            <img src="../img/img3.jpg" alt="">
                        </div> -->
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容4 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div>
                            <h2>Lorem ipsum dolor sit.</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
                            <button class="button_1"><i></i>喜欢</button>
                            <span>标签：</span>
                            <a href="#">人文</a>
                            <a href="#">摄影</a>
                            <a href="#">成长</a>
                            <a href="#">教育</a>
                            <a href="#">儿童</a>
                        </div>
                        <!-- 图片 -->
                        <div>
                            <img src="../img/img3.jpg" alt="">
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 最后一个内容栏 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div class="wid">
                            <div class="fourImg">
                                <img src="../img/img3.jpg" alt="">
                                <img src="../img/img3.jpg" alt="">
                                <img src="../img/img3.jpg" alt="">
                                <img src="../img/img3.jpg" alt="">
                            </div>
                            <h2>Lorem ipsum dolor sit.</h2>
                            <button class="button_1"><i></i>喜欢</button>
                            <span>标签：</span>
                            <a href="#">人文</a>
                            <a href="#">摄影</a>
                            <a href="#">成长</a>
                            <a href="#">教育</a>
                            <a href="#">儿童</a>
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 翻页 -->
            <div class="bottoms">
                <a class="fanYe" href="#">&lt;前页</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">7</a>
                <a href="#">8</a>
                <a href="#">9</a>
                <a href="#">...</a>
                <a class="fanYe" href="#">后页&gt;</a>
            </div>
        </div>
        <!-- 右侧 -->
        <div>
            <!-- 豆瓣正在发生 -->
            <div class="con-left-1">
                <h3>豆瓣正在发生</h3>
                <p><a href="#">Lorem ipsum dolor sit.</a></p>
                <p><a href="#">ipsum dolor sit.</a></p>
            </div>
            <div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
            <div><p><a href="#">&gt;申请创建小站</a></p></div>
            <div><a href="#"><img src="../img/erweima.png" alt=""></a></div>
            <!-- 活动热门 -->
            <div class="join">
                <h3 class="sameH3">热门活动.....<span>（</span><a href="#">换一个</a><span>）</span></h3>
                <a href="#"><p>给我看看你们美好工作台吧~</p></a>
                <p>时间：2019.3.16</p>
                <p>参加：30人参加</p>
            </div>
            <div><a href="#"><p>&gt;更多上线活动</p></a></div>
            <!-- 一拍一 -->
            <div class="play">
                <h3 class="sameH3">豆瓣一拍一.....<span>（</span><a href="#">更多</a><span>）</span></h3>
                <!-- 图1 -->
                <div class="pic">
                    <div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
                    <div>
                        <p><a href="#">很高兴遇见你</a></p>
                        <p>城市：厦门</p>
                        <p>价格：2400</p>
                    </div>
                </div>
                <!-- 图2 -->
                <div></div>
                <div class="pic">
                        <div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
                        <div>
                            <p><a href="#">很高兴遇见你</a></p>
                            <p>城市：厦门</p>
                            <p>价格：2400</p>
                        </div>
                    </div>
            </div>
            <div><a href="#"><p>&gt;已开放17个城市</p></a></div>
            <di><a href="#"><img src="../img/img1.jpg" alt=""></a></di>
        </div>
    </article>
    <!-- 页脚 -->
    <footer>
        <div><p>&copy;2015-2019</p></div>
        <div>
            <p><a href="#">关于豆瓣</a></p>
            <p><a href="#">在豆瓣工作</a></p>
            <p><a href="#">联系我们</a></p>
            <p><a href="#">免责声明</a></p>
            <p><a href="#">帮助中心</a></p>
            <p><a href="#">移动应用</a></p>
            <p><a href="#">豆瓣广告</a></p>
        </div>
    </footer>
</body>
</html>
 
 
 
css
p,h2{
    margin: 0;
}
a{
    text-decoration: none;
}
/* 头部 */
/* 导航栏1 */
.header1{
    height: 28px;
    background-color: rgb(84, 86, 82);
}
.header1>div>a{
    color: rgb(210, 210, 210);
    float: left;
    font-size: 12px;
    margin-left: 24px;
    line-height: 28px;
}
.header1>div>a:first-child{margin-left: 24px;}
.header1>div:last-child>a{float:right;}
.header1>div:last-child>a:first-child{margin-right:177px;}
/* 导航栏2 */
.header2{
    height: 74px;
    background-color: rgb(237, 344, 237);
    position: relative;
}
.header2>div{
    float: left;
    line-height: 74px;
}
.header2>div:first-child{
    margin-left:238px;
}
.header2>div:nth-child(2)>a{
    font-size: 16px;
    color: rgb(0, 119, 34);
    margin-left: 24px;
}
.header2>div:nth-child(2)>a:first-child{
    margin-left: 27px;
}
.header2>div:nth-child(3){
    margin: 0 237px 0 34px;
}
.header2 input::-webkit-input-placeholder{

    height: 30px;
    font-size: 12px;
    color: rgb(129, 129, 129);
    padding-left: 5px;
}
.header2 i{
    display: inline-block;
    background-image: url("../img/icon1.png");
    background-position:-2px -8px;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 29px;
    right: 260px;
}
/* 内容左侧 */
article{
    width: 950px;
    margin: auto;
    margin-top: 50px;
    overflow: hidden;
}
article i{
    display: inline-block;
    background-image: url("../img/icon1.png");
    width: 15px;
    height: 15px;
}
article>div:first-child{
    width: 604px;
    float: left;
}
/* icon标签 */
.icon_1{
    width: 100%;
    margin-bottom: 8px;
}
.icon_1>a{
    font-size: 14px;
    color: rgb(68, 126, 173);
    margin-right:20px;
}
.icon_1>a:last-child{
    color: rgb(170, 170, 170);
    margin-left: 50px;
}
.icon_1>a>i{
    background-position: -2px -8px;
    margin-right: 4px;
    position: relative;
    top:2px;
}
.icon_1>a:first-child>i{
    background-position: -2px -99px;
}
.icon_1>a:nth-child(4)>i{
    background-position: -2px -129px;
}
.icon_1>a:nth-child(5)>i{
    background-position: -2px -159px;
}
.icon_1>a:nth-child(6)>i{
    background-position: -2px -69px;
}
.icon_2{
    position: relative;
    margin-bottom: 24px;
}
.icon_2>a>i{
    position: absolute;
    background-position: -2px -8px;
    display: inline;
    bottom: 5px;
    background-image: url("../img/icon1.png");
}
.icon_2>a:nth-child(2)>i{
    right: 15px;
    background-position: -2px -39px;
}
.icon_2>a:last-child>i{
    right: 35px;
    background-position: -2px -69px;
}
article>div>div:nth-child(2)>input::-webkit-input-placeholder{
    height: 30px;
    font-size: 14px;
    color:rgb(170, 170, 170);
    padding-left:5px;
}
article>div>div:nth-child(2)>input{
    width: 600px;
}
/* 重复内容样式 */
.cont{
    width: 100%;
    overflow: hidden;
}
.cont h2{
    color: rgb(68, 126, 173);
    font-size: 14px;
}
.cont p{
    font-size: 12px;
    color: rgb(85, 85, 85);
}
.cont>div{
    float: left;
}
.cont>div:last-child{
    border-bottom: 1px solid rgb(229, 229, 229);
    width: 512px;
    margin:0 0 12px 20px;
}
.cont>div:last-child>div:first-child{
    margin-bottom: 10px;
}
.cont>div:last-child>p:last-child{
    margin-left: 10px;
}
.minCont{
    overflow: hidden;
    background-color: rgb(249, 249, 249);
    padding: 16px 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.minCont>div:first-child{
    float: left;
    width: 384px;
}
.minCont>div:last-child>img{
    width: 107px;
    height: 60px;
    float: right;
}
button{
    font-size: 12px;
    width: 55px;
    height: 22px;
    margin: 16px 15px 0 0;
}
button>i{
    display: inline-block;
    background-image: url("../img/icon2.png");
    width: 12px;
    height: 12px;
    background-position: 0 -20px;
    margin-right: 3px;
    position: relative;
    top: 1px;
}
.cont>div:last-child>p{
    color: rgb(213, 213, 213);
    margin-bottom: 26px;
}
.wid{width: 100% !important;}
.fourImg>img{
    width: 117px;
    height: 117px;
}
.minCont>div>span{
    color: rgb(213, 213, 213);
    font-size: 12px;
    padding: 0 0 0 15px;
    border-left: 2px solid rgb(213, 213, 213);
}
.minCont>div>a{
    color: rgb(213, 213, 213);
    font-size: 12px;
    margin-right: 10px;
}
/* 翻页 */
.bottoms{
    font-size: 12px;
    width: 384px;
    margin: auto;
    margin-bottom: 63px;
}
.bottoms>a{
    color: rgb(68, 126, 173);
    margin-right: 5px;
    padding: 0 6px;
}
.bottoms>a:hover{
    background-color: rgb(131, 191, 115);
    color: white;
}
.bottoms>a:first-child{
    font-size: 14px;
    color: rgb(170, 170, 170);
    padding: 0;
}
.bottoms>a:first-child:hover{background-color: transparent;}
.bottoms>a:last-child{
    font-size: 14px;
    color: rgb(170, 170, 170);
    padding: 0;
}
.bottoms>a:last-child:hover{background-color: transparent;}
/* 内容右侧 */
article>div:last-child a,p{
    font-size: 12px;
    color: rgb(68, 126, 173);
}
article>div:last-child h3{
    font-size: 16px;
    color: rgb(0, 119, 34);
}
article>div:last-child{
    width: 250px;
    float: right;
}
article>div:last-child>div{
    margin-bottom: 30px;
}
article>div:last-child>div:first-child{
    background-color: rgb(242, 247, 246);
    padding: 20px 18px;
    line-height: 2;
}
article>div:last-child>div:first-child>h3{
    margin: 0;
}
article>div:last-child>div:nth-child(4)>a>img{
    width: 100%;
}
.sameH3>span{
    font-size: 12px;
    color: black;
}
.sameH3 >a{
    font-size: 12px;
    color: rgb(68, 126, 173);
}
.join>p:nth-child(3){
    color: rgb(153, 153, 153);
}
.join>p:nth-child(4){
    color: rgb(153, 153, 153);
    margin-bottom: 16px;
}
.pic{
    overflow: hidden;
    margin-bottom: 10px;
}
.pic>div{
    float: left;
}
.pic>div:last-child{
    margin-left: 15px;
    line-height: 1.5;
}
.pic>div:last-child>p:nth-child(2){color: rgb(153, 153, 153);}
.pic>div:last-child>p:nth-child(3){color: rgb(153, 153, 153);}
.pic>div>a>img{
    width: 120px;
    height: 80px;
}
/* 页脚 */
footer{
    width: 950px;
    height: 44px;
    overflow: hidden;
    margin: auto;
    border-top:1px dashed rgb(221, 221, 221);
}
footer>div{line-height: 44px;}
footer>div:first-child{float: left;}
footer>div:first-child>p{color:rgb(153, 153, 153);}
footer>div:last-child{float: right;}
footer>div:last-child>p{
    float: left;
    margin-right: 15px;
}
footer>div:last-child>p>a{color: rgb(68, 126, 173);}

 

posted @ 2019-03-20 00:30  代码狂魔2019  阅读(841)  评论(0)  编辑  收藏  举报