导出时未显示codepen css
[英]codepen css not displaying when exported
问题描述
Hi there i am very new to coding and have been learning at free code camp for a couple weeks now (3-4 weeks), about 10 hours a week as i only get chance to code when i get home at nights after work, so please bear with me if my mistakes might seem amateur-ish. 
嗨，我对编码非常陌生，现在已经在免费代码营学习了几周（3-4周），每周大约10个小时，因为我只有在下班后晚上回家时才有机会进行编码，所以如果我的错误看起来像业余爱好者，请多多包涵。
Ok, so my issue is, i started a draft for a portfolio page on codepen. 好的，所以我的问题是，我开始在Codepen上制作投资组合页面的草稿。 Its currently not finish but midway i decided to export it and see how it runs outside of codepen. 它目前尚未完成，但是中途我决定将其导出，并查看它如何在Codepen之外运行。 When i exported it runs perfect on google chrome on my local pc, however i sent the html exported file to two separate pcs and when the file was opened the web page was nothing like how it was opening on my pc. 当我导出时，它在本地PC上的谷歌浏览器上运行完美，但是我将html导出文件发送到了两个单独的PC，当打开文件时，网页与在PC上的打开方式完全不同。 The css dont seem to be working.Back ground images are missing, images that had css classes applied to them seemed to be not effective, fonts seemed to be overridden by default fonts css似乎不起作用。缺少背景图像，已将css类应用于图像的图像似乎无效，字体似乎被默认字体覆盖
here is a link to my code pen: enter link description here 这是我的密码笔的链接 ： 在此处输入链接描述
<header>
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
</header>
<body class="boDy">
<div class="myDiv">
<div class="bg"></div>
<h1 class="myfont2 text-center"> <span style="color:purple">T.E.Q</span>
<span style="color:green">MOLECULE</span> MEDIA</h1>
</div>
<nav id="nav-example" class="navbar navbar-inverse bg-dark affix sticky" data-target-offset="18">
<a class="navbar-brand myfont" href="#">TEQ Molecule</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#Portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#About">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#Contact">Contact</a>
</li>
</div>
</ul>
</nav>
<div class="bckground">
<div class="bb1"></div>
<br></br>
<br></br>
<br></br>
<div id="#scroller" data-spy="scroll" data-target="#nav-example" data-offset="10">
<div class="myfont2" id="About" style="left:20px">
<br></br>
<h3>ABOUT T.E.Q</h3>
</div>
<img class="smallerImage"style="margin-left:20px"src="http://farm1.staticflickr.com/860/40814758834_31a56037fb_b.jpg" alt="about TEQ">
<br></br>
<br></br>
<div class="divider"></div>
<br></br>
<div id="Portfolio" class="myfont2">
<br></br>
<h3>PORTFOLIO</h3>
</div>
<br></br>
<div class="row">
<div class="col-md-4">
<a href="#"> <img class="thumbnail imgCenter" src="http://farm1.staticflickr.com/842/41527921141_e5c1bdbd42_b.jpg" alt="graphic arts"></a>
<p class="text-center myfont"> GRAPHIC DESIGN</p>
</div>
<div class="col-md-4">
<a href="#"> <img class="thumbnail imgCenter" src="https://f9tech.com/wp-content/uploads/2018/02/dev-1.jpg" alt="web deveopment"></a>
<p class="text-center myfont"> WEB DEVELOPMENT</p>
</div>
<div class="col-md-4">
<a href="#"><img class="thumbnail imgCenter" align="center" src="https://scontent.fbgi2-1.fna.fbcdn.net/v/t1.0-9/25299007_1255958357881913_5312854462633629399_n.jpg?_nc_cat=0&oh=0c924733b42ea92b9916ab8576192094&oe=5B59AE75" alt="digital marketing"></a>
<p class="text-center myfont">DIGITAL MARKETING</p>
</div>
</div>
<br></br>
<div class="divider2"></div>
</div>
</div>
</body>
2 个解决方案
解决方案1
1 已采纳 2018-04-19 16:04:15
您不仅需要与其他计算机共享HTML，而且还需要共享项目中的所有文件夹和文件，例如：css文件，图像等。
解决方案2
0 2018-04-19 17:05:34
You need to do many things for your code works. 您需要为代码工作做很多事情。
- Change you tag called to -将您的标签更改为
- Create two folders in your project width the following names: css and js. -在您的项目宽度中创建以下名称的两个文件夹：css和js。 In css folder create a file called style.css and add your style code in css. 在css文件夹中，创建一个名为style.css的文件，然后在css中添加样式代码。 In js folder create a file called main.js and add your script code in js 在js文件夹中创建一个名为main.js的文件，然后在js中添加脚本代码
- Your project needs import jquery and bootstrap libs. -您的项目需要导入jquery和bootstrap库。 So, you need put in head tag the following path cdn 因此，您需要将head标记放在以下路径cdn中
Notice that there are links of your css and js files 请注意，您的css和js文件有链接
Complete code here 完整的代码在这里
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.