精华内容
下载资源
问答
  • 现在,让我们在googlesheet上构建自己的投资组合仪表板! 目录 关于该项目 我们建立了一个Google工作表,可以自动跟踪所有拥有的资产; 股票(香港交易所,纳斯达克,SET等),加密货币,共同基金等,以提供对历史...
  • 小型静态拼图网站 这个网站是用。 有关安装说明,请参见。 此项目基本清单 克隆项目,运行npm install并通过npm run watch 当创建一个新项目时,安装PHP composer并使用以下命令... 如需更多帮助,请阅读可用
  • 使用静态网站生成器构建的投资组合网站示例。 在本地运行 您需要在计算机上安装git,Node和npm。 克隆这种回购和cd到该目录 运行npm install来安装依赖项(只是Eleventy) 运行npm run dev启动开发服务器 结构 ...
  • 您可以将其分叉并创建自己的投资组合。 我非常重视保持网站开源,但是众所周知,抄袭是不好的,所以如果您喜欢它,可以随意复制它,并给您适当的信誉。 如果您在使用此产品组合时遇到问题,可以参考 。 谢谢! ...
  • 保罗·J·诺布尔(Paul J ... 在本教程中,出色的ROA(瑞典)网站用作投资组合项目的示例。 该站点最近在Creattica中成为特色,并且该作者与ROA无关。 随意将自己的作品用作作品集项目。 我们将创建一个在线投资...

    pm ux ui

    保罗·J·诺布尔(Paul J Noble) 屡获殊荣,设计独特的作品集网站吸引了很多人的眼球,而不仅仅是客户。 今天,他将继续本教程的设计阶段 ,并演示如何进行编码。


    步骤1:我们在做什么

    在本教程中,优秀的ROA(瑞典)网站用作投资组合项目的示例。 该网站最近在Creattica中成为特色,并且该作者与ROA无关。 随意将自己的作品用作作品集项目。

    我们将创建一个在线投资组合站点,其中包含图像网格,固定标题,文本和界面元素。 标记的样式将设置为使内容适合而无需滚动几乎所有用户的显示,并且可以很好地缩放到较大的屏幕尺寸,同时以较低的分辨率优雅地降级。 图像网格将仅显示当前的活动图像,但将包含更多隐藏的图像,这些图像可以通过页面级导航查看。

    创建HTML模板和CSS将为我们准备本教程的下一部分,在这里我们将使用Javascript添加交互层并使设计栩栩如生。


    步骤2:设定范本

    在您首选的文本编辑器中创建一个新的html文档。 附加jQuery(1.4.2+)和一个新的空白CSS文件。

    我们将创建的第一个标记将是保存所有内容的div。 稍后我们将为此div(“#page”)设置最小的高度和宽度值,以确保设计在低分辨率下缩放。 为以下页面的主要元素创建更多div。

    <!DOCTYPE html>
    	<html>
    	<head>
    		<title>Your Name - Digital Portfolio</title>
    
    		<link rel="stylesheet" href="css/master.css"/>
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    	</head>
    
    	<body>	
    	<div id="page">
    		<div id="header"> 
    			<div class="inner">
    				<div id="logo"><img src="img/icons/logo.png" alt="Your Name Here"/></div>
    
    				<div id="social"> <!-- Social media buttons --> </div>
    				<div id="nav"> <!-- Global nav --> </div>	
    			</div>
    
    		</div>
    
    		<div id="horizon">
    
    			<div id="main">
    				<div id="gallery"> <!-- The image grid --> </div>
    
    				<div id="leftCol"> <!-- Text annotations --> </div>
    			</div>
    
    		</div>
    
    	</div>
    
    	</body>
    	</html>

    步骤3:标题

    对于不需要垂直滚动的站点,将导航和标题元素放在屏幕底部通常不太麻烦。 这样可以在窗口顶部附近更常查看的空间中释放额外的空间。 我们希望此元素可以扩展用户显示的整个宽度,并且始终位于屏幕底部。

    尽管它在视觉上位于屏幕底部,但实际上会出现在文档标记的顶部。 我们将创建一个ID为“ header”的div,然后创建一个嵌套为“ inner”的嵌套div。 内包装器将简化内部物品的放置。

    在包装器中,我们将创建三个div; '#logo','#social'和'#nav'。

    对于徽标,我们将嵌套一个名为“ img / icons / logo.png”的图像文件,并添加一些替换文字。 通过从PSD剪切徽标来创建徽标图像文件。 由于这将是绝对放置的位置,因此确切的大小并不重要-但是,请确保徽标图像适合设计中的导航栏。

    对于社交按钮,我们需要三个锚点-每个分别用于Facebook,Flickr和LinkedIn。 这些将把背景图像用作图形,但是我们仍将文本用于语义目的,并使用CSS隐藏它。 对于这些外部链接,我们将使用target ='_ blank'属性,以便页面在新的标签或窗口中打开。

    对于导航,我们将再次使用三个锚,并为其分配各自的类和id值。

    <div id="header"> 
    			<div class="inner">
    				<div id="logo"><img src="img/icons/logo.png"/></div>
    
    				<div id="social">
    					<a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
    
    					<a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
    					<a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>	
    					</div>
    
    				<div id="nav">
    					<a class="about" href="about" id="aboutBtn">About</a>
    					<a class="photos" href="photos" id="photoBtn">Photography</a>
    
    					<a class="workActive" href="work" id="workBtn">Work</a>		
    				</div>
    			</div>
    
    		</div>

    我们剩余物品的图形对象不会像徽标那样简单。 由于它们是交互式的,因此它们需要悬停状态,而导航按钮将需要活动状态。

    对于导航按钮,我们将创建图像精灵。 返回Photoshop并在PSD中的按钮周围创建一个选择。 选择编辑>复制合并。

    然后选择“文件”>“新建”。 将出现一个对话框,其宽度和高度默认为先前选择的矩形。 将高度更改为默认值的3倍。 这将创建一个新的画布,该画布将适合导航图形的三个版本,每个状态对应一个。 活动,悬停和关闭。

    现在,从PSD中移出buttons文件夹,并将该组克隆两次,以创建三个组。 稍微调整每个组的文本颜色以使其均匀,以创建不同的按钮状态。 以下是最终图形的示例。 将完成的版本另存为PNG(24位)到'img / icons / nav.png',确保背景透明。

    对于社交媒体按钮,我们只需要两个状态(“悬停”和“关闭”)。 重复上述过程,创建一个社交媒体按钮图像精灵。 将图像另存为“ img / icons / social-media.png”。

    最后,创建一个新图像“ img / bg / header.png”。

    现在,我们已经开发了结构和图像资产,让我们创建一些CSS来开始设计此页面的样式。

    在CSS文件的顶部,我们将包括CSS重置,以确保没有特定于浏览器的默认设置会干扰我们的布局。

    html, body, div, span, applet, object, iframe,
    	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    	a, abbr, acronym, address, big, cite, code,
    	del, dfn, em, font, img, ins, kbd, q, s, samp,
    	small, strike, strong, sub, sup, tt, var,
    	b, u, i, center,
    	dl, dt, dd, ol, ul, li,
    	fieldset, form, label, legend
    	 {
    		margin: 0;
    		padding: 0;
    		border: 0;
    		outline: 0;
    		font-size: 100%;
    		vertical-align: baseline;
    		background: transparent;
    
    	}
    	body {
    		line-height: 1.2em;
    		font-family: arial, sans-serif;
    
    	}
    	ol, ul {
    		list-style: none;
    	}
    	blockquote, q {
    		quotes: none;
    	}
    	blockquote:before, blockquote:after,
    	q:before, q:after {
    		content: '';
    		content: none;
    	}
    
    	:focus {
    		outline: 0;
    	}
    
    	ins {text-decoration: none;}
    	del {	text-decoration: line-through;}

    然后,我们将为主要页面元素创建一些基本样式。

    body, html { 
    	height: 100%; }
    
    body { 
    	background: #0f1219; }
    	
    #page {  
    	height: 100%;
    	min-height: 700px; 
    	position: relative; 
    	min-width: 1100px;
    	overflow: hidden; }
    	
    h1, h2, p, li,div { font-family: "arial", "helvetica",sans-serif; }
    li {font-size: 12px;}

    接下来,我们将样式化标题。 我们将对徽标和其他元素使用绝对定位,以简化对设计的控制。

    注意:我们将锚定为块级元素(“显示:块”),并带有负的文本缩进样式,以确保可访问但基于图形的元素。 如果自定义图像精灵文件的尺寸不同,则可以调整宽度和高度。

    #header { 
    			background: url('../img/bg/header.png') repeat; 
    			height: 60px;
    			z-index: 1200;
    			overflow: hidden;
    		    position: absolute; bottom: 0; width: 100%; }
    		
    		#logo { 
    			position: absolute; 
    			top:0px; 
    			left: 30px; }
    		
    		#header .inner { 
    			width: auto;
    			padding: 0 30px;
    			position: relative;
    			height: 70px; }
    
    		#nav { 
    			position: absolute;
    			right: 30px;
    			top: 14px;
    			height: 31px;
    			width: 290px;  }
    			
    		#nav a { 
    			background: url('../img/icons/nav.png') no-repeat 0 0;  
    			text-indent: -9999px; 
    			float: right; 
    			display: block;
    			outline: none;
    			height: 31px; }

    现在,通过将各种图像精灵位置映射到每个按钮的类,为每个导航按钮定义各自的样式。

    #nav a.work { 
    				width: 95px;}
    			#nav a.work:hover { 
    				background-position: 0 -62px;}
    				
    			#nav a.about {  
    				width: 93px;
    				background-position: -188px 0;}
    				
    			#nav a.about:hover { 
    				background-position: -188px -62px;}
    				
    			#nav a.workActive { 
    				width: 95px; 
    				background-position: -0px -31px; 
    				cursor: default; }
    				
    			#nav a.aboutActive { 
    				width: 93px; 
    				background-position: -188px -31px;
    				cursor: default;}
    				
    			#nav a.photos { 
    				width: 93px; 
    				background-position: -95px 0; }
    				
    			#nav a.photos:hover { 
    				background-position: -95px -62px;}
    				
    			#nav a.photosActive { 
    				width: 93px; 
    				background-position: -95px -31px; 
    				cursor: default; }

    接下来,我们将对社交媒体按钮执行相同的操作。

    #social { 
    						width: 88px; 
    						height: 26px; 
    						position: absolute; 
    						top: 17px; 
    						right: 330px; }
    					
    					#social a { 
    						display: block; 
    						background: url('../img/icons/social-media.png') no-repeat 0 0; 
    						float: left; 
    						height: 26px; 
    						width: 26px;
    						outline: none;
    						float: left;
    						margin-right: 4px;
    						text-indent: -9999px;
    						overflow: hidden; }
    						
    					#social a.fb { background-position: 0 0;}
    					#social a.fb:hover { background-position: 0 -26px;}
    					#social a.flickr { background-position: -30px 0;}
    					#social a.flickr:hover { background-position: -30px -26px;}
    					#social a.linkedin { background-position: -60px 0; margin-right: 0;}
    					#social a.linkedin:hover { background-position: -60px -26px;}

    OK,现在刷新页面,您应该看到与下图类似的内容。 将鼠标悬停在按钮上可以查看不同的状态。 如果悬停状态中有任何怪癖,请尝试调整CSS中的background-position属性。

    尝试调整浏览器窗口的大小,以模拟较低分辨率的显示。 一旦窗口缩小到为“ #page” div定义的最小高度和最小宽度值以下,滚动条应出现。


    步骤4:灯光效果

    我们将使用聚光灯效果将视觉注意力集中在活动图像上,同时提示周围的内容。 为了创建更强的背景/前景分离,我们还将对背景应用微妙的纹理图案。

    为此,我们需要添加一些标记。 创建嵌套在div'#main'中的以下新div。

    <div id="main">
    	
    		<div class="glowBg" id="bg2">&nbsp;</div>
    
    		<div id="glowTexture">&nbsp;</div>
    		
    		<div id="gallery"> <!-- The image grid --> </div>
    		<div id="leftCol"> <!-- Text annotations --> </div>
    
    		
    		<div id="glowShadow">
    			<img src="img/bg/glow-shadow.png" />
    		</div>
    		
    	</div>

    首先,让我们创建将覆盖图库的聚光灯图像('img / bg / glow-shadow.png')。 返回Photoshop,在“ vignette”组中选择图层。 转到选择>全部,然后复制所选区域。 创建一个新文档(至少应为1400 x 900)并将剪贴板粘贴到画布中。

    现在,我们需要对图像进行一些调整。 首先,扩展画布大小,使其顶部高100像素。

    然后,将左边缘扩大50像素。

    最后,展开底部和右侧边缘,使画布的总大小为1600 x 1600。

    现在,使用存储桶工具并将抗锯齿功能设置为“ 0”,并将容差设置为“ 0”,并用页面背景色(#0f1219)填充边缘周围的透明区域。 最终结果应类似于下图。

    选择文件>保存为Web,然后将此图像另存为启用了透明度的24位PNG('img / bg / glow-shadow.png')。

    现在,返回到我们的原始源图像,选择图层Pattern Fill 1(这是对角线图层)。 右键单击并选择“栅格化图层”。 然后,放大关闭并选择图层的区域,如下所示。 复制此内容(仅复制线条-不复制背景)并粘贴到新文档中。 保存为网络,再次使用具有透明性的24位PNG,路径为“ img / bg / lines.png”。

    现在,让我们添加将集成新图像CSS ...

    #horizon { 
    			min-height: 700px; 
    			width: 100%; 
    			overflow: hidden; }
    
    		#main { 
    			background: #0f1219;  
    			width: 1300px; 
    			margin: auto;  
    			margin-top: -190px; 
    			height:1000px; 
    			overflow: hidden; 
    			position: relative; }
    			
    		#main .inner { 
    			width: 9000px; 
    			height: 9000px; 
    			overflow: hidden; 
    			position: absolute; 
    			top: 0; 
    			left: 0; }
    				
    		.glowBg {
    			background: #282d3f; 
    			height: 100%; 
    			width: 100%; 
    			position: absolute; }	
    
    		#glowTexture { 
    			background: url('../img/bg/lines.png') repeat; 
    			height: 900px; 
    			width: 1300px; 
    			position: absolute; 
    			top: 0; 
    			left: 0; } 
    			
    		#glowShadow {    
    			height:1600px;
    			position: absolute;
    			width: 1500px;
    			top: 00px;
    			overflow: hidden;
    			z-index: 200; }
    			
    		#glowShadow img { 
    			display: block;  
    			position:relative; 
    			left: -100px; }

    保存,刷新,您现在应该可以看到背景颜色,纹理和聚光灯。 接下来,我们将开始添加一些图像。


    步骤5:图库

    对于图库图像,我们将按项目将图像放入列中。 每个项目可以具有垂直排列的多个图像。 通过将列横向移动可以访问不同的项目。

    创建一个640x480的新图片,并粘贴网站快照或您要展示的某些作品。 这种设计的深色风格通常适用于主要具有浅色背景的图像。

    首先,我们将添加一些标记。

    <div class="inner">
    
    	<div class="col">
    		<div class="item" style="top: 200px">
    			<img src="img/work/demo-01.jpg" alt="Title 1a"/> 
    		</div>
    
    		<div class="item"  style="top: 710px">
    			<img src="img/work/demo-01.jpg" alt="Title 1b" style="opacity: 0.3"/> 
    		</div>
    
    		<div class="item"  style="top: 1220px">
    			<img src="img/work/demo-01.jpg" alt="Title 1c" style="opacity: 0.3"/> 
    		</div>
    
    	</div>		
    	
    	
    	<div class="col" style="left: 660px">
    		<div class="item" style="top: 200px">
    			<img src="img/work/demo-01.jpg" alt="Title 2a" style="opacity: 0.3"/> 
    		</div>
    
    		<div class="item"  style="top: 710px">
    			<img src="img/work/demo-01.jpg" alt="Title 2b" style="opacity: 0.3"/> 
    		</div>
    
    		<div class="item"  style="top: 1220px">
    			<img src="img/work/demo-01.jpg" alt="Title 2c" style="opacity: 0.3"/> 
    		</div>
    
    	</div>
    	
    </div>

    您会注意到我们在标签上添加了一些内联样式。 这模拟了交互层以后将自动应用的内容(我们将在本教程的下一部分中看到如何完成此操作)。 但是,暂时,我们将仅对样式进行硬编码。 注意:opacity属性在Internet Explorer 8及更低版本中不起作用。

    为图库图像添加以下CSS:

    #gallery { 	 
    	left: 285px;  
    	position: absolute; 
    	width: 100%; 
    	height: 900px; }
    	
    #gallery .col { 
    	position:absolute; 
    	top: 80px; 
    	width: 640px; }
    
    .item { 
    	height: 480px; 
    	width: 640px; 
    	background: #181a22; 
    	position: absolute; 
    	margin: auto; 
    	top: 320px;
    	z-index: 100;
    	overflow: hidden; }

    这里最重要的属性是列的绝对位置(这些是具有“ col”类的div)。 通过绝对定位,我们可以独立移动每列或同步移动所有列,这将使我们能够在应用了交互层之后导航图像的网格。

    刷新页面,您现在应该看到带有图像的图库。 但是,您会注意到画廊静态地垂直放置。 理想情况下,我们希望内容根据窗口大小居中。 为此,我们需要添加一些脚本。

    在结束body标记之前创建一个新的script标记,并插入以下代码:

    <script>
    
    var yShift = -190;
    arrange()
    
    function arrange() {
    
    	var winHeight = $(window).height();
    	
    	if (winHeight > 760) {
    		yShift = (((winHeight - 900)/2) - 110)
    		newHeight = (winHeight - yShift)
    		newHeight -=60
    		$('#main').css('height', newHeight)	
    	}
    	
    	if (yShift < -190) {
    		yShift = -190;
    	}
    		
    	$('#main').css('margin-top', yShift)
    	
    }
    
    $(window).resize( function() {
    	arrange()
    })
    </script>

    确保已在页面标题中添加了jQuery,否则此脚本将不起作用。

    该脚本可以做一些事情。 ranging()函数检测窗口高度,然后调整“ #main”元素CSS属性以使内容垂直居中。 在用户的窗口高度大于760像素(请参见第541行的条件)的情况下,它会执行此操作,如果窗口高度低于此值,则会应用默认CSS属性。 每当调整用户窗口的大小时,$(window).resize()侦听器(第25行)就会调用Adjust()函数。


    步骤6:一些字

    在这一阶段,我们将添加一些与活动项目有关的文本内容。 为此,我们需要标题,子标题和文本段落来详细说明活动项目。

    将以下标记添加到“ #leftCol” div中:

    <div id="projectInfo">
    	<h1>Demo Project</h1>
    	<p class="sub">WEBSITE 2011</p>
    
    	<h1>Demo Project</h1>
    	<p class="sub">WEBSITE 2011</p>
    	<p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
    
    	<p class="link"><a href="#">Link to project here</a></p>
    </div>

    当然,如果您使用的是真实的作品,请随意使用准确描述您的作品的标题和正文。

    现在,我们将使用其他一些CSS样式化此内容:

    #leftCol { 
    	padding-top: 30px; 
    	width: 200px;  
    	height: 480px; 
    	left: 30px; 
    	position: absolute;	
    	z-index: 10001;  
    	top: 270px; }
    	
    #projectInfo { 
    	top: 50px; 
    	position: absolute; 
    	height: 350px; 
    	width: 200px; }
    		
    #leftCol h1 { 
    	color: #fff; 
    	font-size: 28px; 		
    	margin-bottom: 6px; 
    	top: 50px; 
    	font-weight: 300; 
    	line-height: 30px; }
    			
    #leftCol p.sub { 
    	color: #338966; 
    	font-size: 11px; 
    	text-transform: uppercase;  
    	letter-spacing:2px;
    	font-weight: bold; }
    			
    #leftCol p.body, #leftCol p.link {
    	color: #8c8f95;
    	font-family:  'lucida grande', 'arial';
    	font-size: 12px;
    	line-height: 19px;
    	padding-top: 30px;
    	margin-bottom: 10px; }
    		
    #leftCol p.link { 
    	padding-top: 10px; }	
    	
    #leftCol p.link  a {
    	color: #8c8f95;
    	text-decoration: underline; }
    
    #leftCol p.link a:hover {
    	color: #fff;
    	text-decoration: underline; }

    同样,这里最重要的考虑因素是'#leftCol'元素的绝对位置。 由于此元素放置在“ #gallery”标签之外但仍在“ #main”标签内,因此其位置将相对于居中的“ #main”标签,并且与画廊中的移动无关。 这意味着当活动项目更改时,文本可以刷新而不更改位置。 “ #leftCol”(10001)的z-index很高,因此该内容位于页面上所有其他内容的上方。 这意味着我们的文本不会受到聚光灯效果的干扰。 其他属性主要是与文本样式和格式相关的属性,可以根据需要进行调整。

    现在,刷新页面,活动图像的左侧应显示一些格式正确的文本,如下所示。


    步骤7:界面元素

    现在,我们已经为静态内容开发了一个结构,我们将应用一些标记,这些标记将添加允许用户与网站进行交互的元素。

    返回“ #leftCol” div,添加以下代码:

    <div id="controls">
    
    	<div id="grid">
    			
    	</div>
    
    	<div id="keys">
    		<a href="#" class="kup">Up</a>
    		<a href="#" class="kdown">Down</a>
    
    		<a href="#" class="kleft">Left</a>
    		<a href="#" class="kright">Right</a>
    
    	</div>
    
    </div>

    '#grid'元素为空; 在最终的工作版本中,它将由Javascript填充。 但是,暂时,我们将仅对一些子元素进行硬编码,以了解其外观。

    <div id="grid">
    	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    
    	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    
    	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    
    	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    
    	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    
    	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    
    	<div id="tracker" style="height: 14px;">&nbsp;</div>
    </div>

    现在,我们将再次使用精灵图像,这一次是我们的箭头键。 因此,返回Photoshop,转到“键盘”组,并使用标尺工具记录总尺寸。

    同样,我们需要允许组的高度增加两倍,才能包含“默认”和“悬停”状态。 创建一个具有透明背景的新文档,该透明背景等于“键盘”组的宽度和高度的两倍。 在本教程示例中,这等于70 x 92。

    将“键盘”组拖动到新文档中。 复制此组,并将一个放置在另一个上方。 下面的组将是我们的“悬停”状态。 通过使颜色覆盖,箭头和轮廓变亮,对悬停状态进行一些小的调整。 微调通常足以满足悬停状态的需要,亮度的微小变化通常很容易注意到。

    对于本教程示例,将背景颜色从#262a34更改为#2b2f3a,将笔触/箭头背景颜色从#32343f更改为#4b4d56将创建理想的效果。

    最终图像应如下所示:

    将此图像另存为“ img / icons / keys.png”。

    现在,我们将添加一些CSS以将图像映射到各个类。

    #leftCol #controls {  
    	width: 200px; 
    	height: 55px; 
    	position: absolute;  
    	bottom: 18px; }
    	
    #grid .line { 
    	width: 5px; 
    	background: #666; 
    	overflow: hidden; 
    	float: left; 
    	margin-right: 2px; 
    	position: relative; 
    	cursor: default; }
    	
    #grid { 
    	height: 55px; 
    	width: 200px; }
    	
    #tracker { 
    	height: 10px; 
    	background: #fff; 
    	width: 5px; 
    	position: absolute; 
    	z-index: 10000;
    	cursor: default; }
    	
    #grid .line { 
    	width: 5px; 
    	background: #3d424f; 
    	overflow: hidden; 
    	float: left; 
    	margin-right: 2px; 
    	position: relative; 
    	cursor: default; }
    	
    #keys { 
    	width: 92px; 
    	height: 46px; 
    	position: absolute; 
    	left: 86px; 
    	bottom: 0;  }
    	
    #keys a { 
    	text-indent: -999px; 
    	width: 22px; 
    	height: 22px; 
    	background: url('../img/icons/keys.png') no-repeat 0 0; 
    	overflow: hidden; 
    	position: absolute; }

    子“ .line”元素将形成一个表示相对列高的网格。 这种抽象将是让用户了解作品集的大小,各部分及其当前位置的理想方式-在某些方面相当于传统内容站点的痕迹。

    无论如何,下一个任务是将键类映射到图像精灵:

    #keys a.kup { 
    	left: 24px; 
    	text-indent: -999px; 
    	top: 0; 
    	background-position: -24px 0; }
    	
    #keys a.kup:hover, #keys a.hoveru { 
    	background-position: -24px -46px; }
    		
    #keys a.kdown { 
    	left: 24px; 
    	top: 24px; 
    	background-position: -24px -24px; }
    	
    #keys a.kdown:hover, #keys a.hoverd {
    	 background-position: -24px -70px;
    	}
    		
    #keys a.kleft { 
    	left: 0px;  
    	top:24px; 
    	background-position: 0px -24px; }
    	
    #keys a.kleft:hover, #keys a.hoverl { 
    	background-position: 0px -70px; }
    		
    #keys a.kright { 
    	left: 46px;  
    	top: 24px; 
    	background-position: -46px -24px; 
    	width: 24px; }
    	
    #keys a.kright:hover, #keys a.hoverr { 
    	background-position: -46px -70px; }

    尝试刷新浏览器并悬停刚创建的元素。 新的键和网格应类似于下图所示:


    步骤8:界面元素

    最后,我们将添加将附加到活动项目的动态导航。 在“ #leftCol”元素的打开标记后立即插入以下标记:

    <a href="#" id="left" class="mover" style="display: none"></a>
    
    <a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
    <a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
    
    <a href="#" id="up" class="mover" style="display: none"></a>

    我们在这里使用了内联样式来模拟添加完整的Javascript交互性后将自动实现的功能。

    另一个图像精灵将用于这些锚点。 返回到我们的Photoshop文件,打开“按钮”组,然后选择直角图层。 由于我们希望锚点上有一些填充,因此我们将其尺寸设置为44 x 44。

    创建具有透明背景的新文档88 x 176,以容纳2套4个图标。 创建一个黑色的新图层,以帮助我们看到半透明的箭头。 在x轴上将垂直参考线拖到44像素。 (在启用标尺时拖动指南,并确保“窗口”>“信息”可见,以查看当前位置)。 然后在y轴上以44、88和132像素拖动三个水平参考线。

    现在,返回到原始PSD,将角度箭头拖动到新文档中,并在左侧创建4个副本。 这将是我们的“默认”状态。 使每个图层的不透明度为12%。 使用“编辑”>“变换”旋转辅助线,以使顺序如下所示:

    复制这些图层,并将每个图层精确地向右移动44个像素。 将每个新图层的不透明度调整为20%。 关闭黑色背景,使画布几乎完全透明,然后选择“保存为Web”。 导出为24位PNG,并将其启用为“ img / icons / movers.png”。

    现在,我们将添加一些CSS来映射此图像:

    a.mover {
    		background: url('../img/icons/movers.png') no-repeat -44px 0; 
    		height: 44px; 
    		width: 44px; 
    		outline: none !important; } 
    
    	#up, #right, #down, #left { 
    		display: block; 
    		z-index: 300; 
    		position: absolute;  
    		top: 10px; 
    		left: 10px; }
    
    	#right {  background-position: 0px -44px; }
    	#right:hover { background-position: -44px -44px; }
    	
    	#down {  background-position: 0 -88px;}
    	#down:hover {  background-position: -44px -88px;}
    	
    	#up{  background-position: 0px -132px;}
    	#up:hover {  background-position: -44px -132px;}

    刷新浏览器,您现在应该看到类似下面的内容。

    就是这样! 在本教程的最后部分,我们将编写Javascript,该Javascript将自动处理图像的布局,并使用键盘或鼠标引入动态导航。

    如果您可能错过了任何东西,这是最终HTML标记:

    <!DOCTYPE html>
    	    <head>
    	        <title>Your Name - Digital Portfolio</title>
    	        <link rel="stylesheet" href="css/master.css"/>
    
    			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    	 	</head>
    
    	    <body>   
    	    <div id="page">
    	      	<div id="header">
    
    			    <div class="inner">
    			    	<div id="logo"><img src="img/icons/logo.png"/></div>
    			    	<div id="social">
    
    			        	<a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
    			        	<a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
    
    			        	<a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>
    			    	</div>
    
    			    	<div id="nav">
    			        	<a class="about" href="about" id="aboutBtn">About</a>
    			        	<a class="photos" href="photos" id="photoBtn">Photography</a>
    
    			        	<a class="workActive" href="work" id="workBtn">Work</a>    
    			    	</div>
    				</div>
    
    			</div>
    
    	        <div id="horizon">
    
    	            <div id="main">
    
    					<div class="glowBg" id="bg2">&nbsp;</div>
    
    					<div id="glowTexture">&nbsp;</div>
    
    	                <div id="gallery"> 
    		
    							<div class="inner">
    
    								<div class="col">
    
    									<div class="item" style="top: 200px">
    										<img src="img/work/demo-02.jpg" alt="Title 1a"/> 
    									</div>
    
    									<div class="item"  style="top: 710px">
    										<img src="img/work/demo-02.jpg" alt="Title 1b" style="opacity: 0.3"/> 
    									</div>
    
    									<div class="item"  style="top: 1220px">
    										<img src="img/work/demo-02.jpg" alt="Title 1c" style="opacity: 0.3"/> 
    									</div>
    
    								</div>		
    
    
    								<div class="col" style="left: 660px">
    									<div class="item" style="top: 200px">
    										<img src="img/work/demo-03.jpg" alt="Title 1a" style="opacity: 0.3"/> 
    									</div>
    
    									<div class="item"  style="top: 710px">
    										<img src="img/work/demo-03.jpg" alt="Title 1b" style="opacity: 0.3"/> 
    									</div>
    
    									<div class="item"  style="top: 1220px">
    										<img src="img/work/demo-03.jpg" alt="Title 1c" style="opacity: 0.3"/> 
    									</div>
    
    								</div>
    							</div>
    
    							<!-- End Step 6 -->
    					</div>
    	                <div id="leftCol"> <!-- Text annotations --> 
    
    
    							<a href="#" id="left" class="mover" style="display: none"></a>
    
    							<a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
    							<a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
    
    							<a href="#" id="up" class="mover" style="display: none"></a>
    
    
    						<div id="projectInfo">
    
    						    <h1>Demo Project</h1>
    						    <p class="sub">WEBSITE 2011</p>
    						    <p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
    
    						<p class="link"><a href="#">Link to project here</a></p>
    						</div>
    
    
    						<div id="controls">
    
    							<div id="grid">
    								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    
    								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    
    								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    
    								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    
    								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    
    								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    								<div id="tracker" style="height: 14px;">&nbsp;</div>
    
    							</div>
    
    							<div id="keys">
    								<a href="#" class="kup">Up</a>
    
    								<a href="#" class="kdown">Down</a>
    								<a href="#" class="kleft">Left</a>
    
    								<a href="#" class="kright">Right</a>
    							</div>
    
    						</div>
    
    		</div>
    
    					<div id="glowShadow">
    						<img src="img/bg/glow-shadow.png" />
    					</div>
    
    	            </div>
    
    	        </div>
    
    	    </div>
    
    		<script>
    		var yShift = -190;
    		arrange()
    		function arrange() {
    
    			var winHeight = $(window).height();
    
    			if (winHeight > 760) {
    			yShift = (((winHeight - 900)/2) - 110)
    			newHeight = (winHeight - yShift)
    			newHeight -=60
    			$('#main').css('height', newHeight)	
    			}
    
    			if (yShift < -190) {
    				yShift = -190;
    			}		
    			$('#main').css('margin-top', yShift)
    
    		}
    
    		$(window).resize( function() {
    			arrange()
    		})
    
    		</script>
    
    	    </body>
    	    </html>

    翻译自: https://webdesign.tutsplus.com/articles/build-an-innovative-portfolio-site-using-alternative-uiux--webdesign-4437

    pm ux ui

    展开全文
  • 普元部署包部署找不到构建Hello! My name is Kevin Powell. I love to teach people how to build the web and how to make it look good while they’re at it. 你好! 我叫凯文·鲍威尔 。 我喜欢教人们如何构建...

    普元部署包部署找不到构建

    Hello! My name is Kevin Powell. I love to teach people how to build the web and how to make it look good while they’re at it.

    你好! 我叫凯文·鲍威尔 。 我喜欢教人们如何构建网络以及如何在他们使用时使其看起来更好。

    I’m excited to announce that I’ve just launched a free course that teaches you to create your very own fully responsive portfolio website.

    我很高兴地宣布, 我刚刚开设了一个免费课程 ,该课程可以教您创建自己的完全响应式的投资组合网站。

    After you’ve finished this course you will have a neat-looking portfolio site that will help you land job interviews and freelance gigs. It’s also a cool thing to show to your friends and family.

    完成本课程后,您将拥有一个外观整洁的投资组合网站,可帮助您进行工作面试和自由职业者演出。 向您的朋友和家人展示也是一件很酷的事情。

    We’re going to build the portfolio using Scrimba’s interactive code-learning platform, and then deploy it using DigitalOcean’s cloud services.

    我们将使用Scrimba的交互式代码学习平台构建产品组合,然后使用DigitalOcean的云服务进行部署。

    Also, DigitalOcean has been generous to give everyone who enrolls a free credit, so it won’t cost you anything to get it up and running.

    另外, DigitalOcean一直慷慨地为每个注册免费信用的免费 ,因此启动并运行它不会花费您任何费用。

    This post is a breakdown of the course itself, giving you an idea of what's included in all the lessons. If you like what you see, make sure to check it out over on Scrimba!

    这篇文章是课程本身的细分,使您对所有课程中的内容有所了解。 如果您喜欢所看到的,请确保在Scrimba上检查一下

    第一课:简介 (Lesson 1: Introduction)

    In the first lesson, you’ll get an overview of the course so that you know what to expect, what you should know before taking it, and what you’ll end up with once you're finished. I also give you a quick intro to myself.

    在第一堂课中,您将获得该课程的概述,以便您了解期望的内容,上课之前应了解的知识以及完成后将获得的结果。 我也给你一个自我介绍。

    Some general information about the author of the course

    第2课:设置-HTML (Lesson 2: Setting things up - HTML)

    In part two, I’m going to show you around in the Scrimba environment and we’ll also set up the project.

    在第二部分中,我将向您展示Scrimba环境,我们还将设置该项目。

    All the images are supplied, so you won’t need to worry about looking for the perfect photo just yet. We can focus on building the portfolio!

    提供所有图像,因此您无需担心正在寻找完美的照片。 我们可以专注于建立投资组合!

    Don’t forget that you can access everything you need from text and colors to fonts and much more at our dedicated design page.

    不要忘记,在我们专用的设计页面上 ,您可以访问所需的一切,包括文本,颜色,字体等等。

    第3课:标题区域-HTML (Lesson 3: The header area - HTML)

    It’s finally time to start building out the portfolio. In this lecture, we will create the header section. We will brush up on the BEM methodology for setting class names in CSS, and I think you’ll find that this makes the navigation simple and straightforward to create.

    现在是时候开始构建产品组合了。 在本讲座中,我们将创建标题部分。 我们将重温用于在CSS中设置类名称的BEM方法,并且我认为您会发现这使导航的创建变得简单明了。

    第4课:简介部分 (Lesson 4: Intro section)

    Next up is the Intro section of the portfolio. This is where we will introduce ourselves and put a picture of ourselves.

    接下来是投资组合的“简介”部分。 在这里我们将介绍自己并为自己做一幅画。

    In the end, we add a section about the main skills/services we can do. For the moment we can just fill it all in with “Lorem ipsum” text as a placeholder, until you're ready to fill it in with your own text.

    最后,我们添加了有关我们可以做的主要技能/服务的部分。 目前,我们只需要使用“ Lorem ipsum”文本作为占位符填充所有内容,直到您准备好使用自己的文本填充它即可。

    第5课:关于我的工作和页脚-HTML (Lesson 5: About me, Work and Footer - HTML)

    In this chapter, we’re finishing off the rest of our HTML with the last 3 sections: About me, where we’re going to introduce ourselves in greater detail; Work, where we’re going to add some of our portfolio examples, and our footer.

    在本章中,我们将通过最后3个部分结束HTML的其余部分:关于我,我们将在其中进行更详细的介绍。 工作,我们将在其中添加一些投资组合示例和页脚。

    Footers are ideal for linking to email addresses and I will show you how to do that with an <a> tag. We can also add our social media links there too.

    页脚非常适合链接到电子邮件地址,我将向您展示如何使用<a>标记。 我们也可以在那里添加我们的社交媒体链接。

    For now, it all looks a bit raw and all the CSS fun is ahead of us.

    就目前而言,这一切看起来有些原始,所有CSS的乐趣都摆在我们面前。

    第6课:设置自定义属性和常规样式 (Lesson 6: Setting up the custom properties and general styles)

    Alright, time to get make that page look amazing!

    好了,有时间让该页面看起来很棒!

    In this part, we’re going to learn how to add custom properties.

    在这一部分中,我们将学习如何添加自定义属性。

    While setting up CSS variables can take some time, it really pays off as the site comes together. They're also perfect for allowing you to customize the site's colors and fonts in just a few seconds, which I take a look at how to do once we wrap up the site.

    尽管设置CSS变量可能需要一些时间,但随着站点的合并,它确实会有所回报。 它们也非常适合让您在短短几秒钟内自定义网站的颜色和字体,在我们整理完网站后,我将看看如何做。

    第7课:标题和字幕的样式 (Lesson 7: Styling the titles and subtitles)

    Having set all the needed typography, I will walk you through the subtitles of designing and styling the titles and subtitles in our sections.

    设置完所有必需的字体后,我将带您逐步了解本节中标题和字幕的设计和样式说明。

    第8课:设置简介部分 (Lesson 8: Setting up the intro section)

    Over the next few chapters it’s going to be quite hands-on, so no worries if you feel like rewatching the screencasts a couple of times.

    在接下来的几章中,它将是非常动手的,因此,如果您想几次重新观看屏幕录像,请不要担心。

    We're keeping everything responsive, using CSS Grid and taking a little dive into using em units as well.

    我们使用CSS Grid来保持所有内容的响应速度,并且还简要介绍了使用em单元。

    This is the perfect example where CSS Grid shines through and we’re going to learn how to use properties like grid-column-gap, grid-template-areas and grid-template-columns.

    这是CSS Grid发光的完美示例,我们将学习如何使用诸如grid-column-gapgrid-template-areasgrid-template-columns类的属性。

    Intro section of the site

    第9课:样式化服务部分 (Lesson 9: Styling the services section)

    To add a little bit of interest, I look at how we can add a background-image to this section of the site. It's a nice way to break up the second and avoid just having solid color backgrounds everywhere, and I also look at how you could use background-blend-mode to change the color of the image to help keep the look of your site consistent.

    为了增加一点兴趣,我研究了如何向网站的此部分添加background-image 。 这是拆分第二个并避免仅在各处使用纯色背景的一种好方法,我还将研究如何使用background-blend-mode更改图像的颜色以帮助保持网站外观的一致性。

    As a bonus, we’re also going to learn how to style out buttons when they are hovered over or selected when we tab through the page.

    另外,我们还将学习如何在将鼠标悬停在页面上或在页面上切换时选择其样式。

    The services section of the site

    第10课:“关于我”部分 (Lesson 10: The About me section)

    Great progress! So this is the all-important About me section. This one is pretty similar to the Intro because we’re going to use CSS Grid, but move the picture to the right side and find a useful example for CSS fr unit.

    进步很大! 因此,这是关于我最重要的部分。 这与Intro非常相似,因为我们将使用CSS Grid,但将图片移到右侧并找到CSS fr单位的有用示例。

    The About me section of the site

    第11课:作品集 (Lesson 11: The portfolio)

    The portfolio section

    In this screencast, I will show how to build our portfolio section to display some of our great work. And we’re even going to learn how to use cubic-bezier() to a great and impressive effect with some hover styling!

    在此截屏视频中,我将展示如何构建投资组合部分以显示我们的一些出色工作。 而且,我们甚至cubic-bezier()学习如何通过一些悬停样式来使用cubic-bezier()达到令人印象深刻的效果!

    Portfolio section with highlighted item

    第12课:使用“真棒字体”添加社交图标 (Lesson 12: Adding the social icons with Font Awesome)

    This cast will be sweet and short, so you can rest a bit and learn some quick tips and tricks.

    这个演员阵容又甜又矮,所以您可以休息一下,学习一些快速的技巧和窍门。

    Adding social media links with Font Awesome icons is a breeze. We can do it with an <i> tag and then adding a class name of an icon you wish to add.

    添加带有Font Awesome图标的社交媒体链接很容易。 我们可以使用<i>标记,然后添加要添加的图标的类名。

    As an example, here’s how to add an icon for GitHub once you have Font Awesome linked in your markup.

    例如,以下是在标记中链接了Font Awesome后如何为GitHub添加图标的方法。

    <i class="fab fa-github"></i>

    <i class="fab fa-github"></i>

    第13课:样式设置页脚 (Lesson 13: Styling the footer)

    The footer

    While the icons are in place, we do need at add more styling here to get them to be set up the way we need them to be.

    图标就位后,我们确实需要在此处添加更多样式,以使其按照我们需要的方式进行设置。

    With a little use of flexbox and removing the styling from the list with list-style: none it's relatively straight forward.

    很少使用flexbox并使用list-style: none从列表中删除list-style: none这是相对简单的。

    第14课:设置导航样式 (Lesson 14: Setting up the navigation styles)

    We have left the navigation to the last because very often it’s one of those simple things that can take the longest to set up and do correctly.

    我们将导航留到了最后,因为通常这是最简单的事情之一,需要花费最长的时间来设置和正确执行。

    Once completed, the navigation will be off-screen, but slide in when a user clicks on the hamburger icon. The first step though, is to get it styled the way we want it to look, then we can worry about actually making it work!

    完成后,导航将不在屏幕上,但是当用户单击汉堡包图标时,滑入。 不过,第一步是按照我们希望的外观来设置它的样式,然后我们可能会担心使其真正起作用!

    styled navigation menu

    第14课:制作汉堡 (Lesson 14: Creating the hamburger)

    shot of the top of the page with an arrow highlighting the hambuerger icon

    In this screencast, you’ll learn how to add a hamburger menu to transition to the navigation view. It’s not an icon or an svg, but pure CSS.

    在此截屏视频中,您将学习如何添加汉堡菜单以过渡到导航视图。 它不是图标或svg,而是纯CSS。

    We’re going to have a chance practice ::before and ::after pseudo-selectors, transition, and, since it's not a link but a button, we also need to define the different cursor when we hover over the hamburger icon to indicate that it can be clicked with cursor: pointer.

    我们将有机会练习::before::after伪选择器,进行过渡,并且由于它不是链接而是button ,因此,当我们将鼠标悬停在汉堡图标上以指示时,我们还需要定义其他光标可以使用cursor: pointer单击它。

    第15课:添加JS (Lesson 15: Adding the JS)

    With a little bit of JavaScript, I will walk you through the implementation of a really nice and smooth transition from our main screen to the navigation window on click of the hamburger menu.

    借助一点点JavaScript,单击汉堡包菜单,我将引导您完成从主屏幕到导航窗口的非常好且流畅的过渡。

    menu open/close animation

    I also take a look at how we can add in smooth-scrolling with CSS only by using scroll-behavior: smooth. Yes, it really is that simple! It also makes a great tweet for Today I Learned (TIL). Feel free to send you TILs to @scrimba and I’m sure they will be really happy to retweet them!

    我还将介绍如何仅通过使用scroll-behavior: smooth来添加CSS的平滑滚动。 是的,真的就是这么简单! 它还为“我今天学习了”(TIL)发出了很棒的推文。 随时将您的TIL发送给@scrimba,我相信他们会非常乐意转发他们!

    第16课:创建投资组合项目页面 (Lesson 16: Creating the portfolio item page)

    With the homepage wrapped up, it's time to work on a template portfolio page that can be used to give more details on each of the projects that you are putting in your portfolio.

    完成首页的包装后,就可以在模板投资组合页面上工作了,该页面可用于提供投资组合中每个项目的更多详细信息。

    We're also going to learn how to link it seamlessly with our main page for a nice user experience.

    我们还将学习如何将其与我们的主页无缝链接以获得良好的用户体验。

    portfolio item page

    第17课:自定义页面 (Lesson 17: Customizing your page)

    This is where the magic of CSS custom properties comes in!

    这就是CSS自定义属性的神奇之处!

    In this video I look at how we can customize the custom properties that we set up to change the color scheme of your site within seconds, and how we can update the fonts quickly and easily as well in order to make the site your own!

    在本视频中,我将介绍如何自定义设置为在几秒钟内更改您网站配色方案的自定义属性,以及如何快速,轻松地更新字体以使您拥有自己的网站!

    第18课:DigitalOcean小滴-它们是什么以及如何设置 (Lesson 18: DigitalOcean Droplets - What they are and how to set one up)

    In this screencast, we're going to explore DigitalOcean droplets. They are Linux-based virtual machines and that each droplet is a new server you can use.

    在此截屏视频中,我们将探索DigitalOcean液滴。 它们是基于Linux的虚拟机,每个Droplet都是您可以使用的新服务器。

    It can seem daunting, but they are super easy to set up, very customizable and come with a lot of useful features, like a firewall automatically.

    这看似令人生畏,但它们超级易于设置,可自定义并且具有许多有用的功能,例如自动防火墙。

    DigitalOcean dashboard

    I'll talk you through every single step of the way so that you know exactly how to set a droplet up.

    我将逐步指导您完成每一步,以便您确切地知道如何设置液滴。

    第19课:DigitalOcean小滴-通过FTP上传文件 (Lesson 19: DigitalOcean Droplets - Uploading files via FTP)

    To finish the whole process off, let me show you how we can upload our portfolio to the droplet we've created in the previous chapter and now it's online for others to see!

    为了完成整个过程,让我向您展示如何将投资组合上传到上一章中创建的Drop,现在它在线上供其他人查看!

    第20课:总结 (Lesson 20: Wrap up)

    And that's it! Your next step can be to make this page all about you, add all the relevant examples, tell us about you and make it live in a DigitalOcean droplet.

    就是这样! 您的下一步可以是使该页面与您有关,添加所有相关示例,向我们介绍有关您的信息,并将其发布在DigitalOcean小滴中。

    Once you've put yours together and got it online, please share your portfolio with Me and the team at Scrimba! You can find us at @KevinJPowell and @scrimba on Twitter, and we would be really happy to share what you're up to!

    将所有内容放在一起并使其联机后,请与Me和Scrimba的团队共享您的作品集! 您可以在Twitter上的@KevinJPowell@scrimba上找到我们,我们非常乐意分享您的最新动态!

    查看完整课程 (Check out the full course)

    Remember, this course is completely free. Head on over to Scrimba now and you can follow along with it and build out a fantastic looking site!

    请记住,本课程完全免费。 立即前往Scrimba ,您可以跟随它并建立一个漂亮的网站!

    翻译自: https://www.freecodecamp.org/news/build-and-deploy-your-own-personal-portfolio-site/

    普元部署包部署找不到构建

    展开全文
  • 经过2项重新设计和3项重建,我认为我终于有了一个令我满意的投资组合……。 设计师如何说自己是最糟糕的客户,这是事实。 这是有关幕后情况的一些信息。 建立 此产品组合是在Jekyll中建立的。 我正在使用gulp工作流...
  • 特此授予任何人免费获得本软件和相关文档文件(“软件”)副本许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并权利、发布、分发、再许可和/或出售软件副本,并允许向其提供软件人这样做,...
  • 文件夹 这是样本投资组合项目 使用的技术 HTML CSS 安装方式 无需安装任何软件。 只需使用index.html 如何使用 使用此模板来构建自己的投资组合
  • Eve是一个超级极简Jekyll主题,用于构建单页个人投资组合网站 部署到Github Pages 分叉或克隆此回购 将存储库重命名为所需github页面网址(例如yourname.github.io) 根据需要自定义_config.yml 将代码推送...
  • 非管理员用户将只能更新他们自己的配置文件。 此外,他们将无法查看其他用户(例如管理员)的列表。 该应用程序使用会话来避免用户再次登录。为了提高帐户的安全性,密码以加密形式存储,并且不允许用户查看其密码...
  • 构建基金投资组合

    千次阅读 2006-04-15 16:31:00
    我建议投资者不要光考虑如何投资单个基金的问题,最好还是从上而下综合考虑,从投资组合开始进行分析,然后再选择具体的基金。问一下自己:我为什么要买这个基金?我的投资目标和策略是什么?只有将这些问题搞清楚了...
    《Value》杂志经常会介绍一些基金投资的知识,或许有些读者会考虑买哪些基金和如何买基金。我建议投资者不要光考虑如何投资单个基金的问题,最好还是从上而下综合考虑,从投资组合开始进行分析,然后再选择具体的基金。问一下自己:我为什么要买这个基金?我的投资目标和策略是什么?只有将这些问题搞清楚了,才会明白自己需要什么样的基金,应该如何去投资基金。
    

    想清楚你为什么而投资

      你究竟为什么而投资?这个问题听起来好像很简单,为了获得收益啊。不错,投资的目的是为了获得一定的收益,从而改善自己的生活质量,生活上什么样的改善才能让你感到满意呢?买个大房子、买辆汽车、出国旅游或者买套新家具,哪一件事会让你更满意呢?为了这些目标,你需要准备多少钱呢?这些钱中有多少是你挣来的?哪些是你投资获得的收益?在投资上,你可以投入多少资金呢?按照刚才计算的预期收益折算后,你的期望收益率是多少呢?
      说了这么多,读者或许会有点晕,这么多的问题,我怎么能样样都想得那么清楚呢?况且有些还可能是几年后的事情呢。“我只是看到目前银行存款利率太低,想略微多获得一些收益而已啊,不用这么复杂吧?”
      其实,读者不用把这些问题想得那么复杂,一些很简单的要求也可以作为你的投资目的,例如上面所说的想获得比银行利率略微高一些的收益,就是一个很好很清晰的投资目的。关键是要想清楚你对投资的期望有多少,这样才能在投资一段时间后采取相应的策略,而不是走一步看一步。

    确定你的投资风格
      进行投资之前,首先要根据你自身的情况以及风险承受能力来决定你的投资风格。风险承受能力的确定可以根据一系列测试来分析你的投资偏好,《Value》 杂志曾经刊登过投资偏好的测试问卷,有兴趣的读者可以找出来做一下。

    确定你的投资金额
      首先分析一下你的资产情况,把你的负债和现金存款列出来,看你有多少净现金类资产。这里所说的负债是指你需要近期偿还的,不包括房贷、车贷等日常开销已经涵盖的债务,但你需要根据自己的日常开销和近期的预算留出一部分备用金,一般要保留6个月的日常开销作为备用金,这是为了应对家庭收入万一不稳定的情况,这样你可以有充裕的时间来调节或换一份工作。若是有要个小宝宝或是要新购房屋、汽车、出国度假等非日常开销预算的话,这部分预算的钱最好也要预留出来。建议这两笔钱不要混为一谈,不能想若是我收入减少的话,大不了计划就暂缓一下好了。买房买车或许能暂缓一下,但怀孕生孩子能暂缓吗?当然,让你留出这部分备用金不是说你就必须存在银行里不动,而是说这笔钱绝对不能用来投资高风险的产品,只能投资于银行存款、货币基金之类的低风险产品。
      其次是分析一下你的现金流。你可以自己计算一下自己每月的收入及支出,看一下每个月能节余多少,有多少能用来投资。若你是个“月光族”的话,你的问题就不是投资的问题,而是如何合理使用资金的问题了。

    确定你的资产配置
      你对自身的资产情况、现金流情况以及投资偏好的分析完毕后,就可以确定你的投资资产配置了。切记不要急着买基金,而是要先进行资产配置,分析一下你应该在股票类资产、债券类资产、现金类资产上各配置多少比例,然后再按照这个比例去做投资。
      一般来说,风险承受能力越低的人,在现金、债券类资产上就应该配置得越多一些。我经常在报纸上看到一些老年人把退休金都投入股市,结果是血本无归。看到这些,我感到很难过,这些老年人本应该用这笔钱来颐养天年。作为老年人,比较合适投资于低风险产品,而不宜把较多资产都配置在高风险的股票类资产上。
      当然,我也不是鼓励年轻人把绝大部分资金都配置在高风险资产上,而是要根据你自己的投资偏好以及自身的经济条件来决定。我以前看过一篇讲买保险的文章,文章中说目前买保险的大多是收入相对较高的人,但作者认为最应该买保险的其实是低收入阶层。道理很简单,高收入者的抗风险能力相对较强,万一出了什么问题,自身还能应付。但是低收入者呢?或许一场小病就能让他们的生活陷入困境。我建议月现金净流入较少的投资者,在高风险资产上也应配置得少一些,多配置一些低风险的投资产品(这里指的当然是资产配置比例,而不是指绝对金额)。要注意,我这里用的是月现金净流入而不是月收入,因为你的月收入不是你实际可以动用的资金,只有扣除各种开支后的余额,才是你可以支配的资金。若一个投资者每月收入上万,但除去日常开销、还贷等支出,每月实际结余只有2,000元; 另一个投资者虽然每月收入只有5,000元,但不需要还贷,日常开支也比较节省,每月能结余3,000元。在我看来,后一个投资者在其他条件相同的情况下,在高风险资产上可以比第一个投资者配置得更多一些。
      另外,各类资产配置的比例确定后,切忌看到某一类资产的收益率出现重大变化就急着修改各类资产配置的比例,例如,从去年年底开始,股市出现一波不小的上涨行情,不少股票基金的收益率也颇为可观,有的投资者就想在股票基金上多配置一些。你可以略微调整一下比例,但是不能调整得太多,除非你对于大盘的走势有着良好的判断。在投资上要保持良好的心态,贪婪和恐惧是投资的大忌,会让你的心态失衡,进而会影响你的操作。
      投资现金类资产首先要考虑的是安全性和流动性,而不是收益率。投资债券类资产主要应考虑的是能有一个安全而又稳定的收益,股票类资产当然是获取收益的主力军,但是也可能是亏损大户。
      经过几年来的发展,基金的种类和品种已经比较丰富了,一般投资者完全可以通过把资产配置在不同类别的基金上来进行投资。现金类资金有货币基金、短债基金可以配置;债券类资产则有各类债券基金可以配置;股票类基金更是有近百种可供选择,其中还有不少指数基金可供投资;平衡型基金则具有稳健有余、收益亦可的特点。
      如果投资者的风险承受能力较高,而且用于投资的资金在较长时间内可以不动的话,可以采取较为激进的投资策略,把较多的资产配置在股票类基金上;若是风险承受能力一般的话,可以投资平衡型基金或是将小部分资产配置在股票型基金上;若是投资者比较厌恶风险的话,可以把较多资产配置在货币基金、短债基金和债券基金上。
      投资者这时需要确定一下各类资产的配置比例,这个比例并不是固定不变的,可以是一个范围,例如股票基金的配置比例在25%-40%之间,投资者可以根据不同时期的市场表现来决定实际的配置比例。我不建议投资者把范围设得很宽,例如股票基金的配置比例在25% -90%之间,普通投资者不可能像基金经理那样对市场有着敏锐的触觉和快速的反应能力,设置这么大的配置范围。我只能说,如果你不是个有着丰富经验的投资者,就是个投机者。

    确定你的基金组合
      确定好各类资产的配置比例,你就可以进行具体基金的选择了。货币市场基金的选择比较简单,因为众多货币市场基金除了上投摩根之外,其实都很类似,收益率都在2%左右,需要考虑的主要是交易的便利性。货币市场基金还要看你通过哪里买卖?若你办理过网上银行手续的话,那么,首先要看看你的网上银行里可以买卖哪些货币基金。其次是看看交易的便利性如何,例如是否支持基金转换?赎回到账期有几天?再看看收益率如何。基金转换主要是指在你想调整投资比例时,可以通过在同一基金公司旗下的股票基金和货币基金之间的转换来进行,不用先赎回再申购。这样不仅交易的效率高,还可以节约一些交易成本,某些基金公司的转换费率会比申购费率还低一些。目前货币基金赎回后资金一般是1-2天到账,基本上差别不大,最快的是在招商银行买卖招商货币基金,赎回的第二个工作日早上9:30前资金就可以到账,其他基金一般都保证在赎回的第三个工作日到账。若你比较看重这点的话,你就需要字斟句酌地分析,需要仔细询问资金到账是指资金到你的个人账户并且可取,还是指资金到银行的清算账户,在你账户上可见但不可取。
      在现金类资产方面,除了货币市场基金之外,还可以购买国泰君安的“君得利”集合理财产品和招商证券的“现金牛”产品。这两个产品都是类货币基金的产品,在各类条款以及收益率方面和货币市场基金差不多。
      去年新面市的短债基金因其收益率比货币基金高而流动性等同于货币市场基金,因此很吸引投资者的眼球。因短债基金出来的时间还不是很长,没有经过债券一个完整涨跌周期的考验,因此建议投资者不要长时间配置较多的短债基金。
      债券类资产方面,我个人是不太赞成购买债券基金的,债券基金的收益说实话都不高,综合费用倒不低。而且整体来看,跑赢债券指数的债券基金少之又少,加上最近债券价格不断上涨,收益率也是少得可怜,还不如买进几只好的债券,若是交易价格下跌的话,可以采取持有到期的策略。需要注意的是,有只兴业可转债基金,这只基金中虽然有较多债券的成份,但因为它主要投资可转债,不同于普通债券,应该看作是平衡型基金。
      在平衡型基金方面,因这类基金既投资债券又投资股票,在行情较好的时候,会把较多的资产配置到股票上,在行情不好的时候,又会在债券上配置较多的资产。做得好的话,不仅比较抗跌,而且收益也不会低,但这类基金需要基金经理对于大势的判断有着准确的把握。投资者不妨仔细分析这类基金在不同时候的持仓分布,看在行情的不同时期其在债券、股票方面的配置调整时机是否恰当,是否能准确把握行情趋势的变化。
      股票基金方面的选择你可以参照“Value中国基金排行榜”,跟踪观察一段时间,看哪些基金的排名是经常比较靠前的,选一些表现比较稳定的基金投资。
      指数基金也是适合普通投资者的一个很好的产品,因为它很简单,大盘涨它也涨,省去了投资者不少精力。
      我一直认为封闭式基金因折价率的存在而有着巨大的价值,尤其是那些业绩比较好的封闭式基金。我个人认为,封闭式基金的折价率问题必将在近几年全部解决,因此,一些业绩较好的大盘基金的投资价值极高。
      要精心选择各类基金的具体投资对象,若你在同一类基金上可能选择多只基金投资的话,建议尽量不要选投资策略类似的基金,因为投资的一个要点就是在获取收益的同时要尽可能地分散风险,若是你所投资基金的投资策略比较类似的话,很可能会同一时段所有基金的表现都较好或是同一时段所有基金的表现都不好,这样就起不到分散风险的目的了。
      建议投资者不要投资较多的基金,有些投资者看这个基金蛮好那个基金也不错,就都买一些。投资较多的基金不仅不利于投资者跟踪分析,而且投资太多基金可能会影响整体收益,本来一个基金配置20%,上涨10%的话,那么就有2%的收益。现在一个基金配置5%,那么上涨10%也只有0.5%的收益。要握紧你的拳头,相对集中地投资这样出击才会有力。

    推荐基金组合
      在各类基金的配置方面,我有以下建议供投资者参考。
    监控你的基金组合
      或许现在你已经建立了自己的基金组合,但组合建立好了不等于你就可以把这些基金放在一边而坐等收益了,这是投资的大忌。无论你的投资金额是多少,你都应该定期检查一下这些基金的表现如何?是否需要对它们的配置比例作些调整,甚至把某些基金调出你的组合。毕竟你付出的是真金白银,或许你现在投资的金额还比较少,即便亏损了你损失的金额也很少。但是今后如果你加大了投资,有多少能力和经验来处理你的基金组合呢,对自己又有多少信心呢?
      首先你要制定一个监控的策略,多长时间监控一次?监控的主要内容是什么?若达到一定收益或出现亏损的时候如何处理?
      在监控的频率上,建议你每周都要看一下,至少你每周都要了解一下整体收益如何,每月详细分析一次各基金的表现如何,这样你才能对基金的表现有充分的了解。在达到收益预期或是出现亏损时,你才能判断你的组合里各基金的表现到底如何,是暂时表现不佳,还是从长期来看表现确实不尽人意。
      在分析基金的业绩表现时,你需要选取不同的时间范围来考察该基金的表现,而不是仅仅看其短期的表现。与此同时,你还需要看一下整个组合的表现如何,是否达到你的期望收益,在投资期内的表现是否稳定?若达到了你的期望收益的话,就要按照你当初的策略进行操作——是将收益落袋为安,还是调整各类资产的配置,以采取较为稳妥的投资策略。在这里要提醒投资者,千万不要看到收益可观就乐昏了头,拼命加大投资的额度。花无百日红,国内股市从长期看是一定会持续走牛的,但是短期的波动还是不可避免的。取得一定的收益之后,千万要严格按照当初制定的策略操作,对组合进行一定的调整,而不是盲目加大投资。当然,在出现一定的亏损时,也要仔细分析损失是否在当初的预料之中,是某个基金表现较差,还是整个资产的配置不恰当?若是损失超过了你的承受范围,你就有必要对组合以及投资的策略作一定的调整了。
      对于单个基金的分析,建议投资者还是采取长期跟踪的方法,不仅要分析基金经理,更要分析基金公司的整体实力。一只基金的好坏不是短期内就能看出来的,短期的业绩波动有着更多的偶然性,只有长期跟踪观察一只基金,才能判断这只基金到底是好是坏。一只基金名义上是基金经理在管辖,其实基金经理的背后有着很多研究员以及整个基金公司研究分析平台的支撑,基金的表现不仅取决于基金经理的能力,更离不开背后整个公司平台的支撑。基金公司良好而又稳定的平台才能保证一只基金的长期表现,即使基金经理更换,也能保持良好的业绩。
      在这里,我建议投资者不要只关心组合里的几只基金,更要对一些备选的基金长期跟踪观察,只有这样,才能在组合调整的时候了解组合内的基金与市场上其他基金孰优孰劣,若需要调整的话,哪些基金更适合于调进组合。
      或许有些人建议投资者仔细分析基金每次定期报告里公布的持仓情况,以此来分析该基金的风险程度,再考虑是否要对该基金的配置比例作出调整。我建议投资者对此可以关注一下,但不要把此作为分析的重点。道理很简单,计划跟不上变化快,更何况是延期公布的持仓呢?你又怎么知道在报告公布后基金的仓位是如何调整的呢?过多考虑基金定期公布的投资组合,希望通过组合的跟踪来调整基金组合,效果可能不会很好。
      我建议投资者倒是可以仔细读一下各基金定期报告里的基金经理的讲话,这里不仅可以了解该基金经理对投资者的态度,而且可以了解该基金经理在投资方面的思路和策略。我觉得,这些对于了解分析基金或许更为有用。
      另外一个简单的办法就是跟踪各基金在各类基金评级中的排名如何。一只基金若是在各类基金评级中一段时间内排名都是较为靠后的话,你就可以把它调整出你的组合。反之,若是你的备选基金里有一些在各类评级中都排名较为靠前的话,或许你可以把它们也加入你的组合中。

    展开全文
  • 防御型可转债 在熊市来临,股市大跌时,它能帮我们保住本金、获得利息收益。...这三种类型的可转债,我们组合里要有多少呢根据长投研究院大佬的投资经验来看,防守型可转债的数量占总数量的30%,平衡型的占...




    606150828

    606156593

    防御型可转债 在熊市来临,股市大跌时,它能帮我们保住本金、获得利息收益。

    进攻型可转债 在牛市来临,殷票大涨时,它能带领我们获取更多的收益。

    平衡型可转债 进可攻退可守,熊市能抗跌,最不济也至少能保住本金,牛市能盈利,虽然没有进攻型可转债那么多,但也比到期年化收益率高得多。

    这三种类型的可转债,我们组合里要有多少呢

    根据长投研究院大佬的投资经验来看,防守型可转债的数量占总数量的30%,平衡型的占50%,进攻型的占20%

    这样平衡型占大部分的分配,既避免了防守型数量太多收益不够,也防止了进攻型数量太多,风险过大

    怎么选出来这些可转债呢?

    1. 根据到期年化收益率、转股溢价率这两个指标,筛选出三种可转债。
    2. 根据评级,剔除不符合评级条件的可转债
    3. 分配资金构建组合。

    606203015

    根据到期年化收益率、转股溢价率这两个指标,筛选出三种可转债

    防御型可转债:到期年化收益率>3%

    平衡型可转债:0<到期年化收益率<3%,转股溢价率<5%

    进攻型可转债:转股溢价率<2%

    进攻型可转债这里,我们要再加一个条件,那就是根据转股起始日,剔除未到达可转股期限的进攻型可转债。

    684925906

    684936734

    684943000

    684962250

    684967921

    684973218

    684979718

    684992906

    685001156

    685759453

    685764390

    685769812

    686014093

    686018609

    686021468

    686024750

    686095515

    686098531

    686132734

    686147781

    686150593

    686381000

    686384218

    686387484

    686391703

    将不符合评级条件的可转债删除,也就是剔除AA级以下的可转债

    686394578

    应该挑几只建立组合

    • 根据长投研究院大佬的投资经验来看,可转债组合至少要有10只建立,根据自己的资金情况越多越好,这样可以有效的分散风险。按照组合的话,需要买入3只防御型可转债,5只平衡型可转债以及2只进攻型可转债。
    • 这里要注意的是可转债的最小交易单位是10张,按票面面值100元计算的话,也就是一支可转债至少要投入1000块。
    • 因此构建一个可转债组合至少需要准备1万元左右

    686449328

    最后我们买入到期年化收益率排名靠前且为正的可转债就可以了。

    686451968

    ●因为市场是实时变化的,所以我们筛选可转债的时候很难正正好好的达到我们想要的数量要求。

    ●在数量不够的情况下,就买入可以买的几只可转债,剩下的钱放在货币基金里,等到机会出现时再在组合里补上。

    ●在数量多的情况下我们可以买入到期年化收益率靠前的几只。

    每一只应该买入多少呢?

    686462406

    展开全文
  • 您可以使用此模板来构建自己的投资组合。 这是使用的Bootstrap模板构建的 您可以单击“使用此模板”按钮或“分叉此存储库”。 要进行更改,您要做的就是编辑index.html文件。 您可以直观地添加您的项目和有关您...
  • 网站 我个人投资组合网站是使用11ty,TailwindCSS和AlpineJS构建的。 看看源代码或自己检查一下!
  • 对于UGAHacks BlackRock挑战,我们希望构建一个平台,使用户可以利用有用的工具提示和信息来构建自己的产品组合,并牢记可持续投资的信息。 这个项目是在许多人开始将他们的资金投入市场的时候进行的,我们相信Landr...
  • Portfolio App - WWDC 2015 奖学金获得者 这是我为获得 2015 年 WWDC 学生奖学金而开发的组合 iOS 应用程序。我现在也用它来展示我的技能、经验、教育和爱好。... 随意下载并在您自己的设备上运行它!
  • 这是使用next.js对我的投资组合进行的完全重建。 这绝对是一项正在进行的工作。 如果您看到奇怪的事情,请告诉我。 您可以查看我的进度。 随意分叉并按自己的喜好对其进行修改。 除了内容,我都是开源的。 快看...
  • 用技术量身打造投资顾问 -- 投资组合构建策略篇前言, 关于motivation工具,个人投资时手中的牌股票债券黄金大宗商品房地产总结工具的特性组建自己的牌型,组建自己的战斗编队队形队形一:永久组合队形二: 全天候...
  • Devfolio是建立在GatsbyJS上并使用TailwindCSS样式现代且可投入生产个人投资组合和博客模板。 轻松炫耀您项目,经验和技能,并撰写博客文章来展示您知识。 一些功能包括: 在GatsbyJS上使用React构建...
  • 学习创建自己的投资组合平台,例如Portfoliobox.net-Aditya Raj的开源项目 关于这个开源项目 开源项目适用于试图通过遵循最佳实践和范例来学习和创建应用程序的开发人员。 该项目需要熟悉Python编程语言。 该项目...
  • 欢迎来到我在线投资组合! 嗨! 我名字叫Mathieu Lavoie,这是我在线作品集回购。 可用脚本 在项目目录中,可以运行以下命令: npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑...
  • 第五节股票现货组合技巧/302 第六节债券无风险套利/305 第七节ETF无风险套利/312 第八节分级基金套利/315 第九节吸收合并和要约收购无风险套利/317 第十节拟合/318 第十二章如何做低风险交易 ...
  • 您可以根据自己的喜好轻松添加,编辑或删除股票行情。 内置 很棒的语言。 一个高级Python Web框架,鼓励快速开发和简洁实用的设计。 世界上最受欢迎的前端组件库。 开发人员用于构建和扩展财务应用程序的财务...
  • 的投资组合网站是使用Angular CLI (版本11.0.2)构建的。 我创建它的目的是为了显示有关我的更多详细信息,联系方式以及将其余项目组合在一起。 谢谢你的拜访! 技术领域 在此项目中,我正在使用: 角度的 角度...
  • 是一个投资组合网站制造商应用程序,它使用户能够构建自己的投资组合网站。 团队 莎拉雅·贝克 安德里亚·迪亚斯(Andrea Dias) 亚瑟· Arthur Liou) 目录 地方发展 分叉仓库(可选) 从你的叉子克隆 复制.env...
  • 的投资组合的第一个版本是由构建并由托管的 :police_car_light: 在分叉之前(请阅读!!!) 一些人与我联系,询问他们是否可以使用我的代码来学习或用于自己的网站,答案是肯定的,但是请给我dawg积分。 我想...
  • 投资组合网站 我的网站建设开始了! 我使用React作为框架,并尽我最大的努力来创建一个响应式且漂亮的Web应用程序! 图片将在完成后 图片 关于科 导航栏,关于我自己的部分很酷,适用于Apple平板电脑和手机的媒体...
  • Firebase的设置也,可以在我推送到该存储库时构建自己的网站并自动进行部署。 这意味着要将帖子添加到博客,我要做的就是将其添加到posts文件夹并将其推送到此处。 在Svelte的小包装尺寸和最小的设计之间,我整个...
  • 个人投资组合 目录 用法 发展 支持的版本 贡献 错误和问题 执照 描述 Shop Portal是一个由MERN堆栈提供支持的开源电子商务平台。 它旨在使任何人都可以轻松地托管自己的在线商店。 不管您是在网上开展业务还是...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 278
精华内容 111
关键字:

构建自己的投资组合