网站可以是投资组合吗

<h1>不要在投资组合网站上浪费时间</h1>
<blockquote>借助您自己的投资组合网站,它可以在您自己的域上进行。. 当人们在Google等搜索引擎上搜索您的名字时,他们可以很容易地找到您,只要您在SEO方面都准备了正确的东西.</blockquote>
<h2>建立杀手级投资组合网站的10个提示</h2>
<p>通过此插图指南,为您创建一个在人群中脱颖而出的投资组合网站,使您的工作在线上额外的优势.</p>
<p>投资组合网站是展示您作为设计师作品的最快,最简单的方法. 即使您有物理投资组合,网站仍然是一个预期的额外的东西 – 至关重要的是,它使您的作品唱歌很重要.</p>
<p>并非每个人都有网页设计技能,可以舒适地创建一个具有令人惊叹,易于使用的布局的网站. 这些技巧将有助于填补这些知识空白,并立即在线上网.</p>
<p>有关更多投资组合的灵感,请查看这些令人惊叹的投资组合示例. 我们选择了最好的免费图形设计作品集主题,而付费的WordPress投资组合主题将使您的看起来超级专业.</p>
<h2>01. 做你自己</h2>
<p>不要仅仅因为您认为看起来不错而复制别人的网站设计. 您的投资组合网站展示您是谁和您的工作至关重要:通过创建原始网站,您将帮助确保人们在搜索您的服务时会想到它.</p>
<p>请记住,顶级网站构建器可以帮助您创建一个独特的网站 – 我们在下面找到了最优惠的价格.</p>
今天最好的网站建设者交易
<p> (在新标签中打开)</p>
(在新标签中打开)
(在新标签中打开)
查看交易(在新标签中打开)
<p> (在新标签中打开)</p>
主机专用托管
(在新标签中打开)
(在新标签中打开)
查看交易(在新标签中打开)
<p> (在新标签中打开)</p>
(在新标签中打开)
(在新标签中打开)
查看交易(在新标签中打开)
我们每天以最优惠的价格检查超过2.5亿种产品
<h2>02. 让自己有空</h2>
<p>如果您的网站尚不清楚访客如何与您取得联系,那么他们不会很难找到. 在您的主页上投入空间来告诉人们他们如何与您联系. 不同的人更喜欢不同的联系方式,因此提供了几种可以做到的方式 – 让他们轻松.</p>
<h2>03. 表现出一些个性</h2>
<p>当访问者查看您的网站时,他们想知道您是谁. 增加一些个性,也许是对自己的好头像,让他们知道您是一个具有自己的风格和身份的真实人. 创造力与独创性有关,有时人们会被无面的公司网站推迟.</p>
<h2>04. 保持快速</h2>
<p>普通人等待不到三秒钟才能加载一个页面,然后再放弃网站. 选择一个合适的托管软件包,该软件包允许快速的页面加载速度对于您的网站的成功至关重要. 并非每个网络主机都相同,因此请仔细选择以避免慢速站点.</p>
<h2>05. 创建新的内容</h2>
<p>Google喜欢新鲜的内容,因此提高网站搜索排名的好方法是通过博客保持最新状态. 始终保持您的帖子相关并与您所做的工作有关,这就是为什么人们正在研究您的网站的原因. Google也喜欢视频,访问者也喜欢视频 – 一个简短而引人入胜的视频可以帮助您的网站上的人们更长的时间.</p>
<h2>06. 炫耀</h2>
<p>您的投资组合网站就像一个活着的简历:它的内容应该是最新的,并使人们清楚您可以做什么. 这是展示您的专业和才华的工具,因此请确保您一旦准备好世界,就可以展示新的项目和技能.</p>
<h2>07. 大喊您的客户</h2>
<p>证明您的谱系的另一种方法是炫耀您以前的客户. 这告诉潜在的新客户,您以前一直信任做重要的工作,并表明您有记录. 如果您与知名公司或品牌合作,它将增加您的技能的重量.</p>
<h2>08. 推荐</h2>
<p>为什么有人要说你有多出色? 客户的直接报价作为对您服务的评论,可以在您的网站上发布. 这些推荐增加了一定的信任,放心和真实性,进一步证明了您的经验和能力产生高质量的工作.</p>
<h2>09. 现场例子</h2>
<p>链接到您以前的客户目前正在使用的现有作品的链接,这进一步展示了您作为专业人士的实力. 表明其他人投资于您的技能和信任您的工作可以帮助您确保新客户或雇主的确与您所说的一样好.</p>
<h2>10. 目标语言</h2>
<p>谁是您的目标受众,您的网站的总体目标是什么? 您的投资组合网站应展示您的技能和个性,因此在考虑如何最好地交流它之前,请花时间准确考虑您的信息是什么以及它的目标. 您希望您的网站发送的信息与您所做的工作一致.</p>
<p><em>本文首先出现在作品集手册中,由</em> <em>计算机艺术</em> <em>杂志.</em></p>
<p><strong>阅读更多:</strong></p>
<ul>
<li>调整您的投资组合2020</li>
<li>2020年最大的投资组合趋势</li>
<li>如何完善您的设计组合</li>
</ul>
<p> <strong>感谢您本月阅读5篇文章*立即加入以获取无限访问</strong> </p>
<p> <strong>只需£1 / $ 1 /€1享受您的第一个月</strong> </p>
<p>*每月阅读5篇免费文章,而无需订阅</p>
<h2>不要在投资组合网站上浪费时间</h2>
<p>首先,对不起,Clickbaity标题. 但是请给我一分钟,听我说.</p>
<p>您可以一直看到它:新开发人员花费大量时间尝试将其投资组合网站正确. 希望能找到一份出色的工作,他们又一个小时就放了 <strong>构建自定义布局</strong> 那是 <em>应该看起来整洁而专业</em>.</p>
<p><strong>但是,相反,他们最终获得了一个看起来更像的个人网站. 嗯.</strong> &#55358;&#56689;</p>
<p>不幸的是,投资组合网站变成一个 <strong>Big Timesink</strong> 没有理想的结果并不是唯一的问题. 这样的自定义网站 <strong>也可以适得其反.</strong> 即使从技术角度来看,一切都很棒,它们也可以使您看起来无能.</p>
<p>好消息:您不需要投资组合网站. 许多开发人员(包括我自己)找到出色的工作.</p>
<p>因此,在您开始(或继续)浪费大量时间之前,请在您的投资组合网站上浪费很多时间</p>
<ol>
<li>您想通过投资组合网站实现的目标</li>
<li>雇主想在求职者中看到什么</li>
<li>投资组合网站提供什么价值</li>
<li>为什么个人网站可以适得其反</li>
<li>而是专注于什么</li>
<li>无论如何需要一个投资组合网站? 最小化风险</li>
</ol>
<ul>
<li>没有技术知识的小客户的自由职业者(E.G. 为小型企业创建静态网站)</li>
<li>开发人员/设计师适用于设计技能很重要的工作(对于大多数开发人员角色而言,情况并非如此)</li>
<li>建立您用来获得工作的在线形象(这意味着您不依赖简历或LinkedIn个人资料)</li>
<li>只是对学习一些CS和HTML感兴趣</li>
</ul>
<p>您想通过投资组合网站实现的目标</h2></p>
<p>当您建立个人网站作为软件开发人员时,您的目标通常是找到工作. 投资组合的目的是展示自己,您的技能以及您向潜在雇主所做的工作.</p>
<p>由于为初级开发人员争取公开职位的竞争可能很激烈 <strong>A <em>伟大的</em> 投资组合网站可能会帮助您在候选人中脱颖而出</strong>.</p>
<p>但是,投资组合网站只是应用程序难题中的另一个文章.</p>
<p><strong>许多新开发人员认为必须拥有一个投资组合网站.</strong> 毕竟,您可以阅读许多将成功归因于网站的故事的故事. <strong>我想挑战这个观点.</strong></p>
<p>在分享我的理由之前,尽管我们需要了解雇主想从申请工作的开发人员那里看到什么.</p>
<p>雇主想在求职者中看到什么?</h2></p>
<p>当公司雇用软件开发人员时,他们正在寻找一个可以信任的人</p>
<ul>
<li>编写代码并构建应用程序</li>
<li>专业工作</li>
<li>交流问题和想法</li>
<li>融入团队</li>
<li>雄心勃勃,渴望学习.</li>
</ul>
<p>您的职业生涯越早,要说服雇主渴望学习,能够成长,善于交流以及适当的未来队友,就越重要。. 从技术角度来看,您非常熟练的期望总体上较低.</p>
<p>让我们看看这些要求如何与投资组合网站提供的价值重叠.</p>
<p>投资组合网站提供什么价值?</h2></p>
<p>在大多数情况下,投资组合网站是一个静态网站,该网站显示了一些个人信息,技能,开发人员知道的技术,以及个人或专业项目的列表作为参考.</p>
<p><strong>您可能会意识到所有这些信息通常已经在您的简历或LinkedIn个人资料上可用.</strong></p>
<p>因此,除此之外,投资组合网站可能会向雇主展示</p>
<ul>
<li>您可以构建一个静态网站</li>
<li>您的设计技能</li>
<li>触摸你的个性.</li>
</ul>
<blockquote><p>请注意,我不是在这里谈论博客. 博客可能非常有价值,因为它显示了您的技术知识以及您的沟通技巧和思维过程. 同时,维护很大的努力.</p></blockquote>
<p>一个非常酷而独特的投资组合网站肯定会给一些潜在的雇主留下深刻的印象.</p>
<p>但是说实话. 在静态网站构建者和现成的模板时代,构建网站并不难. 设计技能很不错,但对于作为软件开发人员的角色来说通常并不重要.</p>
<p><strong>现代网络开发人员的真正挑战是构建动态数据驱动的应用程序.</strong></p>
<p>而且投资组合网站通常不是很互动. 这意味着它并不能证明获得Web Dev的最重要技能之一. 即使您在github上共享源代码.</p>
<p>这使您的个性是投资组合网站的最大潜在好处. 问题仍然是您将如何做到这一点. 鉴于它是 <strong>尚不清楚实际有多少招聘人员点击到您的网站</strong> 当他们看到您的简历或LinkedIn时,它甚至可能没有那么影响.</p>
<p>那缺点呢?</p>
<p>为什么个人网站可以适得其反</h2></p>
<p>当我从头开始构建网站时,这是通常发生的事情:</p>
<ol>
<li>我有一个设计,看起来真的很酷.</li>
<li>我开始编写代码,创建标记并使用CSS进行样式.</li>
<li>几个小时,我已经完成了计划的10%. 以及我创造的 <em>看起来像废话</em>.</li>
<li>我开始通过像素移动元素像素,在这里添加一个边框,在那里更改颜色. 全部在浏览器的开发工具中.</li>
<li>布局看起来仍然像废话. 因此,我搜索其他看起来不错的网站,专业设计或我可以复制的任何其他示例.</li>
<li>工作几天后,网站看起来还不错. 但是没有什么我为之骄傲. 而且我仍然需要使其响应且跨浏览器兼容.</li>
</ol>
<p>如果您经历了类似的事情,您就会知道从头开始创建投资组合网站的最大缺点之一:</p>
<p>你可以花 <strong>很多时间</strong> 关于一切. 通常比预期的要多得多.</p>
<p><strong>最终结果通常是. 平庸. 最好.</strong> &#55357;&#56850;</p>
<p>让我们面对现实:大多数开发人员不是天生的设计师. 他们不需要.</p>
<p>但是问题是 <strong>不良的设计会使您看起来无能</strong> 即使一切正常,网站上的信息都不错. 因此,您最终可能会关注您的网站. 但是以负面的方式.</p>
<p>一个聪明的人曾经说过:&ldquo;最好保持沉默,被认为是傻瓜,而不是说话并消除所有疑问.&ldquo;</p>
<p>这样:没有投资组合网站比看起来不好的网站更好.</p>
<ol>
<li>作为软件开发人员,您不需要投资组合网站就可以在科技公司找到工作.</li>
<li>投资组合网站可能会成为一个巨大的时代,需要几天或几周才能变得直率.</li>
<li>设计不良或越野车的投资组合网站可能会成为障碍,而不是优势.</li>
</ol>
<p>因此,您可能需要考虑将精力集中在其他方面,而不是在定制设计的投资组合网站上花费大量时间.</p>
<p>而是专注于什么?</h2></p>
<p>求职信,简历和LinkedIn</h3></p>
<p>当您经历典型的申请过程时,雇主看到的第一件事是您的求职信和您的简历. 在其他情况下,可能是您的LinkedIn个人资料.</p>
<p>如上所述,许多投资组合网站包含与简历几乎相同(如果不是更少)的信息. <strong>但是,与网站相比,大多数开发人员仅在简历上花费一小部分时间.</strong> 这意味着在简历中付出一些努力已经可以让您脱颖而出作为候选人.</p>
<p>所以首先, <strong>按顺序获取简历并抛光您的LinkedIn个人资料</strong>.</p>
<p>完成此操作后,您申请工作写了一封不错的求职信. 通过求职信,我不一定是指您在简历旁边发送的单独文件. 这些通常永远不会看. 但是,例如,如果您通过电子邮件申请,则可以 <strong>写几行证明您研究了公司,并且对工作非常感兴趣.</strong> 为了节省时间,您可以为自己准备一个模板. 但是一定要 <em>为每个应用程序自定义</em>.</p>
<p>由于写简历可能很难,这里有一些快速提示:</p>
<ol>
<li>找到一个漂亮的模板. 没有什么奢侈的. 只是一个简单且标准的模板. 您也可以使用简历构建器,例如FlowCV.</li>
<li>如果您立即拒绝您的应用程序,请查看此简历扫描仪. 这应该有助于通过自动应用程序过滤器.</li>
<li>例如,在RemumeWord中获取免费的简历评论.com或zipjob.com.</li>
</ol>
<p>建立一个很棒的github投资组合</h3></p>
<p>使用时间的另一种好方法是改善您的GitHub存储库. 对于雇主,评估​​您的编码技能非常重要. 以及如何比实际代码更好地证明这些证明?</p>
<p>这就是为什么在您的github投资组合中投入时间很重要的原因. 特别是,当您没有专业经验的记录时.</p>
<p>您不需要很多存储库或大型项目. 但是许多有抱负的初级开发人员的项目缺乏专业精神. 再次, <strong>有了一些技巧,您已经可以在其他候选人中脱颖而出</strong>. 我最喜欢的提示是</p>
<ol>
<li>写一个干净,描述性和信息丰富的回教徒. 一些想法:添加屏幕截图,对应用程序的解释,描述您的技术决策,添加链接到您希望其他人找到的代码中的位置.</li>
<li>使用衬里来确保一致的代码格式.</li>
<li>如果您想走额外的英里写自动测试. 不用担心,只有少数测试可能已经有所帮助. 如果您是React Dev,并且是测试的新手,则可以使用本初学者指南.</li>
</ol>
<p>如果您想要有关如何在Github上构建出色投资组合项目的更多提示,请访问此博客文章.</p>
<blockquote><p><strong>您是React Dev,想知道您是否准备好在专业团队中的第一份工作?</strong> 如果您可以在获得宝贵的专业技能的同时体验如何像专业人士一样工作该怎么办?</p><p>查看我的毕业课程.开发并在模拟团队环境中为您的投资组合建立一个项目,并具有设计,任务,专业的GIT工作流程和代码评论.</p></blockquote>
<p>无论如何需要一个投资组合网站? 最小化风险</h2></p>
<p>我想我做了案子: <strong>两个最大的风险因素</strong> 建立投资组合网站的是时间投资和潜在的不良结果.</p>
<p>自从 <strong>个人网站不需要</strong> 要找到一份工作(至少如果您遵循正常申请流程),您应该三思而后行.</p>
<p>如果您想建立一个投资组合网站 <strong>尝试最大程度地减少两个风险因素</strong>. 考虑使用现成的模板,以确保外观是专业的,并且您不会浪费很多时间在Custom CSS上. 静态网站构建器或诸如Ghost或WordPress之类的CM可以帮助您进一步减少时间投资. <strong>一个更简单的选择是为您的github配置文件创建一个读数.</strong></p>
<p>如果您喜欢这篇文章,您可能会对以下免费课程感兴趣. 如果您在Twitter或任何其他平台上与您的朋友分享此博客文章,这对我也非常有帮助.</p>
<h2>如何使用HTML,CSS和JavaScript构建自己的开发人员投资组合网站</h2>
<p><img src=”https://www.freecodecamp.org/news/content/images/size/w60/2023/01/kolade-recent.jpg” alt=”科拉德·克里斯” width=”400″ height=”400″ /></p>
<p> 科拉德·克里斯</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/size/w2000/2021/09/responsive-web-design.png” alt=”如何使用HTML,CSS和JavaScript构建自己的开发人员投资组合网站” width=”680″ height=”340″ /></p>
<p>这些天每个人都需要网站和网络应用程序. 因此,如果您担任网络开发人员,您会有很多机会.</p>
<p>但是,如果您想获得网络开发人员的工作,您将需要一个好的投资组合网站来展示您的技能和经验.</p>
<p>在本教程中,我将讨论您应该自己制作投资组合网站的一些主要原因. 然后,我会带您浏览如何使用HTML,CSS和JavaScript构建自己完全响应的投资组合网站.</p>
<h2>表中的内容</h2>
<ul>
<li>什么是开发人员投资组合网站?</li>
<li>为什么您应该拥有一个投资组合网站</li>
<li>投资组合项目 – 如何构建自己的在线开发人员投资组合</li>
<li>项目文件夹结构</li>
<li>基本的HTML样板</li>
<li>Navbar部分</li>
<li>如何设置纳维托</li>
<li>如何建立英雄部分</li>
<li>如何设计英雄部分</li>
<li>如何建立更多关于我的部分</li>
<li>如何建立技能部分</li>
<li>如何设计技能部分</li>
<li>如何构建项目部分</li>
<li>如何设计项目部分</li>
<li>如何建立联系部分</li>
<li>如何样式接触部分</li>
<li>如何设计社交图标</li>
<li>如何将滚动添加到顶部按钮</li>
<li>滚动到顶部按钮的HTML</li>
<li>如何样式滚动到顶级图标</li>
<li>如何使您的投资组合网站响应迅速</li>
<li>如何为平板电脑和手机创建媒体查询(最大宽度720px)</li>
<li>如何构建汉堡菜单</li>
<li>汉堡菜单的JavaScript</li>
<li>如何使英雄部分响应迅速</li>
<li>如何使更多关于我的部分反应迅速</li>
<li>如何使技能部分响应迅速</li>
<li>如何使项目部分响应迅速</li>
<li>如何使联系形式响应迅速</li>
<li>如何使网站在小型电话上响应迅速</li>
<li>结论</li>
</ul>
<h2>什么是开发人员投资组合网站?</h2>
<p>开发人员投资组合网站向潜在雇主提供有关您从事的技能,经验和项目的相关信息.</p>
<p>您可以将您的投资组合网站视为您的在线简历.</p>
<h2>为什么您应该拥有一个投资组合网站</h2>
<h3>1. 投资组合网站增加了您的在线形象</h3>
<p>作为开发人员,您需要在线形象. 您可以在Twitter,Facebook和Instagram等社交媒体平台上培养这种在线形象. 但是这些并不完全是您自己的,因为这些平台的主持人几乎可以完全控制您的帐户.</p>
<p>借助您自己的投资组合网站,它可以在您自己的域上进行。. 当人们在Google等搜索引擎上搜索您的名字时,他们可以很容易地找到您,只要您在SEO方面都准备了正确的东西.</p>
<h3>2. 投资组合网站是您的在线简历</h3>
<p>您的投资组合网站就像您的在线简历. 潜在的客户和招聘经理可以轻松找到您在线并查看您以前的项目和技能.</p>
<p>这也意味着,当任何人都想给您一个为他们工作的机会时,他们要求您以前的项目,您只需给他们一个链接到您的网站(您的投资组合). 它不仅具有您的项目,而且还具有有关您过去经验的技能和信息.</p>
<h3>3. 投资组合网站显示您所在领域专业知识的证据</h3>
<p>作为开发人员(更不用说建立自己拥有的)产品组合网站发出明确的信息,即您正在付诸实践,并且您知道自己在做什么.</p>
<p>投资组合还可以帮助客户建立信任,因为他们有直接证据表明您的工作质量.</p>
<h2>投资组合项目 – 如何构建自己的在线开发人员投资组合</h2>
<p>您可以使用HTML,CSS和JavaScript为自己创建一个很酷的投资组合网站. 这就是我们要在这里做的.</p>
<p>我已经在几个月前完成了此操作,并将其作为Gumroad上的免费产品提供给所有人,所以我决定创建一个有关如何完成它的教程.</p>
<p>这是我们将要建立的现场演示.</p>
<p>要跟随我,您可以从github获取起动文件.</p>
<h3>项目文件夹结构</h3>
<p>为了避免混乱,我将在其各自的文件夹中安排HTML,CSS,JavaScript,图标和图像.</p>
<p>HTML文件放在根文件夹中,图像,图标,CSS和JavaScript文件将在其单独的子文件夹中,在Asset文件夹中. 这是一个普遍的做法.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss1.png” alt=”SS1″ width=”1280″ height=”800″ /></p>
<p>还有一个读数文件,其中包含我在项目中使用的所有工具,以及它们各自的链接. 它在入门文件中可用.</p>
<h3>基本的HTML样板</h3>
<p>每个人都使用HTML,CSS和JavaScript编码整个项目时都有自己的喜好. 有些人喜欢首先定义整个HTML样板,然后再定义CSS,但我喜欢按章节做所有事情.</p>
<p>因此,我将从Navbar部分开始. 但是,最好显示基本的HTML样板的样子。</p>
<pre><code > <html lang=”en”> <head> <title>简·杜(Jane Doe)| Web开发人员</title> </head> <body> <script src=”https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/assets/js/app.js”></script> <script type=”module” src=”https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js” ></script> <script nomodule src=”https://unpkg.com/[email protected]/dist/ionicons/ionicons.js” ></script> </body> </html> </code></pre>
<p>我在HTML中有所有部分都评论了,因此您可以更好地跟随. 在样板中,还有用于动画CSS(CSS动画库)和离子图标的CDN,我为项目选择的图标库.</p>
<p>我有一个通过favicon io制作的,并将其链接在头部部分. Favicon是在浏览器选项卡上显示的小图像.</p>
<h3>Navbar部分</h3>
<p>NAVBAR部分包含H1文本的简单徽标和NAV菜单:</p>
<p>如果您想知道按钮元素代表什么,则是在移动设备上切换导航菜单的标准(汉堡菜单). 这将隐藏在桌面上,但在手机上显示.</p>
<p>我还将将网站的各个部分链接到这些导航项目,因此,当用户点击任何NAV项目时,它们将被带到与他们单击的NAV项目相对应的部分.</p>
<p>这就是为什么我将设置为#about,#skills,#projects和#contacts的超链接引用(HREF)属性分别. 网站的各个部分将具有这些属性作为ID.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss2.png” alt=”SS2″ width=”1280″ height=”767″ /></p>
<p>Navbar现在看起来像这样: <br /></p>
<h3>如何设置纳维托</h3>
<p>Navbar肯定需要一些样式才能使其看起来更好.</p>
<p>在正确造型Navbar之前,我将声明一些CSS变量,以使情况更容易. 这是因为,使用CSS变量,避免CSS文件中的冗余和重复更容易.</p>
<p>声明CSS变量的语法看起来像这样:</p>
<pre>:根</pre>
<p>要使用该变量,您可以这样做:</p>
<pre>选择器</pre>
<p>我还将从Google导入Roboto字体,并声明一些CSS重置以删除一些默认功能,例如元素的保证金和填充,锚定标签的文本定义以及列表式列表型列表型列表.</p>
<pre>@Import url(&ldquo; https:// fonts.googleapis.com/css2?family = roboto:ital,wght@0,400; 0,900; 1,700&display = swap’); / *变量 * /:root < –font-family: “Roboto”, sans-serf; –normal-font: 400; –bold-font: 700; –bolder-font: 900; –bg-color: #fcfcfc; –primary-color: #4756df; –secondary-color: #ff7235; –primary-shadow: #8b8eaf; –secondary-shadow: #a17a69; –bottom-margin: 0.5rem; –bottom-margin-2: 1rem; –line-height: 1.7rem; –transition: 0.3s; >/ *变量结束 */ html < scroll-behavior: smooth; >/ * CSS重置 */ * < margin: 0; padding: 0; box-sizing: border-box; >Ul < list-style-type: none; >A < text-decoration: none; color: var(–primary-color); >答:悬停 < color: var(–secondary-color); >身体</pre>
<p>如果您注意到,我将网站上所有链接的悬停状态从第39行到41. 当用户徘徊在任何链接上时,它会更改为我在CSS变量中设置的辅助颜色.</p>
<p>这是声明CSS变量的好经验法则:如果您发现自己在同一CSS文件中经常使用相同的属性和值,则应声明其变量以避免重复.</p>
<p>您还应该像我一样使您的变量名称尽可能描述性,以帮助其他可能使用您的代码的人.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss3.png” alt=”SS3″ width=”1280″ height=”764″ /></p>
<p>通过重置,浏览器中的Navbar有一些更改: <br /></p>
<p>为了设置Navbar并对齐其中的内容,我将使用CSS Flexbox:</p>
<p><strong>上面的CSS是什么?</strong></p>
<p>我用位置属性使Navbar Sticky粘在一起,因此无论如何它仍然保持最高.</p>
<p>具有1个值的Z Index属性可确保Navbar通过网页上的任何其他元素显示. 这就是您制作粘性的Navbar的方式.</p>
<p>此外,我还在盒子上属性属性在纳维托的底部应用了阴影.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss4.png” alt=”SS4″ width=”1280″ height=”762″ /></p>
<p>Navbar有了新的外观: <br /></p>
<p>但是我们还没有完成. 导航菜单项需要并排,而不是彼此之间. 我也会用flexbox做到这一点.</p>
<p>我还将通过制作H1,NAV和汉堡菜单按钮来完成其余的Navbar样式. 我将使用一些CSS变量最初声明.</p>
<pre>NAV H1 < color: var(–primary-color); >NAV A < color: var(–primary-color); transition: var(–transition); >NAV A:悬停 < color: var(–secondary-color); border-bottom: 2px solid var(–secondary-color); >Nav UL < display: flex; gap: 1.9rem; >Nav ul li</pre>
<p>汉堡菜单栏也需要隐藏. 它有一类 .Burger-Menu,因此我们可以将其设置为无显示,也可以使按钮看起来更好.</p>
<pre>.汉堡</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss5.png” alt=”SS5″ width=”1280″ height=”759″ /></p>
<p>我们的Navbar现在看起来更好: <br /></p>
<h3>如何建立英雄部分</h3>
<p>我们将要处理的下一部分是英雄部分. 这不会像Navbar那样多的工作.</p>
<p>英雄部分的HTML样板在下面的代码段中:</p>
<p><pre><code > <section > <div ><h2 >关于我</h2> <p >lorem ipsum dolor坐在amet,促销掺杂elit. Mollitia sed dolorem fugit sapiente porro veniam pariatur dolore dolore delectus inventore tempore tempore sig nemo,iste ullam illo Laboriosam maiores maiores ropudiandae quos!</p> </div> </section> </code></pre>
<p>唯一有点奇怪的是Animate__ Animated Animate ____________________________________________________. 课程名称来自动画CSS,它们用于使《关于我的文字容器》动画.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss6.png” alt=”SS6″ width=”1280″ height=”768″ /></p>
<p>这样,该网站将获得新的外观: <br /></p>
<h3>如何设计英雄部分</h3>
<p>Flexbox将再次进行救援! 本节有两组主要内容 – 图像和文本. 因此我们可以使用Flexbox并排显示它们. 您可以在下面的CSS代码段中看到它的工作原理:</p>
<pre>.英雄</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss7.png” alt=”SS7″ width=”1280″ height=”767″ /></p>
<p>我们的简·杜(Jane Doe)图像太大了,因此我们需要降低其宽度和高度. <br />我们还需要为Bio Text(关于我的文本)设计样式的可读性. 最初声明的CSS变量在这里非常有用.</p>
<pre>.英雄IMG < height: 37.5rem; width: 37.5rem; >.生物 < width: 25rem; padding: 0.625rem; border-radius: 6px; box-shadow: 0px 2px 15px 2px var(–primary-shadow); >.生物H1 < margin-bottom: var(–bottom-margin); >.生物p</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss8.png” alt=”SS8″ width=”1280″ height=”768″ /></p>
<p>英雄部分现在看起来很漂亮: <br /></p>
<h3>如何建立更多关于我的部分</h3>
<p>我包括了本节,以包含一些有关简·多伊的更多信息和某些占位符文本.</p>
<p>您可以利用这一点,包括您无法放入关于我的信息的信息.</p>
<p>本节的HTML样板非常简单:</p>
<pre> <code > <section ><h2>更多关于我</h2> <p>lorem ipsum dolor sit amet consectetur掺杂eLit. Reiciendis nesciunt除外,除了库库obcaecati Incidunt voluptatem ipsam sunt ipsum,自动deleniti cupidatity molestias quis quis quie quae quae quae quae quae quae quae totam porro dicta porro dicta iure animi Inventore,veniam hic hic hic hic hic! Omnis Nulla,Dlectus a voluptatibus</p> <p>lorem ipsum dolor sit amet consectur,掺杂的elit. Reatuntur Nostrum Dolor减,Libero delectus praesentium perferendis</p> <p>lorem ipsum dolor sit amet consectetur掺杂eLit. Vero,Reactuntur Labore? EA Totam totam voluptas amet!</p> </section> </code></pre>
<p>CSS也很简单. 我们要做的就是使用-bg-color CSS变量设置背景色,通过设置填充,保证金,线路高,并将H2文本对齐到中心:使该部分可读:</p>
<pre>.更多关于 < background-color: var(–bg-color); padding: 1rem 6rem; >.更重要的是H2 < margin-bottom: var(–bottom-margin); text-align: center; >.更重要的是p</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss9.png” alt=”SS9″ width=”1280″ height=”767″ /></p>
<p>在浏览器中,关于部分的信息越多: <br /></p>
<h3>如何建立技能部分</h3>
<p>从现场演示中,您会看到技能部分包含相关技能,例如HTML,CSS,JavaScript等. 我能够从Icons中获得这些语言的图标8.</p>
<p>本节的HTML样板在下面的代码段中:</p>
<pre> <code > <section ><h2 >我的最高技能</h2> <div > <div > </div> <div > </div> </div> </section> </code></pre>
<p>总共有六个图标. 而且我不必将它们与Flexbox保持一致,而是将它们分为两个地方(3个教学),与第一盘和第二集的类别相结合,因此它们彼此保持顶峰. 这意味着我们将应用的样式将更可读. 简单的!</p>
<p>请注意,我一直将加载属性附加到单个图标和图像上,并将其设置为懒惰. 这将确保仅当用户滚动到包含它们的部分时才加载图像. 这将随后加快加载时间,因为只有所需的东西才会加载.</p>
<h3>如何设计技能部分</h3>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss10edited.jpg” alt=”SS10edited” width=”600″ height=”400″ /></p>
<p>没有样式,技能部分看起来像这样: <br /></p>
<p>我们应该对部分进行定型,因为它看起来还不够好:</p>
<pre>.技能 < max-width: 68.75rem; margin: auto; text-align: center; margin-top: 2.5rem; >.技能头 < margin-bottom: 1rem; >.技能交易者IMG < padding: 1.25rem; >.图标</pre>
<p>在上面的CSS中,我为整个部分定义了最大宽度,以将事物推到中心以获得更好的用户体验.</p>
<p>我们应用的其他样式与清晰度和可读性有关. 例如,我增加了图标的大小,以使它们具有宽度和高度属性更明显. 我还向所有图标应用了1REM(16像素)的填充物,以将它们互相推动一点点.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss11.png” alt=”SS11″ width=”1280″ height=”764″ /></p>
<p>现在的技能部分看起来很酷: <br /></p>
<p>不过,我认为该部分可以更好,因此我决定使用Boxshadow属性进行更多调整.</p>
<p>从HTML记住,有一个称为类的属性 .所有图标附加的图标卡. 我将使用班级名称将所有图标都放在卡中:</p>
<pre>.图标卡</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss12.png” alt=”SS12″ width=”1280″ height=”760″ /></p>
<p>技能部分看起来好多了: <br /> <br />看那个!</p>
<h3>如何构建项目部分</h3>
<p>投资组合网站的主要目的之一是展示您的项目. 因此,我们需要建立一个部分来展示您过去从事的项目.</p>
<p>本节可能是最乏味的风格,但是Flexbox不会停止成为我们的朋友.</p>
<p>本节的HTML在下面的代码段中:</p>
<p><pre><code > <section ><h2 >我最近的一些项目</h2> <div > <div > <img src=”https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/assets/images/expenseTracker.png” alt=”费用跟踪器” loading=”lazy” /><h3 >费用跟踪器</h3> <p >lorem,ipsum dolor sit amet consettur掺杂eLit. Quas评估VEL Inventore Labore Commodi modi quos culpa aut saepe! 别名!</p> 一探究竟 </div> <div > <img src=”https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/assets/images/netflixClone.png” alt=”Netflic-Clone” loading=”lazy” /><h3 >Netflix克隆</h3> <p >lorem,ipsum dolor sit amet consettur掺杂eLit. Quas评估VEL Inventore Labore Commodi modi quos culpa aut saepe! 别名!</p> 一探究竟 </div> <div > <img src=”https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/assets/images/greenyEarth.png” alt=”绿色地球” loading=”lazy” /><h3 >绿色的地球</h3> <p >lorem,ipsum dolor sit amet consettur掺杂eLit. Quas评估VEL Inventore Labore Commodi modi quos culpa aut saepe! 别名!</p> 一探究竟 </div> </div> </section> </code></pre>
<p>查看HTML,总共有三个项目,所有项目都在其个人divs中,带有项目容器和项目卡的班级名称. 这些班级名称将有助于始终如一地设计项目.</p>
<p>包含的部分元素本身具有一类项目,以及项目的ID属性. 类名称用于样式,ID用于将其链接到Navbar上的项目链接.</p>
<p>这些项目的单独图像具有Project-PIC的类名称,其标题,带有一类项目标题,更多详细信息,带有项目 – 详细信息的类名称,以及带有项目链接的类名称的链接 .</p>
<p>给所有这些独特的班级名称的唯一目的是为它们设计.</p>
<p>这些是我最初从事开发人员时从事自己工作的一些项目.</p>
<p>项目部分在浏览器中看起来像这样: <br /></p>
<p>不过,该部分看起来还不错 – 甚至是图像引起的令人讨厌的水平滚动栏. 所以我们与CSS有很多关系.</p>
<h3>如何设计项目部分</h3>
<p>首先,我将通过在CSS变量中声明的灰色颜色(-bg-color)来给整个部分颜色。.</p>
<p>我还将通过usung the Project-PIC类降低项目图像的宽度和高度. 然后,我将使用Flexbox并排放置项目.</p>
<pre>.项目 < background-color: var(–bg-color); padding: 32px 0; margin-top: 2rem; >.Project-PIC < width: 65%; height: 60%; >.项目容器</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss13Edited.jpg” alt=”SS13eded” width=”600″ height=”400″ /></p>
<p>该部分看起来好多了: <br /></p>
<p>图像现在看起来更好,但是项目标题,项目详细信息和项目链接必须在其各个容器中很好地对齐.</p>
<p>整个项目部分还需要推到中心. 但是,您不需要FlexBox来执行此操作 – 可以通过将文本对齐属性设置为中心值来完成:</p>
<pre>.项目标题 < text-align: center; margin-bottom: 1rem; >.项目容器</pre>
<p>请注意,我还设置了21个宽度.单个项目容器的875REM(350像素). 这将使他们从侧面分开,以获得更好的用户体验. 在这种情况下,用户在看到所有内容之前就不需要一路看.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss14.png” alt=”SS14″ width=”600″ height=”400″ /></p>
<p>该部分现在看起来更好: <br /></p>
<p>我们仍然可以使这一部分变得更好. 项目标题,项目详细信息和项目链接看起来汇总在一起,因此我们应该添加一些填充和利润.</p>
<p>单个项目容器还需要看起来更独特. 盒子阴影物业将再次在这里发挥作用,所以我将它们放在他们的单个卡中.</p>
<pre>.项目容器p < padding: 0.4rem; >.项目名称 < margin-bottom: var(–bottom-margin); >.项目详细信息 < margin-bottom: var(–bottom-margin); >.项目卡</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss15.png” alt=”SS15″ width=”1280″ height=”768″ /></p>
<p>现在,项目部分看起来更好: <br /></p>
<h3>如何建立联系部分</h3>
<p>如果潜在的雇主或客户发现您的投资组合网站很有吸引力,他们可能想与您联系. 因此,您将需要在本节中获得联系表,以及与您的社交媒体配置文件的链接.</p>
<p>本节的HTML看起来像这样:</p>
<pre><code > <section ><h2>与我联系</h2> <div > <div > <form action=”https://formspree.io/f/xyylngw” method=”POST”> <div ><label for=”name”>姓名</label> </div> <div ><label for=”email”>电子邮件</label> </div> <div ><label for=”message”>信息</label> </div> </form> </div> </div> </section> </code></pre>
<p>在这里,我们已经构建了一个使用输入字段的联系表格,以供名称和电子邮件,一个文本方面,以便人们可以输入要发送的消息,以及提交消息的提交按钮,以便您可以看到它.</p>
<p>如果您很好地看一下表单元素,您会发现我将操作属性设置为formspree的URL. 这是我为表格提交选择的选择. 使用FormSpree,您可以直接在电子邮件收件箱中获取消息,而无需设置具有复杂PHP或JavaScript的服务器.</p>
<p>请注意,您无法使用我的URL – 它对您不起作用. 您可以免费在Formspree网站上免费设置自己的. 我还附加了一个有关如何将Formspree设置为项目文件的资源.</p>
<p>我已经为单个输入设置了一些ID和类属性来样式. 所有输入字段也有一个名称属性. 这是由Formspree表单提交服务所要求的.</p>
<p>为了获得基本验证,我附加了一个必需的属性,因此,如果用户留下任何输入字段,则表格拒绝提交.</p>
<h3>如何样式接触部分</h3>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss16Edited.jpg” alt=”SS16eded” width=”600″ height=”400″ /></p>
<p>没有样式,联系部分看起来根本不好: <br /></p>
<p>我在CSS中要做的只是将整个内容与中心保持一致,并使输入字段看起来更好.</p>
<p>使用文本对齐和保证金属性,您可以将H2和接触表格的容器对齐到中心.</p>
<p>我还将将整个表单放在带有盒子属性的卡中.</p>
<pre>.接触 < margin-top: 2rem; >.联系H2 < text-align: center; margin-bottom: var(–bottom-margin-2); >.接触形式 – 容器</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss17.png” alt=”SS17″ width=”600″ height=”400″ /></p>
<p>输入字段,文本方面,标签和占位符肯定还需要一些样式来帮助保持一致性和清晰度:</p>
<pre>.接触形式 – 容器标签 < line-height: 2.7em; font-weight: var(–bold-font); color: var(–primary-color); >.接触形式 – 容器textarea < min-height: 6.25rem; font-size: 14px; >.接触形式 – 容器 .输入场</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss18.png” alt=”SS18″ width=”600″ height=”400″ /></p>
<p>现在的表格看起来更好: </p>
<p>但是占位符与标签不一致. 因此,我们需要给它颜色和一些填充. 我将在CSS变量列表中给它一个主颜色集.</p>
<p>为了选择占位符的造型者,您可以使用占位符伪级:</p>
<pre>.输入场::占位符</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss19.png” alt=”SS19″ width=”600″ height=”400″ /></p>
<p>在接触表中,唯一剩下的就是样式按钮. 按钮非常易于样式:</p>
<pre>.提交Btn</pre>
<p>在上面的CSS代码段中,我通过给出100%的宽度使按钮在表单容器中一直穿过. 我还通过一些填充,边距,边框和大胆的字体重量使它更加明显.</p>
<p>Border-Radius属性为5px,去除了锋利的边缘,并且当按钮处于悬停状态时,过渡会稍微放慢速度.</p>
<p>悬停状态在下面的CSS代码段中定义:</p>
<pre>.提交BTN:悬停</pre>
<p>现在的表格看起来好多了: <br /></p>
<p>请记住,在您的投资组合网站上拥有您的社交媒体链接是一个可能想与您联系的人. 那是我们要做的下一件事,我们将以独特的方式做到这一点.</p>
<p>社交按钮的HTML在下面的代码段中:</p>
<pre> <code > </code></pre>
<p>我选择的社交图标是来自Icons的动画gif图标。8. 我将所有这些都放在一个与社交类别的容器中.</p>
<p>看看下面对您眨眨眼的一些动画社交媒体图标: <br /></p>
<h3>如何设计社交图标</h3>
<pre>.社交 < display: flex; flex-direction: column; position: fixed; right: 1%; bottom: 50%; >.社会</pre>
<p>借助上面的CSS,社交图标将在网页上的右侧固定,因此任何访问网站的人都可以看到它们,无论他们滚动何处.</p>
<p>我还通过分配所有减少宽度和高度属性值来减小图标的大小. <br /></p>
<p>唯一要做的就是页脚. 除了保留版权符号和心脏的保留角色实体外,页脚HTML和CSS中没有什么复杂的:</p>
<p><pre><code > <footer><p >&copy; 版权2021</p> <p >由Kolade Chris(Ksound)建造</a > </p> </footer> </code></pre>
<pre>页脚</pre>
<p>我们现在有一个成熟的投资组合网站! <br /></p>
<p>但是我们需要使其响应迅速,因为它在较小的设备上看起来不好: <br /></p>
<p>我们需要使单个部分的所有内容显示在另一个部分的部分(在列布局中). 我们可以通过媒体查询和Flexbox轻松地做到这一点.</p>
<p>在添加媒体查询以进行响应之前,让我们使用HTML,CSS和JavaScript实现滚动按钮.</p>
<h2>如何将滚动添加到顶部按钮</h2>
<h3>滚动到顶部按钮的HTML</h3>
<p>对于HTML,我从Icons8获得了一个动画图标,并决定将其放入I标签中.</p>
<p>i标签具有用于造型的滚动类别的类别,并且可以使用JavaScript选择它的滚动ID. 这是因为在我的项目中,我喜欢使用类造型和ID来进行JavaScript功能.</p>
<pre> <code ><i > </i> </code></pre>
<h3>如何样式滚动到顶级图标</h3>
<p>我将像社交图标一样使滚动式图标固定. 我还将给它一个指针的光标属性,因此,当用户徘徊时,光标会更改.</p>
<p>随着滚动到顶部图标附有上箭头的类,我还将增加图标的大小以备:</p>
<pre>.向上滑动 < position: fixed; right: 0.5%; bottom: 3%; cursor: pointer; >.向上箭头</pre>
<p>图标看起来不错: <br /></p>
<p>但这还没有做任何事情. 因此,我们需要使用几行JavaScript使其功能正常:</p>
<pre><code >//滚动到顶部功能const scrollup =文档.querySelector(&ldquo;#滚动&rdquo;);向上滑动.AddEventListener(&ldquo;单击&rdquo;,()=> < window.scrollTo(< top: 0, left: 0, behavior: “smooth”, >); >);</code> </pre>
<p><strong>上面的脚本是什么?</strong></p>
<p>第一行选择带有ID属性的滚动到顶按钮. 我们在此处使用了querySelector()方法. 您也可以使用getElementById()方法.</p>
<p>在其余行中,我使用单击EventListener来获取用户的单击操作,并利用Windows对象的部分滚动,以使按钮功能函数.</p>
<p>使用此功能,当用户单击&ldquo;滚动到顶部&rdquo;按钮时,页面滚动到网站的顶部和左侧顺利进行. 我通过将上下设置为0,从0到0,而行为顺利这样做。 .</p>
<p>您可以通过打开浏览器的开发人员工具控制台来了解有关Windows对象的更多信息. 输入窗口并击中Enter,然后您会看到Windows对象中的所有可用内容,就像我在下面所做的那样:</p>
<h2>如何使您的投资组合网站响应迅速</h2>
<p>为了使网站响应迅速,我们将使用CSS媒体查询和Flexbox.</p>
<p>首先,我们需要使图像和文本看起来较小,然后我们通过将flex方向设置为列以垂直布局显示每个部分的内容.</p>
<p>在媒体查询中,我将使用2个断点 – 720px和420px .</p>
<p>720px断点用于平板电脑和手机,420px适用于iPhone 6和小型Android手机等小型手机.</p>
<p>媒体查询断点是您希望网站的内容根据设备的宽度做出响应的点. 因此,根据您是指定最大宽度还是最小宽度,在720px断点下放置的任何代码都在屏幕上反映出屏幕小于或大于720px的设备。.</p>
<p>在720px的最大宽度的情况下,媒体查询语法看起来像这样:</p>
<pre><code >@Media屏幕和(最大宽度:720px) < /*changes reflects on screen with a width of 720px and below*/ ></code></pre>
<h3>如何为平板电脑和手机创建媒体查询(最大宽度720px)</h3>
<p>我们将开始从Navbar发出网站的响应,因为Navbar在较小的设备上看起来不好.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss21.png” alt=”SS21″ width=”600″ height=”400″ /></p>
<p>首先,我将减少Navbar的填充物,因此H1徽标和NAV菜单项非常适合:</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss22.png” alt=”SS22″ width=”600″ height=”400″ /></p>
<p>现在,事情看起来好多了: <br /></p>
<p>在小型设备上,NAV菜单项需要彼此之间,并且需要隐藏. 因此,它是更新代码的时间,因此汉堡菜单最初是隐藏的.</p>
<h3>如何构建汉堡菜单</h3>
<p>要制作汉堡菜单,我们需要将导航菜单项从视图中取出. 然后,我们需要在&ldquo;导航列表&rdquo;项目上设置一类显示的节目,这些显示将用几行JavaScript切换(请记住,导航项目在无序列表中).</p>
<pre> Nav UL < position: fixed; background-color: var(–bg-color); flex-direction: column; top: 86px; left: 10%; width: 80%; text-align: center; transform: translateX(120%); transition: transform 0.5s ease-in; >Nav ul li</pre>
<p>在上面的CSS代码段中,我设置了固定的位置(UL),以使其漂浮在屏幕上. 我还将其从顶部推下了86px,顶部为86px,左上是10%.</p>
<p>我给了它的宽度为80%的父母(来自HTML的导航元素),将其推到中心,并以文字合格:中心将其推入中心,最后将其藏在Transform属性设置为Translatex(120%)的情况下将其藏起来。 . 这会将其推向右侧并将其迫使它离开视口.</p>
<p>而现在,当用户点击显示导航项目时,它们都从右侧滑入. 惊人的.</p>
<p>如果您希望导航菜单项从左侧滑入,请将转换属性值更改为转换:Translatex(-120%)(这是转换的直接相反:Translatex(120%)). 这很容易,取决于您的喜好.</p>
<p>我还向NAV项目分配了8px的保证金,以提供更多空间.</p>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss22-1.png” alt=”SS22-1″ width=”600″ height=”400″ /></p>
<p>Navbar现在看起来像这样: <br /></p>
<p>汉堡菜单栏仍然隐藏. 因此,我们需要通过给出一个块显示,设置一类节目以在x轴上翻译为0,以显示它,然后用JavaScript切换它.</p>
<pre> .汉堡 < display: block; >Nav UL.展示</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss24.png” alt=”SS24″ width=”600″ height=”400″ /></p>
<p>现在显示我们的汉堡菜单栏,但导航项目仍然隐藏. 为了展示它,我们需要使用JavaScript打开和关闭节目课程.</p>
<h3>汉堡菜单的JavaScript</h3>
<p>要使用JavaScript打开和关闭Navbar Nav菜单项,我们首先需要选择Navbar的所有相关项目并将它们存储在某些变量中:</p>
<pre><code >// NAV Hamburgerburger Selections const Burger =文档.QuerySelector(&ldquo;#Burger-Menu&rdquo;); const ul =文档.QuerySelector(&ldquo; Navul&rdquo;); const nav =文档.QuerySelector(&ldquo; NAV&rdquo;);</code> </pre>
<ul>
<li>汉堡变量选择汉堡菜单栏</li>
<li>UL变量选择列表项(完全链接)</li>
<li>NAV变量选择容器本身(NAV元素)</li>
</ul>
<p>接下来我们需要做的是切换导航.在用户单击汉堡菜单栏时显示课程. 我们将通过在汉堡菜单栏中添加单击EventListener,然后使用切换方法删除并添加Show类 .</p>
<p>请记住,我们选择了它并将其存储在一个称为汉堡的变量中 .</p>
<pre><code >汉堡包.AddEventListener(&ldquo;单击&rdquo;,()=> < ul.classList.toggle(“show”); >);</code> </pre>
<p>现在,我们的NAV物品可以打开和关闭: <br /></p>
<p>但是有一个问题 – 单击任何NAV项目链接时,移动导航不会被隐藏. 因此,我们需要删除NAV UL的类.显示何时单击任何NAV项目链接.</p>
<p>我们也可以使用几行JavaScript来完成此操作:</p>
<pre><code >//关闭汉堡菜单单击链接时//选择nav链接const navlink =文档.querySelectorall(&ldquo;.NAV-LINK&rdquo;); NAVLINK.foreach((link)=>链接.AddEventListener(&ldquo;单击&rdquo;,()=> < ul.classList.remove(“show”); >);</code> </pre>
<p>请记住,NAV链接具有HTML的NAV-Link类. 因此,我选择了所有这些类,然后将它们放入一个称为navlink的变量中. 我们使用querySelectorall()方法来完成此操作.</p>
<p>然后,我使用foreach数组方法循环遍历所有链接,然后在所有链接中聆听了所有链接. 然后,我使用dom提供的remove()方法来删除显示的任何nav菜单项的任何时间. 这将使所有列表项目退出视口.</p>
<p>这是很多工作. 我们刚刚涵盖的内容可以为任何网站做汉堡菜单.</p>
<h3>如何使英雄部分响应迅速</h3>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss25.png” alt=”SS25″ width=”600″ height=”400″ /></p>
<p>目前,英雄部分看起来并不好: <br /></p>
<p>我们需要做的就是在媒体查询中给它一个弹性的列方向,降低Jane Doe图像的宽度和高度,并使关于我的文字(Bio Text)可读.</p>
<pre>.英雄 < margin-top: -4rem; flex-direction: column; gap: 0; >.英雄IMG < height: 37.5rem; width: 30rem; >.生物</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss26.png” alt=”SS26″ width=”600″ height=”400″ /></p>
<p>英雄部分现在看起来更好: <br /></p>
<h3>如何使更多关于我的部分反应迅速</h3>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss27.png” alt=”SS27″ width=”600″ height=”400″ /></p>
<p>关于我的部分越多,看起来并不糟糕,但是我们当然可以改进它: <br /></p>
<p>我有以下CSS,可以使其可读性和更呈现:</p>
<pre> .更多关于 < margin-top: 2rem; padding: 1rem 3.5rem; >.更重要的是H2 < text-align: center; >.更重要的是p</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss28.png” alt=”SS28″ width=”600″ height=”400″ /></p>
<p>我将整个部分稍微推了一点,并增加了各个方面的填充物,将H2对齐到中心,并证明了文本合理. <br /></p>
<h3>如何使技能部分响应迅速</h3>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss29.png” alt=”SS29″ width=”502″ height=”764″ /></p>
<p>技能图标看起来太大了: <br /></p>
<p>我们在媒体查询中需要做的就是减少具有宽度和高度属性的图标的大小:</p>
<pre>.图标</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss30.png” alt=”SS30″ width=”497″ height=”756″ /></p>
<h3>如何使项目部分响应迅速</h3>
<p>在&ldquo;项目&rdquo;部分中,我们需要通过将弹性方向设置为列来使三个项目彼此之间堆叠. 我还将稍微降低单个容器的宽度.</p>
<pre> .项目容器 < flex-direction: column; >.项目容器</pre>
<h3>如何使联系形式响应迅速</h3>
<p>需要减少接触表格的宽度以将其从侧面推开,并确保固定的社交媒体图标不在顶部.</p>
<p>我们需要做的就是设置最大宽度:</p>
<pre> .接触形式 – 容器</pre>
<p><img src=”https://www.freecodecamp.org/news/content/images/2021/10/ss32.png” alt=”SS32″ width=”600″ height=”400″ /></p>
<p>现在的联系表看起来更好: <br /></p>
<h3>如何使网站在小型电话上响应迅速</h3>
<p>在诸如iPhone 6、7和8的小型手机上,社交图标和滚动图标未显示. 还有一个水平卷轴. <br /></p>
<p>为了修复这些怪癖,我将在420px断点上添加一些媒体查询:</p>
<pre><code >@Media屏幕和(最大宽度:420px) < .hero img < height: 37.5rem; width: 23rem; >.生物 < width: 18.3rem; >.项目容器 < width: 17.875rem; >.接触形式 – 容器 < max-width: 17.75rem; >></code> </pre>
<p>我减少了简·多伊图像的大小,还缩小了生物文本的宽度(关于我的文本),项目容器和触点形式容器.</p>
<p>所有这些更改将使这些图标固定在网站右侧 – 社交媒体和滚动图标. <br /></p>
<p>现在一切看起来都不错: <br /></p>
<p>这就是一切. 我们有一个响应迅速的投资组合网站.</p>
<p>您可以从此github存储库中下载成品版本作为zip文件.</p>
<p>您也可以查看投资组合网站的实时演示. 它具有一个读书文件,其中包含有关我使用的工具的信息,以及如何自定义网站.</p>
<h2>结论</h2>
<p>在本教程中,您了解了开发人员的网站是什么,以及为什么您应该拥有一个网站.</p>
<p>您还学会了如何使用HTML,CSS和JavaScript制作完全响应迅速的投资组合网站.</p>
<p>本教程的不同部分是每个小型项目,合并成一个巨大的一页网站. 例如,您可以进行卡设计,响应式菜单栏,功能性联系表格以及滚动到顶部按钮,因为教程涵盖了所有内容.</p>
<p>随时自定义网站以获取您的口味.</p>
<p>如果您觉得本教程有用,可以与您的朋友和家人分享. 我真的很感激.</p>
<h2>网站,博客和投资组合有什么区别</h2>
<p>是时候确切发现您应该为您的业务建立哪种网站设计.</p>
<blockquote><p>为自己建立互联网存在,您的业务会感到压倒性. 有很多可能性,您可以走很多方向,很难知道适合您需求的道路.</p> </blockquote>
<p>在本文中,我们将定义一些基本概念,并帮助您确定您是否需要网站,博客或投资组合. 本文还将帮助您确定博客和网站之间的区别以及投资组合网站. 这个重大决定将阐明您以后将做出的许多较小的决定.</p>
<p><img src=”https://assets.foliowebsites.com/c15da1f2b5e5ed6e6837a3802f0d1593/web-816/d50d7f8ec16b3f17.jpg” /></p>
<h3>什么是网站</h3>
<p>网站是一个通用术语,可以在互联网上几乎意味着任何类型的网站,无论是像Pinterest或Facebook一样复杂,还是仅在线价格列表.</p>
<p>您的网站将是人们了解您的地方,学习如何与您联系,访问您的价格清单并查看您的工作样本.</p>
<p>构建网站后,除非您对当前提供的定价或服务进行重大更改,否则您不必经常更改它. 在大多数情况下,您的网站应该是您的在线商店的正面,允许人们浏览和仔细阅读您的产品,服务和价格,以确定他们是否将进行最终购买. 而且,就像任何商店一样,您也应该有一种方法让人们向您询问有关业务的问题.</p>
<p><img src=”https://assets.foliowebsites.com/c15da1f2b5e5ed6e6837a3802f0d1593/web-816/4f297130938b4b7c.jpg” /></p>
<h3>什么是博客网站</h3>
<p>博客是一种基于内容的网站. 博客可能就像少年旅行的日记一样简单. 或者它可能像《纽约时报》一样复杂,这实际上是建立在WordPress上的博客,它的内容管理系统载有世界所有网站的近四分之一.</p>
<p>你需要博客吗? 好吧,博客的关键点是它易于更新,因此,随着读者不断回到您的最新观点,您可以保持新鲜感和相关性. 博客的命脉是社区和互动:阅读您发布的内容,评论并与朋友分享的人们. 博客对于内容营销至关重要.</p>
<p>会员营销人员里德·弗洛伦(Reed Floren)在他的网站上解释说</p>
<blockquote><p>&ldquo;拥有博客的美感是,一旦您进行了设置,您就可以轻松地进行更改,而不必依靠具有更多技术技能的人来对您的网站进行更改.&ldquo;</p> </blockquote>
<p><img src=”https://assets.foliowebsites.com/c15da1f2b5e5ed6e6837a3802f0d1593/web-816/702d728f9fff9355.jpg” /></p>
<h3>什么是投资组合网站</h3>
<p>投资组合网站有一份工作:展示您的工作并为您找到下一份工作. 格式杂志写道,有63%的决定雇用创意的决定来自他们的投资组合.</p>
<p>您的投资组合需要喜悦,启发和证明潜在客户您需要给他们所需要的东西需要. 潜在客户需要通过投资组合网站爱上您的产品和/或服务.</p>
<p>简而. 您的博客证明了您对趋势和专业领域的思维的最新状态,并且人们信任您(通过他们的评论和对您的帖子的反馈). 您的投资组合展示了将指导客户了解您的能力并获得下一份工作的工作.</p>
<h2>条款和条件</h2>
<p>为了换取您支付的每月,每季度或年度订阅,对开本将为您提供自定义网站的自定义网站并访问foliowebsite builder for自定义网站客户的应用程序,或者访问foliowebsite builder builder application in foliowebsite for do-yourselfself (DIY)客户.</p>
<p>只要您遵守此页面上列出的条款和条件,以及与我们可能提供给您的服务有关. 我们将根据您的网站计划类型和期限列出的规格提供服务.</p>
<p>为了清楚起见,在此页面上,&ldquo;服务&rdquo;或&ldquo;服务&rdquo;一词是指网络托管和自定义网站或网站构建器对开本将为您提供. &ldquo; foliowebsites&rdquo;或&ldquo;我们&rdquo;或&ldquo;我们&rdquo;一词是指photoup Inc的品牌Foliowebsites. 术语&ldquo;客户端&rdquo;,&ldquo;用户&rdquo;或&ldquo;您&rdquo;是指foliowebsites服务的购买者.</p>
<p>Foliowebsites随时保留权利:</p>
<ol>
<li>更改服务条款</li>
<li>更改网站服务,包括消除或停止网站服务的任何内容或功能.</li>
</ol>
<h4>费用和定价</h4>
<p>Foliowebsites根据计划类型和计划期限的时间长度,总存储使用情况,通过Folio平台进行的金融交易以及其他用户选择的服务和/或产品,每月通过自动计划的服务和/或产品来收取各种订阅和一次性费用。. 所有付款都在美元.</p>
<h4>模板和所有权</h4>
<p>FoliowEbsites拥有/将根据采购订单或其他文档为客户提供自定义网站或网站模板以及编辑工具. foliowebsites授予客户有限的,非排他性的,不可转让的许可. 对开本平台将允许客户端使用密码登录到客户端网站管理器,并上传,编辑和删除内容,文件和图像到其网站. 客户只能在其帐户中包含的foliowebsites服务器上访问数据. 除了仅阅读对日志文件的访问外,客户端和任何用户均不得有权访问,读取或写入数据,以在foliowebsites服务器上的任何其他位置或帐户中写入数据. 客户可能不会将模板用于任何其他目的.</p>
<p>你.s. 版权法和国际版权条约保护Foliowebsite模板,系统设计和数据库. 该数据库是机密信息,如下所述,属于FoliowEbsites的专有,标题应保留在Foliowebsites中. 上述所有适用的普通法和法定权利,包括但不限于机密和商业秘密材料中的权利,源代码,对象代码,菜单,结构和顺序,屏幕截图,商标,服务标记,专利和版权,应成为并将保留为foliowebsites的财产. 客户不得对此类专有权利有权利,所有权或权益,除非此处规定.</p>
<p>这些模板包含机密和商业秘密材料以及Foliowebsites的专业知识,这些材料不容易易于反向工程,反向分解或拆卸,并且可能包含描述叶子店专有的印刷或视觉上可感染的材料,Photoup Inc的品牌.</p>
<h4>退款和取消</h4>
<p>由于Foliowebsites网站模板的公开性质,所有销售都是最终的. Foliowebsites服务的每月付款不可退款. 如果用户签署季度或年度期限,然后希望在任期结束之前取消订阅,则将向用户收取一半(1/2)其剩余的汇总订阅费用学期.</p>
<p>部分数月或几年的服务或未持有开放式和/或活动帐户的几个月的退款或退款将没有退款或信用额度. 为了平等对待每个人,不会例外.</p>
<p>如果客户不取消自动订阅在Foliowebsites中的设置和授权,则客户知道每月,每季度或每年订阅将自动续订,客户授权Foliowebsites收取当时可申请的订阅费.</p>
<p>如果客户对服务的贝宝订阅被跳过或未能付款,则Foliowebsites将尝试自动并在第一次失败付款后的24小时内自动重新处理付款. 第二次失败的付款处理尝试,对开本将立即暂停客户的服务,并全部访问无偿订阅费. 一旦付款并恢复了逾期订阅,Foliowebsites将在24小时内失去客户服务.</p>
<p>所有争议和超额费用都必须直接报告给Foliowebsites,以书面形式(可以接受)支持@foliowebistites.com. 任何发起退款,逆转,检索请求或其他纠纷的用户都将收取50美元的服务费,以报销Foliowebsite,以偿还争端. 客户的帐户将立即暂停或终止,待调查.</p>
<p>在取消Foliowebsites服务后,客户的网站和所有托管帐户内容可能立即被Foliowebsites永久删除,自行决定,Foliowebistites对此类已删除的信息或内容概不负责. 但是,Foliowebsites没有义务删除所有内容或帐户信息,并且可以自行决定foliowebsites.</p>
<p>Foliowebsite服务的所有费用不包括税务机关征收的所有税款,征税或职责,您应负责支付所有此类税款,征税或关税,仅在适用的情况下仅包括美国(联邦或州)税.</p>
<h4>托管和允许托管您的内容</h4>
<p>对于我们托管您的网站,您有必要将您的内容上传到我们的服务器. 当您执行此上载或作品集的员工代表您的方向执行此操作时,您的内容的一个或多个副本可能存储在我们的系统上,以实现系统优化,备份和作品集的任何其他目的. 通过从我们那里购买作品集网站,您承认正在制作这些副本,并授予我们维护这些副本的许可(许可证),并将其提供给Internet用户. 您完全负责提供组成您网站的所有内容和其他数据. 请注意,即使您将内容的副本上传到我们的服务器,也必须始终保留内容,数据库和其他Web文件的备份副本,例如不时生效,因此您可以在此期间重新加载它们在任何技术问题中,例如服务器问题,技术或系统相关问题,我们的服务器中的内容丢失等等.</p>
<p>Foliowebsites服务包括托管,以保持对开本网站和主题的适当功能和安全性以及提供客户支持.</p>
<h4>更改网站主题</h4>
<p>foliowebsites允许我们的客户通过客户的网站设置页面从foliowebistites网站构建器上更改网站。. FoliowEbsites保留更改主题的权利,以添加或删除Foliowebsites确定的功能,以改善服务或以其他方式自由酌情决定。.</p>
<h4>电子邮件服务</h4>
<p>Foliowebsites不提供电子邮件托管,也不提供电子邮件支持. 我们建议用户使用Google应用程序来满足他们的电子邮件需求,并与任何支持问题联系Google Apps支持. FOLIO网站对由于不正确的电子邮件服务设置而丢失的任何电子邮件概不负责.</p>
<h4>密码和安全责任</h4>
<p>客户完全和个人负责维护客户网站的安全性和托管帐户,包括保护其用户名和密码的责任以及他们授予的访问权限. 客户对他/她的帐户以及与Foliowebsites服务有关的所有其他行动完全负责.</p>
<p>客户不得与任何第三方披露或共享他/她/她/她/她/她/她/她/她/她/她/她/她/她的密码出于任何未经授权的目的. 使用用户名和密码对foliowebsites服务的任何访问都将被视为客户端,并且由于使用用户名和密码而导致的任何信息或帐户丢失将是客户的唯一责任. 客户同意通过电子邮件以书面形式通知Foliowebsites服务,以支持@foliowebistes.任何未经授权使用该帐户或任何其他违反安全性的com.</p>
<p>客户承认并同意,在任何情况下,任何客户或客人的任何行为或遗漏,包括任何因任何行为或遗漏而造成的任何损害,或者因未能遵守的任何形式的损害,都不应以任何方式承担任何责任。有这项安全义务. foliowebsites服务仅存储每个密码的编码版本,无法了解或访问任何客户端密码,并且在任何情况下都不会对损失,重置或使用任何用户名或密码负责.</p>
<h4>音乐</h4>
<p>出于音乐版税许可的法律原因,Foliowebsites不包括我们网站的音乐. 如果客户选择将音乐添加到他们的作品集主题中,则负责上传以及许可他们上传的音乐. Foliowebsites对在客户网站上增加音乐可能出现的任何问题不承担任何责任.</p>
<h4>个人信息</h4>
<p>当您下达我们的服务订单时,您的个人信息(包括信用卡信息)是通过使用安全套接字层(SSL)技术传输的,即通过条纹加密敏感信息的行业标准.</p>
<p>FOLIO不会将您的完整信用卡号存储在我们的服务器上,我们可以访问您的完整信用卡号码. 您有责任将信用卡或其他付款方式保持最新和最新的作品集,以确保不间断的计费和服务.</p>
<h4>备份</h4>
<p>Foliowebsites对由于服务器故障和或任何其他技术故障而导致的任何数据或信息丢失不承担任何责任.</p>
<p>由于服务允许用户直接将内容传输或上传到用户网站,因此用户应完全负责将所有内容上传到用户网站并补充,修改和更新用户网站.</p>
<p>Foliowebsites对用户内容,用户网站或其他损害或因用户内容的任何故障或用户网站的任何方面引起的任何故障或服务中断的任何损害不承担任何责任.</p>
<p>用户完全负责制作用户内容的备份副本. foliowebsites不负责维护任何用户内容或材料的备份副本,包括不限于任何用户网站,数据库,网络文件,书面内容,照片或电子邮件或其他用户数据或信息,或其他内容或材料. foliowebsites不能保证网站的内容永远不会被删除或损坏,或者网站的备份将始终可用. 用户应始终将所有此类材料和内容的最新副本保留给本地计算机,而Foliowebsites强烈建议用户定期制作其他副本(在磁带,CD,USB驱动器,另一个桌面或其他地方),以确保可用性这样的文件,内容或材料.</p>
<p>Foliowebsite提供的所有产品和服务只能仅用于合法目的. 禁止违反任何信息,数据或材料的传输,存储或介绍任何美国联邦,州或城市法律. 这包括但不限于:受版权保护的材料,我们判断要威胁或淫秽的材料,或者受到商业秘密和其他雕像保护的材料. 订户同意从使用损害订户或任何其他方的服务所产生的任何索赔中赔偿并持有无害的Foliowebsites.</p>
<p>在任何Foliowebistites服务器上都严格禁止色情图像,内容,营销,商品销售或任何其他相关活动. 对于促进任何可能损害Foliowebsites服务器或Internet上任何其他服务器的非法活动或内容的网站也是如此. 还禁止与此类材料的链接. 这项政策实际上是为了帮助保护我们所有的用户和我们的品牌,并为所有用户促进健康安全的互联网.</p>
<p>Foliowebsites将是构成违反此规定的唯一仲裁者. 任何违反本政策的帐户都可以立即取消并删除,恕不另行通知.</p>
<h4>责任限制</h4>
<p>您明确地理解并同意FoliowEbsites对任何直接,间接,偶然,特殊,后果或示例性损害均不承担任何责任,包括但不限于损失利润,商誉,使用,数据或其他无形的损失(即使已告知Foliowebsites可能造成此类损害的可能性),这是由以下原因导致的:(i)使用或无法使用该服务; (ii)由购买或获得的任何商品,数据,信息或服务或服务中收到或交易的任何商品,数据,信息或服务产生的替代商品和服务的成本; (iii)未经授权访问或更改传输或数据; (iv)服务中任何第三方的陈述或行为;或(v)与服务有关的任何其他事项.</p>
<p>您明确地理解并同意FoliowEbsite对任何直接,间接,偶然,特殊,结果或示例性损害均不承担任何责任,包括但不限于我们的第三方计费服务所执行的自动信用卡借方错误中的错误.</p>
<p>该网站上包含的信息和材料已从各种来源编辑,因此可能会更改,恕不另行通知. 在任何情况下,无论是直接,间接,一般,后果,附带,典范还是特殊责任,都不会责任foliowebsites,这是由于使用该服务器上提供的信息或通过链接到任何其他服务器而引起的.</p>
<p>通过本网站与Foliowebsites的沟通绝不应视为构成Foliowebistites,其机构,官员,雇员,代表或代理人的法律或正式通知其机构,官员,雇员,代表或代理商在联邦,州或地方法律要求的通知. 也不应将通过此网站与Foliowebsites进行通信,以构成任何其他目的的法律或官方通知.</p>
<h2>隐私政策</h2>
<p>该协议是在特拉华州Photoup Inc的用户和Foliowebsite之间. 用户证明:用户年龄超过18岁;用户有权代表自己或其公司签订本协议;用户没有冒充任何人;用户在注册中提供的所有信息都是正确的.</p>
<p>通过注册和使用对开本网站,Photoup Inc的品牌,网站用户同意受本协议条款的约束. 本协议包括本文档中规定的条款以及Photoup Inc公司网站Foliowebsites上出现的所有适用政策和程序. Photoup Inc的Foliowebsites,公司可以自行决定,恕不另行通知,通过在其网站上发布更改来更改这些条款. 用户应监视并阅读这些更改. 当用户在foliowebsites(Photoup Inc公司)之后继续使用该网站时,用户会接受这些更改. 如果用户不同意更改,则他/她应停止使用其网站并取消订阅.</p>
<h4>服务</h4>
<p>Photoup Inc公司Foliowebsites保留更改其订阅计划,数据存储计划和定价以及其他服务产品或第三方集成的权利. 当用户继续使用服务后,SSER接受了这些更改.</p>
<p>Photoup Inc公司Foliowebsites可以在需要进行升级,维护等时暂时暂停其服务.</p>
<p>尽管有任何规定,Photoup Inc公司Foliowebsites将自行决定确定其网站的内容,外观,设计,功能和所有其他方面(包括重新设计的权利,重新设计的权利,修改,删除和更改网站和/或其任何页面的内容,外观,设计,导航,功能以及其任何元素,方面,部分或特征,不时). Photoup Inc公司Foliowebsites不会做任何违反法律或违反Foliowebsites用户政策的事情.</p>
<h4>学期</h4>
<p>本协议可在用户签署的任何一个Foliowebsites,Photoup Inc公司,免费或付费订阅计划或其他公司产品的日期生效. 任何一方都可以随时终止本协议,无故终止本协议. 如果Photoup Inc公司FoliowEbsites终止了该协议,则可以暂停或终止用户的用户名,密码和帐户,并将股票评级的每月付款汇给用户,除非终止是由于终止是由于用户违反用户的侵犯,否则Photoup Inc公司的哪种情况Foliowebsites可以终止用户帐户而无需汇款.</p>
<h4>支付</h4>
<p>用户应根据用户选择的计划的价格向Photoup Inc公司Foliowebsites(Photoup Inc公司)支付其服务. Photoup Inc公司Foliowebsites将在用户选择的帐单日期或用户最初开始支付的那天的帐单日期或月的时间内每月收费以使用服务或软件。.</p>
<p>根据本协议收取的任何费用的所有发票应在提交的日期支付并应付. 对于通过信用卡付款的用户,用户的信用卡将同时收取用户发票的创建. 如果在发票上指定的到期日之前未收到付款,则用户的帐户将被视为拖欠(拖欠).</p>
<p>应付的金额不包括所有适用的税款,征税或职责,用户将负责支付所有此类金额. 所有金额均以u支付.s. 美元,除非另有说明. 如果用户认为本协议下的任何特定费用是不正确的,为了获得信用,用户必须在发票日期的30天内书面,以列出所请求的更正的性质和金额,以书面形式与Photoup Inc公司的Foliowebsites联系;否则发票是最终的.</p>
<p>除其他适用的补救措施外,Photoup Inc公司Foliowebsites可以暂停和/或终止用户在三天的电子邮件通知时终止用户对服务的访问和/或终止本协议,如果用户的帐户变成拖欠(欠款)或存档的信贷护理无法成功进行交易.</p>
<p>拖欠发票受到1的兴趣.每月有5%的未偿余额或法律允许的最高余额,以较低者为准,以及所有收款费用,包括合理的律师费和法院费用.</p>
<p>适当使用服务</p>
<p>如果未经供应商的事先书面同意,用户不得将使用或为任何其他组织,实体,业务或企业提供服务或提供服务的服务,以供使用或为您使用。.</p>
<p>用户同意不要向服务提交任何非法,误导性,诽谤性,不雅或淫秽的材料,口味不佳,威胁性,侵犯任何第三方专有权利,个人隐私的侵入性或其他异议(统称为&ldquo;异议事项&rdquo;) ).</p>
<p>用户有责任确保未向Photoup Inc公司Foliowebsites提交任何令人反感的事项. 此外,Photoup Inc公司FoliowEbsites可以选择采用允许和适当使用的规则,并可能不时地更新它们在Photoup Inc公司Foliowebistes,网站的Photoup Inc公司;用户将受到任何此类规则的约束.</p>
<p>Photoup Inc公司FoliowEbsites可以删除任何构成令人反感事项的照片或数据. 用户将遵守有关照片和数据的所有适用法律,服务的使用,包括涉及私人数据的法律和任何适用的出口控件. Photoup Inc公司的Foliowebsites,如果用户实质上违反了本节的规定,则有权终止本协议的权利.</p>
<p>Photoup Inc公司Foliowebsites保留立即暂停或终止用户帐户或活动的权利,该帐户或活动对Foliowebsites,Photoup Inc公司,计算机,系统或基础设施或其他当事人或其他当事人或对州或其他方造成伤害,或者违反州侵犯州或联邦法律.</p>
<p>密码和访问</p>
<p>用户负责其帐户下发生的所有活动. 用户负责维护所有用户名和密码的安全性和机密性.</p>
<p>用户应立即将任何未经授权使用其用户名或密码或帐户或任何其他已知或任何涉嫌违反安全性的使用,通知Photoup Inc公司Foliowebsites,Photoup Inc公司. 如果被妥协,用户应更改其密码.</p>
<p>用户向Photoup Inc公司Foliowebsite提交的所有照片和其他数据将仍然是用户的唯一属性.</p>
<p>用户将对所有照片和数据的准确性,质量,完整性,合法性,合法性,可靠性,适当性和版权权限.</p>
<p>Photoup Inc公司Foliowebsites可以使用上传的照片和用户创建的网站,用于在Foliowebsites上进行各种营销活动.COM或其他附属营销网站,由Photoup公司Foliowebsite拥有.</p>
<p>Photoup Inc公司Foliowebsites可能会汇总匿名统计数据,包括但不限于其系统的使用和功能,用于改善系统的各种营销和内部活动. 这种汇总的统计数据将是Photoup Inc公司Foliowebsites的唯一属性. Photoup Inc公司Foliowebsites将使用商业上合理的安全措施来保护照片和数据免受未经授权的披露或使用.</p>
<h4>Foliowebsites,品牌Photoup Inc数据</h4>
<p>Brand Photoup Inc及其供应商Foliowebsites保留了Photoup Inc公司Foliowebsites中的所有权利,以提供文本,音频,视频,图形和其他信息. 本协议没有向用户授予所有权. 除使用Foliowebsites,Photoup Inc公司,服务外,没有授予用户的许可证. Foliowebsites,Photoup Inc公司,名称,徽标以及与Foliowebsites,Photoup Inc公司,在线服务相关的产品名称,是Foliowebsites,Photoup Inc公司或第三方的商标,并且在没有Foliowebits的情况下可能不会使用它们Photoup Inc公司,事先书面同意. SSER不得从这些许可材料中删除Photoup Inc公司Foliowebsites(Photoup Inc公司).</p>
<p>未经供应商的书面同意,用户不得更改,转售或转销foliowebsites,Photoup Inc公司,服务或软件. 用户不得反向工程师Foliowebsites,Photoup Inc公司,服务或其软件或其他技术,部分或整个技术.</p>
<p>用户不得使用或访问foliowebsites,Photoup Inc公司,服务:(i)构建竞争性产品或服务,(ii)使用类似的想法,功能,功能或图形制造或制造产品,((( iii)根据服务或Foliowebsites,Photoup Inc公司,数据或(iv)与任何不受Foliowebsites,Photoup Inc公司,服务协议,任何功能,功能或图形的副本或共享,制作衍生作品服务或FoliowEbsites,Photoup Inc公司,电子或物理的数据,包括系统的屏幕截图.</p>
<p>用户不得&ldquo;框架&rdquo;或&ldquo;镜像&rdquo;服务. 使用,转售或开发服务和/或Foliowebsite,Photoup Inc公司,除非在本协议中明确允许的数据,否.</p>
<h4>保证</h4>
<p>Photoup Inc公司FoliowEbsites不做任何担保或代表,即明示或暗示,包括不限制与本网站的适销性或适合性的,与本协议相关的服务.</p>
<p>Foliowebsites,Photoup Inc公司,服务,产品和内容以&ldquo;原样&rdquo;和&ldquo;可用&rdquo;为基础提供给用户. 用户承担确定服务或生成的信息的所有责任是准确还是足以实现其目的.</p>
<p>Photoup Inc公司Foliowebsites不保证使用该系统将是无错误或不间断的. Photoup Inc公司Foliowebsites对用户安装或使用的软件或Internet的操作或性能概不负责.</p>
<p>Photoup Inc公司Foliowebsites负责,并且所有与使用其网站有关的客户服务问题的酌处权.</p>
<h4>责任</h4>
<p>foliowebsites,Photoup Inc公司及其分支机构(及其各自的雇员,董事,代理人和代表)的总责任,包括与本协议有关的任何索赔,包括合同和侵犯Photoup Inc公司Foliowebsites在活动发生前十二个月内根据本协议赚取的金额. 除本协议中另有规定外,用户应支付所有Foliowebsite,Photoup Inc公司,与任何类型的第三方索赔有关的财务损失.</p>
<h4>广告</h4>
<p>Foliowebsites,Photoup Inc公司,网站使用cookie,跟踪像素和相关技术. cookie是由我们的平台提供并存储在您的设备上的小数据文件. 我们的网站使用我们或第三方丢弃的cookie来进行多种目的,包括操作和个性化网站. 此外,cookie也可以用于跟踪您在其他网站上使用该网站将广告定位为您的方式. 如果您想选择退出有针对性的广告,请在此处与我们的团队联系.</p>
<p>对开本使用饼干,跟踪像素和相关技术. 通过继续浏览我们的网站,您同意我们使用cookie. 点击这里查看更多信息.</p>

  Kindle是无限的,并且质阅读相同