码迷，mamicode.com
首页 > Web开发 > 详细

html网页练习豆瓣网

时间：2019-03-20 01:13:28      阅读：191      评论：0      收藏：0      [点我收藏+]

标签：img   ack   top   ott   color   设置   ibus   读书   图片   

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" >
                </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" >
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容2 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" >
                </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" >
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容3 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" >
                </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" >
                        </div> -->
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 重复样式内容4 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" >
                </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" >
                        </div>
                    </div>
                    <!-- 发布时间 -->
                    <p>1小时前，来自&nbsp;热门精选</p>
                </div>
            </div>
            <!-- 最后一个内容栏 -->
            <div class="cont">
                <!-- 图片 -->
                <div>
                    <img src="../img/img4.jpg" >
                </div>
                <!-- 右侧 -->
                <div>
                    <!-- 顶部署名 -->
                    <div>
                        <p>Lorem</p>
                    </div>
                    <!-- 下部内容 -->
                    <div class="minCont">
                        <!-- 三行文字 -->
                        <div class="wid">
                            <div class="fourImg">
                                <img src="../img/img3.jpg" >
                                <img src="../img/img3.jpg" >
                                <img src="../img/img3.jpg" >
                                <img src="../img/img3.jpg" >
                            </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" ></a></div>
            <div><p><a href="#">&gt;申请创建小站</a></p></div>
            <div><a href="#"><img src="../img/erweima.png" ></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" ></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" ></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" ></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);}

 

html网页练习豆瓣网

标签：img   ack   top   ott   color   设置   ibus   读书   图片   

原文地址：https://www.cnblogs.com/zhuxinpeng-looking/p/10562428.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
迷上了代码！