HTML仿抽屉新闻

最新推荐文章于 2024-02-26 21:12:56 发布
最新推荐文章于 2024-02-26 21:12:56 发布
阅读量2.5k 收藏 6
点赞数
分类专栏： 前端 文章标签： html 抽屉 新闻
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2011480169/article/details/76358877
版权

博客核心内容：

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;管用，真的是匪夷所思。
一只懒得睁眼的猫
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html 右侧抽屉菜单,html5+css3实现抽屉菜单
weixin_30432831的博客
06-03 1770
抽屉菜单在手机native应用中很常见。比如酷狗手机版的界面：左侧为操作菜单，默认不显示。需要时向左滑动界面，操作菜单将从侧边缓缓展示出来，不需要时向右滑动界面，操作菜单又将隐藏在侧边而不会占位置，操作菜单这种缓入缓出用户体验非常不错。这里采用css3实现抽屉菜单效果。以下代码以及实例请在基于webkit手机浏览器下访问。html代码如下：1 2 3 4 View Code样式代码...
很酷的DIV抽屉效果
01-04
很酷的DIV抽屉效果，有点像OutLook自动伸缩
新闻代码html
02-27
新闻代码东方头条网-东方网旗下《东方头条》是一款会自动学习的资讯软件,它会分析你的兴趣爱好,为你推荐喜欢的内容,并且越用越懂你.就要你好看,东方头条新闻网
用html编写的简易新闻页面
最新发布
m0_73740682的博客
02-26 1680
练习小作品
利用html编写网站中的新闻快报模块
y1059477028的博客
10-13 3026
2、“京东快报”所在栏是标题栏，所以使用H标签，注意后面的超链接“更多”也要包在H标签内；4、li标签要包含两个span行内标签，因为需要代表不同类型的内容。1、首先使用div块标签包住整个内容区， 即红色外框线；3、标题下方为列表内容区，使用ul列表标签；编写代码之前首先要进行结构分析 ，如下右图。表示每个列表项里的具体内容。代表整个盒子模块的最外层；可以看成每个列表项；
侧边导航栏（抽屉式设计）界面 (html + css)
热门推荐
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
新闻HTML网页案例（前端开发仿制，原新闻链接在文章底部）
qq_61623880的博客
06-29 923
直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
HTML抽屉效果的实现与展示
qq_15167261的博客
10-30 2373
林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka        摘要：本文主要讲了HTML抽屉效果的实现与展示，最后还用bootstrap做了一个简单的实例。 一、基本原理 jQuery 隐藏方法 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来
html5仿手机侧边抽屉式滑动菜单效果代码
11-03
html5仿手机侧边抽屉式滑动菜单效果代码 html5仿手机侧边抽屉式滑动菜单效果代码
HTML 底部弹窗 抽屉效果
07-28
HTML底部弹窗，实现抽屉效果，可以用于电影院选座位。
仿天猫抽屉
01-12
仿天猫抽屉，实现打开 关闭抽屉 代码详细 欢迎参考
仿网易新闻抽屉式图
07-29
仿网易侧拉抽屉视图
网页实现抽屉效果，使用HTML和js，参杂了点css
06-23
用一个放在网页左侧的div，实现抽屉效果。在IE下能运行，效果一实现，人就懒了。
html5抽屉式滑动菜单栏.zip
07-26
使用jQuery+css3实现抽屉菜单，html5滑动菜单效果，可以选择从上下左右四个方向滑入
Android 仿网易抽屉
01-16
Android 仿网易抽屉,最精简的版,很好用的
css实现抽屉动画 div显示隐藏的过渡效果
Liu_JiaqiPro的博客
10-30 7377
效果如图 由于列表是循环出来的，所以判断抽屉的打开和关闭由一个自定义数组决定。当数组的该项为1时打开，打开时显示hideShita样式，反之显示element样式 <div :class="flagList[i] == 1 ? 'hideShita' : 'element'"> //里面是抽屉里的内容 </div> 控制抽屉的大小动画的时间，简单的抽屉开关就做好了。修改后放在自己的项目里面吧。 <style> .hideShita { ...
利用html进行新闻网站页面的开发设计
yyy__yyy_的博客
07-25 2733
利用html进行新闻网站页面的开发设计
html实现抽屉式效果,抽屉式效果.html
weixin_32148209的博客
06-04 1047
Document* {margin: 0px;padding: 0px;}body {background: url('img/bg.jpg')}.box {width: 1100px;height: 430px;margin: 120px auto;}.box ul li {list-style-type: none;width: 100px;height: 429px;float: left;...
html抽屉下拉列表
10-06
HTML抽屉下拉列表是一种常用的网页元素，它可以隐藏和显示内容。通常，使用HTML的`<select>`元素结合`<option>`元素来创建抽屉下拉列表。下面是一个示例代码： ```html 选项1 选项2 选项3 ``` 在上面的代码中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一只懒得睁眼的猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值