2501_93350987 2025-09-10 21:47 采纳率: 57.1%
浏览 11
已结题

用web前端实现新闻栏

用web前端实现新闻栏，新闻栏边框只有左边和上面有，圆点颜色和正文颜色一致，且标题下划线和标题有一定距离，圆点位置和和正文有一定距离，圆点和边框有一定距离，

img

  • 写回答

5条回答 默认 最新

  • Nymph_Zhu 2025-09-11 08:53
    关注
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜狐热点新闻</title>
  <style>
    /* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 新闻栏容器 */
.news-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* 标题下划线 */
.title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #f60;
  margin-top: 5px;
}

/* 新闻列表样式 */
.news-list {
  list-style: disc; /* 圆点列表 */
  padding-left: 20px;
}

.news-list li {
  margin-bottom: 10px;
  text-decoration: underline;
  color: yellowgreen;
  cursor: pointer;
}

/* 鼠标悬停效果 */
.news-list li:hover {
  color: #f60; /* 鼠标悬停时文字变橙色 */
}

  </style>
</head>
<body>
  <div class="news-container">
    <h1 class="title">搜狐热点新闻</h1>
    <ul class="news-list">
      <li>铁道部千万天价宣传片调查：张艺谋酬劳250万</li>
      <li>中国失独问题调查：不解决是对人民不负责</li>
      <li>海军副司令：全国人民请放心 海军必不辱使命</li>
      <li>国内最赚钱炼油厂巨亏 员工羞于穿工作服上街</li>
      <li>北京公交车在闹市行驶中起火 纵火犯被抓</li>
      <li>韩国反朝名人欲诉中国政府 称在华遭严刑逼供</li>
      <li>20多位神秘人50万放生万条红鱼 市民争相垂钓</li>
      <li>晨报：朝鲜黑马爆冷夺冠 称感谢金正日赐力量</li>
    </ul>
  </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

  • 基于Vue.js框架的Web前端开发工具的设计与实现
    2024-04-09 00:31
    伴随Ｗｅｂ开发技术的不断发展，前后端分离开发逐渐成为主流的开发模式，前端开发在整个开发流程中越来越重要，前端开发工作早已不是编写几个简单的静态页面就可以完成的，前端除了需要展示美观的页面，还需要实现...
  • Web前端网页期末大作业
    2022-01-10 14:53
    主页设计布局是在网站的左上角是网站标题名称和导航栏菜单，菜单栏主要分为晴空、海边、田野分别用a标签的href属性链接到对应的网易云音乐链接，右上角有个人头像，点击会旋转360度，并播放对应的背景音乐。...
  • Web平台前端开发设计与实现.doc
    2022-11-16 21:14
    Web平台前端开发设计与实现是当前计算机领域中的关键环节，它涉及到网页的用户体验、交互性和数据处理等多个方面。随着互联网的普及和深化，Web平台成为了连接用户与信息资源的重要桥梁。本文将对Web平台前端开发...
  • web前端实现四级联动效果
    2024-09-20 09:42
    web前端实现省市县乡镇的四级联动效果,稍微修改后就可以复用
  • Web点餐系统前端开发设计与实现
    2025-07-05 20:08
    资源下载链接为： https://pan.quark.cn/s/9648a1f24758
  • 纯web前端实现的小说网项目案例
    2024-04-26 17:43
    使用HTML+CSS+JavaScript+jQuery+bootstrap等web前端技术实现 带js,带jquery,bootstrap响应式/汉堡菜单,此源码带【HTML+CSS+JavaScript+jQuery+bootstrap】没学过的勿选 编 辑器和运行工具 : 如(DW、HBuilder、...
  • web前端开发技术 在线投票网站系统设计
    2021-06-30 17:42
    总的来说，这个项目涉及了前端开发的多个核心领域，包括用户体验设计、数据交互、动态功能实现和性能优化，是学习和实践Web前端开发的好实例。通过分析和实现这样的项目，开发者能够深入理解Web应用的完整生命周期，...
  • WEB前端开发-案例汇总(81例).zip
    2022-05-08 08:20
    《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
  • 阿里web前端开发手册.pdf
    2021-11-03 11:50
    "阿里web前端开发手册" 阿里web前端开发手册是一份详细的前端开发规范，涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点： 1. 命名规范： 在...
  • web前端，vue、three 实现城市3d展示
    2024-04-03 10:09
    web前端，通过 vue和htree 来实现 城市3D效果的展示， 下载源码，跳转到city 执行npm install 下载各种 在执行 npm run dev 。 里面包括 3d效果，以及各种特效 包括下雪。下雨。运动路线，文字备注。 是一个学习...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 9月10日