开始做仿作一个知乎日报

最新推荐文章于 2024-07-29 23:17:45 发布
最新推荐文章于 2024-07-29 23:17:45 发布
阅读量78 收藏
点赞数
分类专栏： JavaScript vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/123656281
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏

一、分析页面

1、分为三个组件吗？
一个栏目组件
一个文章标题组件
一个文章内容

2、栏目组件为父组件
文章标题组件为子组件
文章内容为孙组件

3、组件的链接
还是路由的链接

4、有状态的改变吧，要用到vuex吧，文章要加新的。

hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿作一个百度页面
m0_70220004的博客
05-22 194
今天的作业是粗略的仿作一下百度的页面 首先，粗浅的看一下该页面的结构，可以用四个盒子来装，做这四个盒子需要测量出页面中的一些尺寸，这里安利一个for Mac的app———Dimensions,测出这些数据后用css修改盒子的大小便做出了结构，随后修改样式，也是用css，非常简单。mindmap大体是： 效果图如下，作为初学者感觉做的还是bi jiao z代码： <!DOCTYPE html> <html lang="en"> <head> <me
仿作小米商城页面
m0_63920995的博客
07-14 811
历时一周半的时间，终于在我的不懈努力下，完成了小米商城页面的静态仿作。于是，我开始一点一点的尝试，而那些被遗忘的记忆也一点一点的被我给唤起，在尝试成功时，那种如释重负的感觉真让人觉得轻松，可是，当我继续往下做下一个模块时，又总是会遇到好多的问题。并且，面对如此庞大的页面，我要去完成的内容有好多好多，总是让我觉得前路漫漫，没有信心和耐心走下去，但是，不积跬步，无以至千里。虽然这是我奋尽全力完成的，但是我知道，我还有好多不足，在页面的仿作上也有好多问题，所以，欢迎各位大佬，大神批评指正，我一定会及时改正。...
仿作一个评论论坛
小白的博客
07-14 101
这是仿b站下方的那个发言的评论。 首先为发布这个按钮设置监听，如果你没有输入内容就会弹出提示框，如果你输入内容了就会在空的ul下创建新的小li。 小li 中的内容就是在上方文本域中输入的值，并且加上一个删除的超链接。 最后利用for循环给每一个超链接都加上监听，点击删除的超链接后就会删除这个增加的小li。this.parentNode就是现在点击的那个超链接的父节点。 ...
android动画知乎,Android模仿知乎的回答详情页的动画效果
weixin_33558072的博客
05-25 333
废话不多说，咱们第一篇文章就是模仿“知乎”的回答详情页的动画效果，先上个原版的效果图，咱们就是要做出这个效果在实现之前，我们先根据上面的动画效果，研究下需求，因为gif帧数有限，所以不是很连贯，推荐你直接下载一个知乎，找到这个界面自己玩玩☞当文章往上移动到一定位置之后，最上面的标题栏Bar和问题布局Title是会隐藏的，回答者Author布局不会隐藏☞当文章往下移动移动到一定位置之后，原先隐藏的标...
如何做一个简单好玩的音乐网页
weixin_44484520的博客
01-16 3838
如何做一个简单好玩的音乐网页 （作者：宁佐潮，撰写时间：2019年1月16日） 下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件 一共分为两部分： 一：播放部分 二：钢琴部分 由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作 其他就是钢琴部分，我把这分为两个html写入，把另一个小的用iframe标签嵌入进去 首先是布局，第一部分的布局十分简洁，...
Java项目之模仿CSDN做一个DBB博客
qq_52467117的博客
07-05 711
Java项目之模仿CSDN做一个DBB博客
Qt Designer，仿作一个ui界面的练习（一）：界面的基本布局
xulibo5828的博客
07-29 441
至此，完成了布局的基本框架设计，软件的显示主界面（appFrame）已经自动布满了QMainWindow，而且，当拖动改变QMainWindow的尺寸时，appFrame，也就是软件的显示主界面也随之改变。五、再放置三个QFrame，分别命名为leftFrame（左边栏）、topFrame（顶边栏）、mainContent（显示内容主区）contentBox（内容区，由左边栏和显示内容主区组成，是软件的操作内容显示区）。2、leftFrame（左边栏）的属性设置，将最小宽度设置为50。
Qt Designer，仿作一个ui界面的练习（二）：部件内容的填充
最新发布
xulibo5828的博客
07-29 111
3、同样的，在 topContent和topTimeShow里都拖入QLabel，命名为projectTitle和dateTimeShow，并设置布局和边距。5、使用复制btnHome粘贴的方式（快捷方式：按住ctrl键并拖动），在left_buttonsBox中继续拖入按钮：btnNew、btnSave、btnExit。1、在顶边栏的topLogo里面拖入一个QLabel（标签），命名为logoImage，删除标签的文字。4、右键点击left_buttonsBox，布局--垂直布局。
仿作百度页面
m0_63920995的博客
05-21 772
仿作百度页面，先用HTML将百度页面的基本框架搭建好，然后在css中展开布局。 首先用盒子展开布局，将页面主要分为三个部分，上部为导航栏，中间为主题部分，包括搜索栏和热点，下部为尾部导航栏。再为每个盒子设置自己的内外边距和内容的居中，再将每个盒子中的字体大小，字体颜色为其分别设置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
QQmodel:仿作一个QQ的基本页面
07-16
QQmodel项目是一个基于Objective-C语言开发的示例，旨在教授如何仿制一个基本的QQ页面。这个项目对于初学者来说是很好的实践平台，因为它涵盖了iOS应用开发中的许多基础概念和关键技术。 首先，Objective-C是Apple...
安卓仿作微信界面
07-23
上次看到网上有朋友求微信仿作的源码，今天就分享一下，效果相对不错，注解较多
“大观楼”长联的一幅成功仿作.docx
11-30
这篇文档主要讨论的是中国古典文化中的楹联艺术，特别是对“大观楼”长联的一幅成功仿作进行了深入分析。大观楼的长联在中国楹联艺术中占有重要地位，以其180个字的长度，磅礴的气势和丰富的内涵赢得了广泛的赞誉。...
HNUSQL仿作mysql数据库，实现数据库备份以及登录等操作
07-09
HNUSQL是一个模仿MySQL数据库系统开发的项目，旨在提供类似MySQL的功能，如数据库备份和用户登录等操作。这个项目对于学习数据库管理系统的设计和实现，以及理解数据库操作的底层原理非常有帮助。以下将详细讲解...
小米官网多界面的仿作界面.zip
06-26
接着，我们关注到“jQuery”——一个强大的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在`mi-js`目录下，你会发现使用jQuery实现的JavaScript代码，它们负责页面的动态效果和交互逻辑。例如，`mi-...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1244
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 388
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1090
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 194
【代码】vue el-select的下拉树形结构。
用html和css仿作苹果网站
05-20
很好！以下是一个简单的示例，可以帮助你入门。 首先，我们需要一个HTML文件，命名为index.html。在这个文件中，我们将建立一个基本的网站结构，并添加一些内容和样式。 ```html <!DOCTYPE html> <html> <head> <title>苹果官网</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- 导航栏 --> <nav> <ul> <li><a href="#">iPhone</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">支持</a></li> <li><a href="#">搜索</a></li> <li><a href="#">购物袋</a></li> </ul> </nav> <!-- 主要内容 --> <main> <section class="hero"> <h1>欢迎来到苹果</h1> <p>探索我们的产品</p> <button>了解更多</button> </section> <section class="products"> <h2>我们的产品</h2> <ul> <li> <img src="iphone.jpg"> <h3>iPhone</h3> <p>购买最新的iPhone</p> </li> <li> <img src="ipad.jpg"> <h3>iPad</h3> <p>购买最新的iPad</p> </li> <li> <img src="macbook.jpg"> <h3>MacBook</h3> <p>购买最新的MacBook</p> </li> <li> <img src="watch.jpg"> <h3>Watch</h3> <p>购买最新的Watch</p> </li> </ul> </section> </main> <!-- 页脚 --> <footer> <p>© 2021 苹果公司</p> </footer> </body> </html> ``` 接下来，我们需要一个CSS文件，命名为style.css。在这个文件中，我们将为网站添加样式。 ```css /* 设置全局样式 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } /* 导航栏样式 */ nav { background-color: #333; color: #fff; padding: 10px; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; align-items: center; } nav ul li { margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; } /* 主要内容样式 */ main { padding: 50px; } .hero { background-image: url(hero.jpg); background-size: cover; background-position: center; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; } .hero h1 { font-size: 50px; margin: 0; } .hero p { font-size: 20px; margin: 20px 0; } .hero button { background-color: #fff; color: #333; padding: 10px 30px; border: none; border-radius: 5px; font-size: 20px; cursor: pointer; } .products { display: flex; flex-wrap: wrap; justify-content: space-between; } .products h2 { font-size: 30px; margin: 0; padding: 20px 0; } .products ul { margin: 0; padding: 0; list-style: none; } .products li { margin: 20px; width: 300px; text-align: center; } .products li img { width: 100%; height: auto; } .products li h3 { font-size: 24px; margin: 10px 0; } .products li p { font-size: 16px; margin: 0; } /* 页脚样式 */ footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 这是一个简单的示例，你可以根据自己的需求和喜好进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值