HTML仿抽屉新闻

博客核心内容:


1、代码展示
2、效果展示
3、思考点


(一)代码展示

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>抽屉新热榜-聚合每日热门、搞笑、有趣资讯</title>
        <link rel="icon" href="http://dig.chouti.com/images/chouti.ico">
        <style>
            body{
                margin: 0px;
                background-color: aqua;
                width: 100%;
                height: 2500px;
            }
            .head-band{
                height: 44px;
                width: 100%;
                background-color:#2459a2;
                /*在这里面还要设置一个定位*/
                position: fixed;
                top: 0px;
                left: 0px;
            }
            .digg-logo{
                /*通过float属性可以对内联标签设置长和宽*/
                float: left;
                width: 121px;
                height: 23px;
                background:url("logo.png") no-repeat ;
                margin-left: 164px;
                margin-top: 12px;
            }
            .location2{
                float: left;
                width: 381px;
                height: 44px;
                margin-left: 18px;
            }
            .total_lab,.sier_lab,.duanzi_lab,.tupian_lab,.ti_lab,.ans_lab{
                float: left;
                height:44px;
                text-align: center;
                line-height: 44px;
                text-decoration: none;
                color: #c0cddf;
                font-size: 13px;
            }
            .total_lab,.sier_lab,.duanzi_lab,.tupian_lab{
                width: 54px;
            }
            .ti_lab,.ans_lab{
                width: 82.5px;
            }
            /*接下来设置鼠标悬浮效果*/
            .total_lab:hover{
                color: white;
                background-color: darkblue;
            }
            .sier_lab:hover{
                color: white;
                background-color: darkblue;
            }
            .duanzi_lab:hover{
                color: white;
                background-color: darkblue;
            }
            .tupian_lab:hover{
                color: white;
                background-color: darkblue;
            }
            .ti_lab:hover{
                color: white;
                background-color: darkblue;
            }
            .ans_lab:hover{
                color: white;
                background-color: darkblue;
            }

            .location3{
                float: left;
                width: 132px;
                height: 44px;
                margin-left: 240px;
            }
            .register_lab,.log_lab{
                float: left;
                height:44px;
                width: 66px;
                text-align: center;
                line-height: 44px;
                text-decoration: none;
                color: #c0cddf;
                font-size: 13px;
                color: white;
            }
            .register_lab:hover{
                background-color: darkblue;
            }
            .log_lab:hover{
                background-color: darkblue;
            }
            .location4{
                width: 133px;
                height: 44px;
                background-color: #2459a2;
                float: left;
                margin-left: 2px;
            }
            .input_lab{
                float: left;
                width: 93px;
                height: 27px;
                margin-top: 4.5px;
                margin-left: 2px;
                background-color: #f4f4f4;
            }
            /*接下来整最有技术的图片:调节图标*/
            .search_lab{
                background-color: white;
                float: left;
                width: 29px;
                height: 32.0px;
                margin-top: 5px;
                margin-left: 0px;
                background: #f4f4f4;
                border: solid 1px;
            }
            .img1{
                float: left;
                margin-top: 10px;
                width: 20px;
                height: 16px;
                background:url("http://dig.chouti.com/images/icon.png") no-repeat  9px -195px ;
            }
            /*内部成员全部票完之后,在head-hand的末尾加一个block块,这样腾出一个快*/
            .clearfix1:after{
                content:"";
                display: block;
                clear: both;
                border: solid 0px red;
            }
            .main_content_band{
                height:2500px ;
                width: 1015px;
                background-color: white;
                margin-left: 167.5px;
                border: solid 1px red;
            }
            .main-content{
                float: left;
                height: 2270px;
                width: 635px;
                background-color: azure;
                margin-left: 26.6px;
                margin-right: 26.6px;
            }
            /*接下来要好好研究左侧的布局*/
            .chat-content{
                float: left;
                height: 2270px;
                width: 300px;
                background-color: aliceblue;

                border: solid 0px red;
            }
            /*接下来我要给右侧的先插入一张图片*/
            .chat-content > .homepage_download{
                margin-top: 250px;
            }
            .main-content > .choice{
                height:95px;
                border-bottom: solid silver 1.5px;
                background-color: white;
            }
            .hot_lab,.find_lab,.people_report_lab,.sort_lab,.twofour_hour_lab,.three_day_lab{
                margin-top: 44px;
            }
            .hot_lab{
                float: left;
                width:  75px ;
                height: 51px;
                /*border: solid 1px;*/
                background: url("zuire.png") no-repeat center center;
            }
            .find_lab,.people_report_lab{
                float: left;
                height: 51px;
                width: 75px;
                border: solid 0px red ;
                text-align: center;
                line-height: 51px;
                text-decoration: none;
                font-size: small;
                color: #2459a2;
            }
            .sort_lab,.twofour_hour_lab,.three_day_lab{
                float: left;
                height: 51px;
                width: 75px;
                /*border: solid 1px;*/
                text-align: center;
                line-height: 51px;
                text-decoration: none;
                font-size: small;
            }
            .sort_lab{
                color: #b4b4b4;
                margin-left: 65px;
            }
            .twofour_hour_lab,.three_day_lab{
                color: #390;
            }
            .three_day_lab{
                margin-left: -17px;
            }
            .publish-btn{
                margin-top: 52px;
                float: left;
                width:134px;
                height:33px ;
                background-color: #84a42b;
                color: white;
                text-align: center;
                line-height:33px;
                text-decoration: none;
                margin-left: 2px;
            }
            /*进行鼠标触摸操作*/
            #two2:hover{
                border-bottom: solid 1px;
            }
            #three3:hover{
                border-bottom: solid 1px;
            }
            .clearfix21:after{
                content:"";
                display: block;
                clear: both;
            }
            /*接下来做整个页面最难的部分*/
            /*设计第二个边框*/
            .item1{
                height: 85px;
                background-color: white;
                border-bottom: solid silver 1.5px;
            }
            .item_zuo1{
                float: left;
                width: 560px;
                height: 85px;
                /*border: solid 1px;*/
            }
            .content1{
                float: left;
                text-decoration: none;
                font-size: 15px;
                color: #369;
                font-weight: 700;
                margin-top: 14px;
            }
            .item1_shang1 span,.item1_shang1 .location1 {
                float: left;
                color:#b4b4b4;
                margin-left: 13px;
                font-size: 14px;
                margin-top: 15px;
            }
            .item1_shang1:after{
                content:"";
                display: block;
                clear: left;
            }
            .item_you_1{
                float: left;
                height: 85px;
                width: 73px;
                background: url("wjl.png") no-repeat 6px 8px;
            }
            .item1_xia1{
                float:left;
                width: 560px;
                height: 20px;
                /*border: solid 1px;*/
                margin-top: 15px;
            }
            #a1_1,#a2_1,#a3_1,#a4_1{
                margin-top: 2px;
                width: 23px;
                height:15px ;
                float: left;
            }
            #a1_2,#a2_2,#a3_2,#a4_2{
                float: left;
                width: 23px;
                height: 21px;
            }
            #a1_3,#a2_3,#a3_3,#a4_3{
                float: left;
                color: #99aecb;
                font-weight: 700;
                margin-top: 5px;
            }
            #a1_2{
                background: url("icon_18_118.png") no-repeat 2px -39px ;
            }
            #a1_3{
                margin-left: 5px;
            }
            #a2_2{
                background: url("icon_18_118.png") no-repeat 2px -98px ;
                margin-left: 20px;
            }
            #a2_3{
                margin-left: 25px;
            }
            #a3_2{
                background: url("icon_18_118.png") no-repeat 2px -158px ;
                margin-left: 15px;
            }
            #a3_3{
                margin-left: 20px;
                font-weight: 200;
                font-size: small;
            }
            #a4_2{
                background: url("pp.jpg") no-repeat 2px 2px ;
                margin-left: 15px;
                border: solid 1px;
                width: 20px;
                height: 18px;
                margin-top: 2px;
            }
            #a4_3{
                margin-left: 20px;
                font-weight: 200;
                font-size: small;
            }
            #a5_1{
                margin-top: 5px;
                width: 86px;
                height:15px ;
                float: left;
            }
            #a5_2{
                float: left;
                width: 86px;
                height: 15px;
                margin-left: 20px;
                font-size: 13px;
                color: #390;
            }
            #a5_3{
                float: left;
                color: #b4b4b4;
                font-weight: 700;
                margin-top: 5px;
                margin-left: 20px;
                font-weight: 200;
                font-size: small;
            }
            .item_xia1_you{
                float: left;
                width: 130px ;
                height: 20px;
                margin-left: 10px;
                margin-top: 2px;
                display: none;
            }
            #share{
                float: left;
                color: #b4b4b4;
                font-size: small;
                margin-top:3px;
                margin-right: 10px;
            }
            .item_xia1_you a{
                float: left;
                width: 17px;
                height: 178px;
                margin-right: 3px;
                /*border: solid 1px;*/
            }
            #share_one,#share_two,#share_three,#share_four{
                margin-top: 1px;
                width: 19px;
                height: 16px;
                float: left;
            }
            #share_one{
                width: 16px;
                background: url("share_icon.png")  34px -177px ;
            }
            #share_two{
                background: url("share_icon.png")  36px -191px ;
            }
            #share_three{
                background: url("share_icon.png")  34px -207px ;
            }
            #share_four{
                background: url("share_icon.png")  36px -149px ;
            }
            .item_zuo1:hover .item_xia1_you{
                display: block;
            }
            .content1:hover{
                border-bottom: solid 1px;
            }
            .aone_three:hover{
                border-bottom: solid 1px;
            }
            .atwo_three:hover{
                border-bottom: solid 1px;
            }
            .athree_three:hover{
                border-bottom: solid 1px;
            }
            .afour_three:hover{
                border-bottom: solid 1px;
            }
            .afive_two:hover{
                border-bottom: solid 1px;
            }
        </style>
    </head>

         <div class="head-band clearfix1">
             <a href="http://www.baidu.com" class="digg-logo"></a>
             <div class="location2">
                 <a href="http://www.baidu.com" class="total_lab">全部</a>
                 <a href="http://www.baidu.com" class="sier_lab">42区</a>
                 <a href="http://www.baidu.com" class="duanzi_lab">段子</a>
                 <a href="http://www.baidu.com" class="tupian_lab">图片</a>
                 <a href="http://www.baidu.com" class="ti_lab">挨踢1024</a>
                 <a href="http://www.baidu.com" class="ans_lab">你问我答</a>
             </div>
             <div class="location3">
                 <a href="http://www.baidu.com" class="register_lab">注册</a>
                 <a href="http://www.baidu.com" class="log_lab">登陆</a>
             </div>
             <div class="location4">
                 <input type="text" class="input_lab">
                 <a href="http://www.baidu.com" class="search_lab">
                     <span class="img1"></span>
                 </a>
             </div>
         </div>

         <div class="main_content_band clearfix2">
             <div class="main-content">
                 <!--设计第一个栏目-->
                 <div class="choice clearfix21">
                     <a href="http://www.baidu.com" class="hot_lab"></a>
                     <a href="http://www.baidu.com" class="find_lab"><strong>发现</strong></a>
                     <a href="http://www.baidu.com" class="people_report_lab"><strong>人类发布</strong></a>
                     <a href="http://www.baidu.com" class="sort_lab">即时排序</a>
                     <a href="http://www.baidu.com" class="twofour_hour_lab">
                         <span id="two2">24小时</span>
                     </a>
                     <a href="http://www.baidu.com" class="three_day_lab">
                         <span id="three3">3天</span>
                     </a>
                     <a href="http://www.baidu.com" class="publish-btn">
                         <span>+ 发布</span>
                     </a>
                 </div>
                 <!--设计第二个栏目-->
                 <div class="item1">

                      <div class="item_zuo1">
                          <div class="item1_shang1">
                            <a href="" class="content1">除了卖掉“重资产”,王健林还放弃了“东方好莱坞”的影视梦 </a>
                            <span>-www.thepaper.cn </span>
                            <a href="" class="location1">42区</a>
                          </div>

                         <div class="item1_xia1">
                            <div item_xia1_zuo>
                                <!--接下来仿着上面写就1个了-->
                                <a href="" id="a1_1"><span id="a1_2"></span></a>
                                <a href="http://www.baidu.com"><span id="a1_3" class="aone_three">15</span></a>
                                <!--接下来仿着上面写就2个了-->
                                <a href="" id="a2_1"><span id="a2_2"></span></a>
                                <a href="http://www.baidu.com"><span id="a2_3" class="atwo_three" >20</span></a>
                                <!--接下来仿着上面写就3个了-->
                                <a href="" id="a3_1"><span id="a3_2"></span></a>
                                <a href="http://www.baidu.com"><span id="a3_3" class="athree_three" >私藏</span></a>
                                <!--接下来仿着上面写就4个了-->
                                <a href="" id="a4_1"><span id="a4_2"></span></a>
                                <a href="http://www.baidu.com"><span id="a4_3" class="afour_three">私藏</span></a>
                                <!--接下来写第5个-->
                                <a href="" id="a5_1"><span id="a5_2"class="afive_two">5小时31分钟前</span></a>
                                <span id="a5_3">入热榜</span>
                            </div>

                            <div class="item_xia1_you">
                                <span id="share">分享到</span>
                                <a href="http://www.baidu.com"><span id="share_one"></span></a>
                                <a href="http://www.baidu.com"><span id="share_two"></span></a>
                                <a href="http://www.baidu.com"><span id="share_three"></span></a>
                                <a href="http://www.baidu.com"><span id="share_four"></span></a>
                            </div>

                         </div>
                      </div>
                     <div class="item_you_1"></div>
                 </div>



             </div>
             <!--右侧插入一张图片就完事了-->
             <div class="chat-content">
                 <img src="http://dig.chouti.com/images/homepage_download.png" class="homepage_download">
                 <div style="font-size: large;font-family: 宋体">24小时全部 TOP 10</div>
             </div>
         </div>

    <body>

    </body>

</html>

效果展示:
这里写图片描述
(三):思考点

1、对于小图像的定位(注意:background:url("http://dig.chouti.com/images/icon.png") no-repeat  9px -195px ;)这是之前用的,后来我把 no-repeat给去掉了,更加容易的进行了定位。
2、鼠标触摸状态的显示(貌似有的时候和写法有关--尤其是和变量的命令有关),还有就是加下划线的时候为什么                text-decoration: solid;不管用,但是border-bottom: solid;管用,真的是匪夷所思。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只懒得睁眼的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值