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. linux 查看当前系统版本号

    为避免现场未能完全安装系统,使用yum 安装版本需一致 第一种方法: [root@sky9896sky]# lsb_release -a bash:lsb_release: command not f ...

  2. Thrift-0.10.0 CenOS 7 编译错误 error: expected ')' before 'PRIu32'

    Thrift-0.10.0 CenOS 7 编译错误 error: expected ')' before 'PRIu32' 在编译Thrift的时候,无论是Apache官网tar包,还是Github ...

  3. node.js 调用第三方服务

    node作为客户端调用第三方服务   nodejs.cn/api 1. let http = require('http'); let util = require("util") ...

  4. Google - Reconstruct To Chain

    /* 4. 给你一串input,比如: A -> B B -> C X -> Y Z -> X . . . 然后让你设计一个data structure来存这些关系,最后读完了 ...

  5. Linux系统时钟的更改

    linux系统时钟有两个,一个是硬件时钟,即BIOS时间,就是我们进行CMOS设置时看到的时间,另一个是系统时钟,是linux系统Kernel时间. 查看.设置硬件时间: 查看系统硬件时钟 hwclo ...

  6. lavarel mongo 操作

    本人使用环境   Ubuntu 18.04 LTS php7.2 lavarel5.5 mongodb的安装 mongodb 服务的安装   这个链接中有最全面最新的安装文档 https://docs ...

  7. 【mybatis】之trim

    <trim prefix="where" prefixOverrides="where" suffixOverrides="and"& ...

  8. mysql优化-数据库优化、SQL优化

    我有一张表w1000,里面有1000万条数据,这张表结构如下:CREATE TABLE `w1000` ( `id` varchar(36) NOT NULL, `name` varchar(10) ...

  9. java web 三大核心组件Filter

    Filter 过滤: 定义: 过滤器是客户端与服务端之间的一道网,可以对请求的数据进行拦截和修改,同时也可以对,响应数据进行拦截和修改

  10. [NOI2011]智能车比赛 (计算几何 DAG)

    /* 可以发现, 最优路径上的所有拐点, 基本上都满足一定的性质, 也就是说是在矩形上的拐角处 所以我们可以把他们提出来, 单独判断即可 由于我们提出来的不超过2n + 2个点, 我们将其按照x坐标排 ...