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

html网页练习豆瓣网的更多相关文章

  1. 003.[python学习] 简单抓取豆瓣网电影信息程序

    声明:本程序仅用于学习爬网页数据,不可用于其它用途. 本程序仍有很多不足之处,请读者不吝赐教. 依赖:本程序依赖BeautifulSoup4和lxml,如需正确运行,请先安装.下面是代码: #!/us ...

  2. selenium请求豆瓣网

    #请求豆瓣网 from selenium import webdriverimport timedriver = webdriver.Chrome() driver.get("http:// ...

  3. WiFi-ESP8266入门http（3-4）网页一键配网（1若为普通wifi直连 2若为西电网页认证自动网页post请求连接）+网页按钮灯控+MQTT通信

    网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信 工程连接:https://github.com/Dongvdong/ESP8266_H ...

  4. 识别图片验证码的三种方式(scrapy模拟登陆豆瓣网)

    1.通过肉眼识别,然后输入到input里面 from PIL import image Image request.urlretrieve(url,'image')  #下载验证码图片 image = ...

  5. python爬虫实战（四）--------豆瓣网的模拟登录（模拟登录和验证码的处理----scrapy）

    在利用scrapy框架爬各种网站时,一定会碰到某些网站是需要登录才能获取信息. 这两天也在学习怎么去模拟登录,通过自己码的代码和借鉴别人的项目,调试成功豆瓣的模拟登录,顺便处理了怎么自动化的处理验证码 ...

  6. 爬取豆瓣网图书TOP250的信息

    爬取豆瓣网图书TOP250的信息,需要爬取的信息包括:书名.书本的链接.作者.出版社和出版时间.书本的价格.评分和评价,并把爬取到的数据存储到本地文件中. 参考网址:https://book.doub ...

  7. 仿豆瓣网（电脑版网页）HTML+CSS实现

    步骤一:将豆瓣电脑版网页以图片形式保存下来: 利用了chrome里面的插件: 步骤二:将图片放置到PS中,研究布局: 我将其分为header部分,banner部分,section部分,footer部分 ...

  8. Python -- 网络编程 -- 抓取网页图片 -- 豆瓣妹子

    首先分析页面URL,形如http://dbmeizi.com/category/[1-14]?p=[0-476] 图片种类对应编号: 1:'性感', 2:'有沟', 3:'美腿', 4:'小露点', ...

  9. Python3爬取豆瓣网电影信息

      # -*- coding:utf-8 -*- """ 一个简单的Python爬虫, 用于抓取豆瓣电影Top前250的电影的名称 Language: Python3.6 ...

随机推荐

  1. 第七十八课 最短路径（Dijkstra）

    核心思想是从已知的最短路径推算未知的最短路径. 添加程序: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include ...

  2. java 环形链表实现约瑟夫（Joseph）问题

    约瑟夫问题又名丢手绢问题.相传著名犹太历史学家 Josephus 利用其规则躲过了一场自杀游戏,而后投降了罗马. 问题: 已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.* 从编号为 ...

  3. Kafka 术语

    什么是Kafka? Apache Kafka是一个分布式流媒体平台,允许你发布和订阅记录流,允许你以容错方式存储记录流,允许你处理数据流.或是说Kafka是一个分布式.支持分区.多副本的,基于zook ...

  4. 缓慢拒绝服务攻击- slowloris.pl

    How use Slowloris   Requirements: # sudo apt-get update # sudo apt-get install perl # sudo apt-get i ...

  5. UBUNTU中使用pip安装，提示cannt import main问题

    在pip==8.1.1版本中,使用pip install Django==1.8.16时,提示 Traceback (most recent call last):  File "/usr/ ...

  6. Linux touch命令详解

    Linux touch命令 Linux touch命令用于修改文件或者目录的时间属性,包括存取时间和更改时间.若文件不存在,系统会建立一个新的文件. 用法: touch [-acfm][-d<日 ...

  7. Spring Boot - 配置介绍

    Spring Boot 针对常用的开发场景提供了一系列自动化配置来减少原本复杂而又几乎很少改动的模板配置内容,但是,我们还是需要了解如何在Spring Boot中修改这些自动化的配置,以应对一些特殊场 ...

  8. Linux之cp、rm、mv

    cp.rm.mv 命令功能: 复制文件或目录 命令格式: cp [OPTION]... [-T] SOURCE DEST cp [OPTION]... SOURCE... DIRECTORY cp [ ...

  9. ThreadLocal的学习

    一 用法ThreadLocal用于保存某个线程共享变量:对于同一个static ThreadLocal,不同线程只能从中get,set,remove自己的变量,而不会影响其他线程的变量.1.Threa ...

  10. 将Long类型转为字母数字组合的jar包---Hashids

    在设计数据库时,我有时喜欢使用自增Id,而不是uuid,但是在面对终端用户时,直接暴露id不是一个好的行为. 经过查询,可以使用 Hashids 这个jar包将id转为类似YouTube的大小写字母和 ...