图片 源代码在图片后面，点赞加关注，谢谢😄
源代码
<!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>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
