吉软-人文精英-第五次作业

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            li{
                list-style: none;
            }
            /* 顶部表单*/
            .top_form{
                width: 1346px;
                height: 55px;
                background-color: #fff;
                border-bottom: 1px solid #ebebeb;
                position: fixed;
                z-index:2;
            }
            /* 顶部表单左边部分*/
            .top_form_left{
                width: 950px;
                height: 47px;
                float: left; 
            }
            .top_form_left ul{
                float: left;
            }
            .top_form_left ul li{
                float: left;
                list-style: none;
                
            }
            .left_1{
                margin: 8px 0 0 50px;
            }
            .left_2{
                margin: 11px 0 0 8px;
            }
            /* 顶部表单右边部分*/
            .top_form_right{
                width: 288px;
                height: 16px;
                float:left; 
                margin-top: -25px;   
                margin-left: 1063px; 
                line-height: 12px;
            }
            .top_form_right a{
                color: #333;
                font-size: 12px;
            }
            .n1{
                margin: 0 7px;
            }
            .n2{
                margin: 0 15px;
            }
            /* 下拉图标*/
            .icon{
                display: inline-block;
                width: 14px;
                height: 14px;
                position: absolute;
                margin-top: 1px;
                margin-left: 2px;
                background: url("images/xaila.png") no-repeat -408px -144px;
            }
            /* 中间内容部分*/
            .content{
                width: 1212px;
                height: 940px;
                margin-left: 40px;
            }
            .content_left{
                width: 538px;
                height: 800px;
                margin: 70px 0 0 120px;
                position: absolute;
            }
            /* 搜索第一个结果*/
            .c1{
                width: 538px;
                height: 109px;
                margin-bottom: 15px;
            }
            /* 搜索第二个结果*/
            .c2{
                width: 538px;
                height: 85px;
                margin-bottom: 15px;
            }
            /* 搜索第三个结果*/
            .c3{
                width: 538px;
                height: 109px;
                margin-bottom: 15px;
            }
            /* 搜索第五个结果*/
            .c4{
                width: 538px;
                height: 109px;
                margin-bottom: 15px;
            }
            /* 搜索第五个结果*/
            .c5{
                width: 538px;
                height: 109px;
                margin-bottom: 15px;
            }
            /* 搜索关键字变红*/
            em {
                font-style: normal;
                color: #c00;
            }
            span{
                display: block;
            }
            /* 内容标题*/
            .t {
                height: 24px;
                   font-weight: 400;
                font-size: medium;
                margin-bottom: 1px;
            }
            /* 搜索第一、三、四、五个内容标题下文字图片板块*/
            .c1_brief,.c4_brief,.c3_brief,.c5_brief{
                width: 120px;
                height: 80px;
                margin-top: 6px;            
            }
            /* 搜索第二个内容标题下文字图片板块*/
            .c2_brief{
                width: 538px;
                height: 40px;
                font-size: 13px;
                background-color: #fff;
            }
            /* 搜索第二个内容来源及百度快照链接*/
            .c2_site{
                width: 538px;
                height: 20px;
                margin-top: -5px;
                background-color: #fff;
            }
            /* 内容简介板块*/
            .b1{
                font-size: 13px;
                margin-left: 140px;
                margin-top: -80px;
                width: 397px;
                height: 60px;
                line-height: 19px;
                background-color: #fff;
            }
            /* 内容来源及百度快照链接*/
            .b2{
                width: 397px;
                height: 20px;
                margin-top: -4px;
                margin-left: 140px;
                background-color: #fff;
            }
            /* 搜索内容来源*/
            .a1{
                color: green;
                text-decoration: none;
                   font-size: 13px;
            }
            /* 百度快照链接*/
            .a2{
                color: #666;
                font-size: 13px;
            }

        </style>
    </head>
    <body>
        <!-- 顶部表单-->
        <div class="top_form">
            <!-- 顶部表单左边部分-->
            <div class="top_form_left">
                <ul>
                    <li class="left_1">
                        <a href="#" target="_blank">
                            <img src="images/baidu_logo.png" height="33" width="101" alt="图片">
                        </a>
                    </li>
                    <li class="left_2">
                        <img src="images/baidu_button.png" height="36" width="641" alt="图片">
                    </li>
                </ul>
            </div>
            <!-- 顶部表单右边部分-->
            <div class="top_form_right">
                <a href="#" target="_blank" class="n1">百度首页</a>
                <a href="#" target="_blank" class="n1">消息</a>
                <a href="#" target="_blank" class="n2">设置
                    <i class="icon"></i>
                </a>
                <a href="#" target="_blank" class="n2">173******67
                    <i class="icon"></i>
                </a>
            </div>
        </div>
        <!-- 搜索到的内容-->
        <div class="content">
            <div class="content_left">
                <!-- 搜索到的第一个内容-->
                <ul class="c1">
                    <li>
                     <!-- 内容标题-->
                        <h3 class="t">
                            <a href="#" target="_blank">
                                <em>欧文</em>43+11,詹姆斯忍不住发推盛赞,众媒体:真爱
                            </a>
                        </h3>
                    </li>
                    <!-- 内容图片-->
                    <span class="c1_brief">
                        <a href="#" target="_blank">
                            <img src="images/u=3978269578,2858071799&fm=85&app=58&f=JPG.jpg" height="75" width="121" alt="图片">
                        </a>
                    </span>
                    <!-- 内容简介-->
                    <li class="b1">9小时前 - 这场比赛,也可以说是11届双雄欧文和伦纳德之间的对决!伦纳德送出31分15板,而德鲁大叔更是爆砍43分11助攻。其一,43分是个人本赛季得分新高;其二,这...
                    </li>
                    <!-- 内容来源及百度快照链接-->
                    <li class="b2">
                        <a href="#" target="_blank" class="a1">https://baijiahao.baidu.com/s?...</a>
                        <a href="#" target="_blank" class="a2">-百度快照</a>
                    </li>
                </ul>
                <!-- 搜索到的第二个内容-->
                <ul class="c2">
                    <li>
                        <!-- 内容标题-->
                        <h3 class="t">
                            <a href="#" target="_blank">
                                <em>欧文</em>4究竟有多好看! ! !
                            </a>
                        </h3>
                    </li>
                    <!-- 内容简介-->
                    <li class="c2_brief">
                        相信,拥有一双欧文鞋是不少篮球爱好者的梦想与情怀。 自欧文一代到现在的欧文4,球迷鞋迷一路走来,情比金...
                    </li>
                    <!-- 内容来源及百度快照链接-->
                    <li class="c2_site">
                        <a href="#" target="_blank" class="a1">https://baijiahao.baidu.com/s?...</a>
                        <a href="#" target="_blank" class="a2">-百度快照</a>
                    </li>

                </ul>
                <!-- 搜索到的第三个内容-->
                <ul class="c3">
                    <li>
                        <!-- 内容标题-->
                        <h3 class="t">
                            <a href="#" target="_blank">
                                <em>欧文</em>和库里谁的综合实力更强,对比结果令人尴尬
                            </a>
                        </h3>
                    </li>
                    <!-- 内容图片-->
                    <span class="c1_brief">
                        <a href="#" target="_blank">
                            <img src="images/u=3721856666,3102087464&fm=96&app=25&f=JPEG.jpg" height="75" width="121" alt="图片">
                        </a>
                    </span>
                    <!-- 内容简介-->
                    <li class="b1">欧文和库里都是现役数一数二的控卫,他们都是联盟的当红球星。虽然是司职控卫,但是两人进攻能力都很出色。要说荣誉方面,两人都已经有总冠军加成,年纪轻轻的他们,真...
                    </li>
                    <!-- 内容来源及百度快照链接-->
                    <li class="b2">
                        <a href="#" target="_blank" class="a1">https://baijiahao.baidu.com/s?...</a>
                        <a href="#" target="_blank" class="a2">-百度快照</a>
                    </li>
                </ul>
                <!-- 搜索到的第四个内容-->
                <ul class="c4">
                    <li>
                        <!-- 内容标题-->
                        <h3 class="t">
                            <a href="#" target="_blank">
                                凯尔特人就是<em>欧文</em>的球队!塔图姆要球,欧文霸气挥手:去拉开空间_球权
                            </a>
                        </h3>
                    </li>
                    <!-- 内容图片-->
                    <span class="c1_brief">
                        <a href="#" target="_blank">
                            <img src="images/u=3364159650,1367388755&fm=85&app=2&f=JPEG (1).jpg" height="75" width="121" alt="图片">
                        </a>
                    </span>
                    <!-- 内容简介-->
                    <li class="b1">1小时前 - 欧文掌控了本场比赛绝大部分的球权,正是依靠欧文超强的单打能力,绿军才能够最终战胜了猛龙,并且欧文的11次助攻也是全队最高。 在比赛的第四节有一...
                    </li>
                    <!-- 内容来源及百度快照链接-->
                    <li class="b2">
                        <a href="#" target="_blank" class="a1">sports.sohu.com/201811...</a>
                        <a href="#" target="_blank" class="a2">-百度快照</a>
                    </li>
                </ul>
                <!-- 搜索到的第五个内容-->
                <ul class="c5">
                    <li>
                        <!-- 内容标题-->
                        <h3 class="t">
                            <a href="#" target="_blank">
                                破10000分里程碑!<em>欧文</em>超巨养成之旅现在进行时 他让詹皇为他点赞
                            </a>
                        </h3>
                    </li>
                    <!-- 内容图片-->
                    <span class="c1_brief">
                        <a href="#" target="_blank">
                            <img src="images/u=224533993,3021219957&fm=85&app=58&f=PNG.jpg" height="75" width="121" alt="图片">
                        </a>
                    </span>
                    <!-- 内容简介-->
                    <li class="b1">7小时前 - 欧文的答卷尚未完成,但属于他的超巨养成之路依然在不断前进。在一场东部强强对话当中,欧文的超级杀手本色再度被激活,他面对与猛龙的疯狂鏖战全场奉献26中18的进攻...
                    </li>
                    <!-- 内容来源及百度快照链接-->
                    <li class="b2">
                        <a href="#" target="_blank" class="a1">https://baijiahao.baidu.com/s?...</a>
                        <a href="#" target="_blank" class="a2">-百度快照</a>
                    </li>
                </ul>
            </div>
            <div class="content_right">
                
            </div>
        </div>
    </body>
</html>

 

 

效果图如下:

 

转载于:https://my.oschina.net/u/3962295/blog/2936398

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值