手机新闻网页

最新推荐文章于 2025-07-05 15:46:20 发布
最新推荐文章于 2025-07-05 15:46:20 发布
阅读量149 收藏 4
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhangbao/p/7729128.html

点击 这里 查看手机新闻网页的最终效果图。

源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>手机新闻网页</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            vertical-align: middle;
            max-width: 100%;
        }

        p {
            margin: 0;
        }

        h4 {
            margin: 0;
            font-weight: normal;
        }

        a {
            text-decoration: none;
        }

        body {
            margin: 0;
            font-family: STXihei, Helvetica, serif;
            font-size: 14px;
            line-height: 1.4286;
            color: #333;
        }

        .full-width {
            width: 100% !important;
        }

        #news .nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 44px;
            background: #fafafa;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 2%;
            font-size: 13px;
        }

        #news .nav a {
            display: block;
            color: #969696;
        }

        #news .nav .active a {
            color: #ba1d14;
            font-weight: bold;
        }

        #news .con {
            width: 90%;
            margin: 0 auto;
        }

        #news .con li {
            overflow: hidden;
            padding: 12px 0;
            border-bottom: 1px solid #f3f3f3;
            position: relative;
        }

        #news .con .detail {
            float: left;
            width: 68%;
        }

        #news .con h4 {
            margin-bottom: 5px;
        }

        #news .con p {
            line-height: 1;
        }

        #news .con span {
            font-size: 12px;
            margin-right: 6px;
            color: #969696;
        }
    
        #news .con .image {
            float: right;
            width: 30%; 
            height: 57px;
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        #news .con .image.full-width {
            min-height: 182px;
        }

        #news .con .desc {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            padding: 0 6px 10px;
        }

        #news .con .desc span {
            color: inherit;
        }

        #news .con .cover-link {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        } 

        #news .con .images {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        #news .loading {
            text-align: center;
        }

        #news .loading a {
            display: block;
            line-height: 32px;
            color: #969696;         
        }
    </style>
</head>
<body>
    
<div id="news">
    <ul class="nav">
        <li class="active"><a href="#">要闻</a></li>
        <li><a href="#">视频</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">体育</a></li>
        <li><a href="#">时尚</a></li>
        <li><a href="#">军事</a></li>
        <li><a href="#">汽车</a></li>
    </ul>
    <ul class="con">
        <li>
            <div class="detail">
                <h4>通用汽车CEO：我们正准备推出第四代无人驾驶汽车</h4>
                <p><span>腾讯科技</span><span>2评</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>富士康对夏普寄予厚望：希望手机称为世界前五</h4>
                <p><span>中国村在线</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>伦敦市长：建议就英国脱欧问题再次进行公投</h4>
                <p><span>海外网</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>大众柴油车升级方案获批准"排放丑闻"已花300亿美元</h4>
                <p><span>盖世汽车</span><span>2评</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="image full-width">
                <img src="./images/xiada.jpg">
                <div class="desc">
                    <h4>考古学家用卫星地图发现了神秘的古代沙特"门"</h4>
                    <p><span>蜜蜂国际</span></p>
                </div>
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>拟三管齐下筹集巨资 十三集团股价两日跌去近六成</h4>
                <p><span>每日经济新闻</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>穆里奇：斯帅已和恒大球员告别 不了解高拉特转会</h4>
                <p><span>腾讯体育</span><span>219评</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail full-width">
                <h4>卧室带卫生户型好吗？看看专家怎么说</h4>
            </div>
            <div class="images full-width">
                <div class="image">
                    <img src="./images/xiada.jpg">
                </div>
                <div class="image">
                    <img src="./images/xiada.jpg">
                </div>
                <div class="image">
                    <img src="./images/xiada.jpg">
                </div>
            </div>
            <p><span>综合整理</span><span>2评</span></p>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>为什么现在准时下班，到让人有愧疚感了？</h4>
                <p><span>书单</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="detail">
                <h4>中国哪些方面还应该向英美图书馆学习？</h4>
                <p><span>英伦故事会</span></p>
            </div>
            <div class="image">
                <img src="./images/xiada.jpg">
            </div>
            <a href="#" class="cover-link"></a>
        </li>
        <li>
            <div class="loading">
                <p><a href="#">加载更多</a></p>
            </div>
        </li>
    </ul>
</div>

</body> 
</html>

转载于:https://www.cnblogs.com/zhangbao/p/7729128.html

18790970257
关注
html手机网页新闻模板,新浪手机新闻网站模板首页html源码
weixin_31931045的博客
06-19 1175
【实例简介】新浪手机html网页模板【实例截图】【核心代码】新浪手机新闻网站模板首页html源码├── css│ ├── add2home.min.css│ ├── blue1.css│ ├── channel.min.js│ ├── common.min.css│ ├── home.min.css│ └── style.min.css├── images│ ├── 1...
如何将网页保存保存为PDF格式？
热门推荐
weixin_43763739的博客
03-22 1万+
如何将网页保存保存为PDF格式？ 如上例所示，将网页在WPS中打开后（参考上例，不再放图），依次点击左上角“文件”、“另存为”菜单： 选取文件要保存的路径，输入要保存的文件名和文件类型，注意：文件类型要选"PDF文件格式（*.pdf）"，然后点击“保存”即可。 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown...
基于Html的个性化新闻资讯网页设计
毕业作品网站
09-14 5397
2、新闻模块，包括了热点新闻页面，推荐新闻页面与推测用户喜爱新闻页面等。
手机可以上网，但电脑网页打不开？6招实用教程带你解决
sinat_37775891的博客
07-05 6140
网页打不开的常见原因及解决方法 摘要：网页无法打开可能由多种因素导致，包括网络连接异常、DNS服务器故障、网卡驱动问题、浏览器缓存冲突、代理设置错误或网站服务器宕机等。本文提供了六种系统解决方案：1)检查网络连接状态；2)更新网卡驱动；3)刷新DNS缓存；4)更换DNS服务器地址；5)清除浏览器缓存；6)检查代理设置。特别建议使用专业工具检测网卡驱动，并推荐使用8.8.8.8等公共DNS地址。若网页Ping通但打不开，则问题可能集中在浏览器设置或DNS解析环节。
基于Web新闻资讯网站系统设计与实现
杭州.黄老师
05-27 5496
基于Web新闻资讯网站系统设计与实现毕业设计源代码，黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，优快云博客专家，在线教育专家，优快云钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版
手机网页介绍页：交互设计与手势识别技术
weixin_36289742的博客
09-02 2051
本文还有配套的精品资源，点击获取 简介：在移动互联网领域，手机网页设计受到广泛关注。本项目“手机网页介绍页，支持手势识别”，是一个结合手势识别技术的互动式网页，用户可以通过滑动手势切换页面，提升了浏览体验。开发者可能使用了JavaScript库如 touchSwipe 来实现手势操作。在实现过程中，考虑了事件监听、手势识别、兼容性、用户体验及音频播放等关键点，...
Android之ScrollView滚动布局控件使用以及显示新闻网页
ly_rose的专栏
12-02 6558
ScrollView滚动布局控件使用，在手机上显示新闻网页
HTM期末作业网页-华为手机商城
学生期末作业
06-17 1万+
HTM作业-华为手机商城，共5个页面（HTML+CSS+JavaScript+Bootstarp）！ 部分网页代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>index</title..
网页宽度自动适应手机屏幕宽度的实现代码(viewport)
Yan 小铁匠
08-09 1118
一般的写法如下： XML/HTML Code复制内容到剪贴板 <meta name="viewport" content="initial-scale=1.0"> 较多的写法： XML/HTML Code复制内容到剪贴板 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum...
Android实现WebView加载网页及网页美化（简易新闻 四）
Tobey_r1的博客
06-24 3093
App实现WebView加载网页及网页美化（简易新闻 四） 主要使用WebView显示网页，使用JavaScript去除顶部广告，使用Toolbar实现导航栏样式 最终效果如下： 接上一篇博客(连接数据库，实现下拉刷新（简易新闻 三）)，先看一下Git动图 通过图片可以看到整个新闻网页分为三部分，分别是顶部Toolbar，WebView，Toolbar，具体实现方法如下。 第一步新建一个Emp...
HTML5实现好看的响应式手机新闻网页源码.zip
01-17
最后，源码中可能会包含一些实用的功能模块，如导航栏、侧边栏、评论系统、搜索功能等，这些模块可以独立使用，也可以根据需要进行组合，从而构建出一个功能完善的手机新闻网页。 HTML5实现好看的响应式手机新闻...
高仿今日头条新闻资讯手机App网页版HTML5网页模板.rar
05-31
这款名为“高仿今日头条新闻资讯手机App网页版HTML5网页模板”的资源，是为开发者提供的一款便捷的网页设计工具，特别适用于快速构建H5版本的新闻资讯类网站。HTML5作为现代网页开发的标准，以其丰富的功能和良好的...
新闻门户首页网页模板
01-21
【新闻门户首页网页模板】是一种专门用于构建新闻类网站主页的网页设计模板，它通常包含一系列预先设计好的页面布局、色彩方案、字体风格以及交互元素，以满足新闻网站信息展示、分类、搜索和导航等功能需求。...
手机wrap网站仿虎嗅移动网页版手机wap新闻网站模板
02-24
综上所述，通过提供的“手机wrap网站仿虎嗅移动网页版手机wap新闻网站模板”，我们可以了解到关于WAP网站的基本概念、虎嗅移动版的特点以及如何利用此类模板快速构建自己的新闻网站等内容。对于希望涉足移动互联网...
时事新闻订阅表单响应式网页模板
01-22
1. **响应式设计**：响应式网页设计是现代网页开发的关键技术，它允许网站在各种设备（如桌面电脑、平板电脑、智能手机）上自适应显示，确保内容清晰可读，交互性良好。通过使用CSS3媒体查询、Flexbox或Grid布局，...
二维码工具(1).zip
最新发布
09-13
二维码工具(1).zip
基于ZXing修改的二维码扫描器.zip
09-12
基于ZXing修改的二维码扫描器.zip
在网页上生成二维码.zip
09-12
在网页上生成二维码.zip
四级流水线8位booth算法乘法器，有无符号都支持（verilog），含testbench（system verilog）
09-12
乘法器包含三个.v文件 乘法器可进行有符号与无符号的8位乘法计算，但是需要提前输入乘数是否为有符号的标识 【 顶层multiplier_8_special.v：对乘法器进行分割段数 booth2_pp_decoder.v:使用booth算法，将乘数进行转换 mult_pp_adder.v:执行部分积加法。（这里经过了部分优化，但是仍直接使用了‘+’符号，如果是asic设计，需要更加具体，也能进一步优化） tb_mult8_special.v:(tesetbench):仿真激励文件：20*4组随机数测试数据，会返回验证时出错的数据的部分原因。（system verilog） 】 经过初步仿真验证，无问题 经过vivado某个ultrascale型号的fpga实现过后能达到500mhz以上频率，资源使用量为120lut左右 此模块为tpu设计中的一个底层模块，（作为多复用单元，可以处理浮点数据的一个部分）后续会逐步上传tpu的其他部分以及功能原理介绍 注：sys_enable:模块启动信号，sys_enable=0时会暂停并暂存数据。 valid：valid=1输入乘数有效，valid=0无效则会不计算这个数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值