html+css——做一个新闻搜索小卡片

最新推荐文章于 2024-03-24 21:28:22 发布
VIP文章 最新推荐文章于 2024-03-24 21:28:22 发布
阅读量1.6k 收藏 9
点赞数 5
分类专栏： 前端项目 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51869518/article/details/126041252
版权

ps：小项目由html和css实现

目录

项目需求

效果图展示

需求分析

甲方

乙方

项目设计

html部分

css部分

源代码

项目需求

效果图展示

（纯路人，树枝666）

需求分析

甲方

  为了给前端小白一个练手的小项目，我们需要一个简易的新闻搜索卡片，其内容必须具有但不限于一个具有搜索内容的搜索框以及热点新闻的图文混排部分内容。

乙方

  可以由效果图我们可以简单分析下产品的组成：上下两部分布局；上面部分为；一个<input>和一个搜索按钮链接。下面部分为；图文混排的显示部分，外部应该套用<a>标签包裹图文内容链接到对应的目标端点。最后使用一个<div>标签将所有内容包裹起来设置宽高，设置背景色后居中显示即可完成甲方需求。

  根据我们的需求分析，接下来我们就可以一步步进行对这个小项目的设计了

项目设计

html部分

  1.使用一个d

最低0.47元/天 解锁文章
valiant小东
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
前端小案例——选项卡（HTML+CSS+JS, 附源码）
前端小白一枚
01-24 821
切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。
如何用HTML写一个新闻页面(列表标签)
ganli_lin的博客
03-01 1076
在此基础上可以加上对应新闻的图片和视频等，让其更加的丰富，还可以加上一些超链接，让其进行跳转，同时也可以对它进行布局，让它更加的美观。
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
html5实现卡片效果
热门推荐
小时
08-09 1万+
卡片效果              .card{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}         .header{             background-color: #4caf50;
html5卡片效果
Amare丶的部落格
06-08 9782
html5卡片效果
css简单实现一类卡片（自用笔记）
DT_XUE321的博客
07-19 823
css 简单实现一类卡片
利用HTML5与CSS实现新闻网页设计
m0_59800431的博客
03-22 1735
利用HTML5与CSS实现新浪新闻页面设计，其中运用了HTML5中的视频标签、图像标签、超链接标签等常用标签以及CSS3如何去修改字体样式以及将页面设计成盒子模型。
10个实用的CSS样式之悬浮卡片
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-23 8226
对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是悬浮卡片首先我们来看看最终的效果到此为止一个简单的悬浮卡片就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。
简单的html练习：实现超好看唯美浪漫的文字边框卡片
yingshuangtu的博客
06-21 2941
前言 html简单练习：二十行代码实现超好看唯美浪漫简约的文字边框卡片 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现界面 二、代码 荧光边框.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="yinggu
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
一个简单的HTML网页——传统节日春节网页(HTML+CSS)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
HTML 卡片样式学习
金戈铁马
08-13 2675
参考： https://www.runoob.com/cssref/css3-pr-box-shadow.html 先看前两个参数的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>卡片效果</title> <style type="text/css"> #card{
HTML+CSS前端简单卡片动态效果
hexuhui0920的博客
01-16 1351
HTML+CSS前端简单卡片动态效果
HTML+CSS：3D卡片组件
正在创作系列：【若冰说CSS】
01-30 939
实现了一个名为“卡片”的效果，当鼠标悬停在一个特定的元素上时，该元素会变得更亮，并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时，卡片会变得更亮，并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接，让用户更好地了解和交互。
html卡片
m0_63823490的博客
04-14 192
【代码】html卡片。
html网页制作-3D旋转卡片
最新发布
不蒸馒头曾口气的博客
03-24 675
网页制作，动态卡片，两中3D动态旋转卡片，让前端页面更加美观，html，css，vscode
用html+css+js做一个小游戏
04-27
好的，我可以为您提供一些关于如何使用 HTML、CSS 和 JavaScript 制作小游戏的指导。 首先，您可以考虑使用 HTML 创建游戏的基本框架，包括游戏画面、分数、计时器等。然后使用 CSS 设计游戏画面的样式，包括颜色、字体、背景等。最后，使用 JavaScript 编写游戏逻辑，包括如何控制游戏角色移动、如何计分、如何处理游戏结束等。 具体的实现方法会根据您想要创建的游戏类型而有所不同。比如，如果您想要创建一个简单的俄罗斯方块游戏，您可以使用 HTML 的 canvas 元素来绘制游戏画面，使用 CSS 来设置画布的样式，然后使用 JavaScript 来处理游戏逻辑。 另外，网络上已经有很多开源的游戏框架和库，例如 Phaser、Pixi.js、CreateJS 等，您可以使用它们来加快游戏开发进程。 希望这些指导对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

valiant小东

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

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

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

打赏作者

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

抵扣说明：

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

余额充值