html+css+js文章模板

图片    源代码在图片后面,点赞加关注,谢谢😄

5287ce476b2f47d28e3d25b866c9dfcb.jpg

 源代码

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>新闻界面</title>

    <style>

        body {

            background-color: #f0f0f0;

            font-family: Arial, sans-serif;

        }

        .news-item {

            background-color: white;

            margin: 20px auto;

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 4px 6px rgba(0,0,0,0.1);

            max-width: 800px;

            width: 95%;

        }

        .news-title {

            text-align: center;

            margin-bottom: 20px;

            color: #333;

        }

        .news-author {

            color: #777;

            margin-bottom: 10px;

        }

        .news-content {

            margin-bottom: 20px;

        }

        .news-image {

            display: block;

            margin: auto;

            max-width: 100%;

        }

        .news-video {

            width: 100%;

            height: auto;

        }

        .news-actions {

            display: flex;

            justify-content: center;

            gap: 10px;

        }

        .action-button {

            background-color: red;

            color: white;

            border: none;

            border-radius: 5px;

            padding: 5px 10px;

            cursor: pointer;

            margin:10px auto;

            box-shadow: 0 2px 4px rgba(0,0,0,0.1);

        }

        .separator {

            width: 95%;

            margin: 30px;

            border-top: 1px solid #ddd;

        }

    </style>

</head>

<body>

    <div class="news-item">

        <h2 class="news-title">新闻标题</h2>

        <p class="news-author">作者: 张三</p>

        <p>发布日期: 2023-04-01</p>

        <div class="news-content">

            <img src="https://via.placeholder.com/500x300" alt="新闻图片" class="news-image">

            <p>新闻内容...</p>

            <!-- 假设这是视频 -->

            <video controls class="news-video">

                <source src="movie.mp4" type="video/mp4">

            </video>

        </div>

        <div class="news-actions">

            <button class="action-button" id="like-btn">点赞</button>

            <button class="action-button" id="follow-btn">关注</button>

            <button class="action-button" id="save-btn">收藏</button>

        </div>

    </div>

    <div class="separator"></div>

    <!-- 可以重复以上结构添加更多新闻条目 -->

 

    <script>

        document.getElementById('like-btn').addEventListener('click', function() {

            alert('点赞');

        });

        document.getElementById('follow-btn').addEventListener('click', function() {

            alert('关注');

        });

        document.getElementById('save-btn').addEventListener('click', function() {

            alert('收藏');

        });

    </script>

</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

停车场车牌识别计费系统,用Python如何实现?

关注星标&#xff0c;每天学习Python新技能 前段时间练习过的一个小项目&#xff0c;今天再看看&#xff0c;记录一下~ 项目结构 说明&#xff1a; datefile文件夹&#xff1a;保存车辆信息表的xlsx文件 file文件夹&#xff1a;保存图片文件夹。ic_launcher.jpg是窗体的右上角…

周下载量20万的npm包---store

https://www.npmjs.com/package/store <script setup> import { onMounted } from vue import store from storeonMounted(() > {store.set(user, { name: xutongbao })let user store.get(user)console.log(user) //对象console.log(localStorage.getItem(user)) //…

CesiumJS【Basic】- #056 绘制纹理填充多边形(Entity方式)-使用shader

文章目录 绘制纹理填充多边形(Entity方式)-使用shader1 目标2 代码2.1 main.ts绘制纹理填充多边形(Entity方式)-使用shader 1 目标 使用Entity方式绘制绘制纹理填充多边形 - 使用shader 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium…

搭建个人博客及错误记录

搭建个人博客及错误记录 文章目录 搭建个人博客及错误记录需要用到的网址2.推荐两个参考教学视频3.发布一篇博客个人主题配置的提醒localhost拒绝连接问题解决办法ssh -T gitgithub.com失败问题解决Deployer not found:git解决 可以根据目录解决遇到的相同问题 需要用到的网址 …

朋友圈运营必备!一键转发和自动转发轻松搞定!

你还在手动发布多个微信号的朋友圈吗&#xff1f; 现在&#xff0c;就教你一招&#xff0c;让你轻松实现一键转发和自动转发朋友圈&#xff01; 首先&#xff0c;我们需要在个微管理系统上登录自己的微信号&#xff0c;以便进行统一管理。这个系统可以多个微信号同时登录&…

项目经验-不同行业、不同风格的网站设计

网站UI设计的首要考虑点是布局与导航。合理的布局能够确保信息清晰呈现&#xff0c;使用户能够快速定位所需内容。同时&#xff0c;简洁明了的导航设计能够引导用户流畅浏览&#xff0c;减少迷失感。通过精心设计的布局和导航&#xff0c;可以提升用户体验&#xff0c;增强用户…

Pointnet++改进即插即用系列:全网首发GLSA聚合和表示全局和局部空间特征|即插即用,提升特征提取模块性能

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入GLSA,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三 1.理论介…

深入剖析Tomcat(十五、十六) 关闭钩子,保证Tomcat的正常关闭

《深入剖析Tomcat》书中第十五章讲解了如何通过配置XML的方式来配置Tomcat的各个组件&#xff0c;并通过Digester库来解析XML。我们常操作的xml文件应该就是 server.xml这个文件&#xff0c;当在一台机器上部署多个Tomcat时&#xff0c;就必须修改连接器和 [“关闭Tomcat”程序…

Spring源码九:BeanFactoryPostProcessor

上一篇Spring源码八&#xff1a;容器扩展一&#xff0c;我们看到ApplicationContext容器通过refresh方法中的prepareBeanFactory方法对BeanFactory扩展的一些功能点&#xff0c;包括对SPEL语句的支持、添加属性编辑器的注册器扩展解决Bean属性只能定义基础变量的问题、以及一些…

Netty 粘包/拆包、解码工具类

1. 概述 1.1 粘包 发送 abc def&#xff0c;接收 abcdef 原因 滑动窗口&#xff1a;假设发送方 256 bytes 表示一个完整报文&#xff0c;但由于接收方处理不及时且窗口大小足够大&#xff0c;这 256 bytes 字节就会缓冲在接收方的滑动窗口中&#xff0c;当滑动窗口中缓冲了…

模拟 ADC 的前端

ADC 的 SPICE 模拟 反复试验的方法将信号发送到 ADC 非常耗时&#xff0c;而且可能有效也可能无效。如果转换器捕获电压信息的关键时刻模拟输入引脚不稳定&#xff0c;则无法获得正确的输出数据。SPICE 模型允许您执行的步是验证所有模拟输入是否稳定&#xff0c;以便没有错误…

尝试修改苍穹外卖为”李小罗餐厅“

学习苍穹外卖后&#xff0c;将其修改为自己所需要的项目&#xff0c;也是对苍穹外卖项目的加深理解 对项目之间的连接等关系进一步清晰&#xff0c;那么便开始吧 d1_开始修改 修改名字为”李小罗餐厅“ src\views\login\index.vue src\router.ts 结果展示 修改进来之后的展示…

上海站圆满结束!MongoDB Developer Day深圳站,周六见!

在过去两个周六的北京和上海 我们见证了两站热情高涨的 MongoDB Developer Day&#xff01; 近200位参会开发者相聚专业盛会 经过全天的动手实操和主题研讨会 MongoDB技能已是Next Level&#xff01; 最后一站Developer Day即将启程 期待本周六与各位在深圳相见&#xff0…

【Docker安装】OpenEuler系统下部署Docker环境

【Docker安装】OpenEuler系统下部署Docker环境 前言一、本次实践介绍1.1 本次实践规划1.2 本次实践简介二、检查本地环境2.1 检查操作系统版本2.2 检查内核版本2.3 检查yum仓库三、卸载Docker四、部署Docker环境4.1 配置yum仓库4.2 检查可用yum仓库4.3 安装Docker4.4 检查Docke…

Python题解Leetcode Hot100之矩阵

1. 矩阵置零 题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 解题思路 题目要求进行原地更改&#xff0c;也就是不能使用额外的空间&#xff0c;因此我们可以使用第一行的元素来记录对应的…

【LeetCode】十二、递归:斐波那契 + 反转链表

文章目录 1、递归2、leetcode509&#xff1a;斐波那契数列3、leetcode206&#xff1a;反转链表4、leetcode344&#xff1a;反转字符串 1、递归 函数自己调用自己 递归的4个点&#xff1a; 递归的例子&#xff1a;给一个数n&#xff0c;在斐波那契数列中&#xff0c;找到n对应的…

科研与英文学术论文写作指南——于静老师课程

看到了一个特别棒的科研与英文学术论文写作指南&#xff0c;理论框架实例。主讲人是中科院信息工程研究所的于静老师。推荐理由&#xff1a;写论文和读论文或者讲论文是完全不一样的&#xff0c;即使现在还没有发过论文&#xff0c;但是通过于老师的课程&#xff0c;会给后续再…

LSTM水质预测模型实践

0 引言 随着水质自动站的普及&#xff0c;监测频次越来越高&#xff0c;自动监测越来越准确。 水质站点增多&#xff0c;连续的水质监测数据&#xff0c;给水质预测提供更多的训练基础。 长短时记忆网络(LSTM)适用于多变量、连续、自相关的数据预测。 人工神经网络模型特点为的…

使用requests爬取拉勾网python职位数据

爬虫目的 本文是想通过爬取拉勾网Python相关岗位数据&#xff0c;简单梳理Requests和xpath的使用方法。 代码部分并没有做封装&#xff0c;数据请求也比较简单&#xff0c;所以该项目只是为了熟悉requests爬虫的基本原理&#xff0c;无法用于稳定的爬虫项目。 爬虫工具 这次…

LVS 负载均衡群集

一&#xff1a;LVS群集应用基础 1.1&#xff1a;概述 1.群集的类型 无论是哪种群集&#xff0c; 都至少包括两台节点服务器&#xff0c; 而对外表现为一个整体&#xff0c; 只提供一个访问入口。根据群集所针对的目标差异&#xff0c; 可分为以下三种类型。 负载均衡群集&a…