Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
DE編譯運行vue項目:
npm run serve
報如下錯誤:
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
解決方法:
1.打開cmd
2.執行以下命令修改node相關配置
setx NODE_OPTIONS --max_old_space_size=10240
3.重啟IDE,重新編譯運行vue項目。
概是18年的時候,那時候我還是一個很稚嫩的小前端,我記得很深刻,當前GitHub上有個叫做Screenshot-to-code的開源項目沖榜賊猛,短短幾天就獲得了好幾千的star,這個項目主要表達的是在未來三年內,深度學習將改變前端開發。它將會根據設計圖自動生成對應的html,css代碼,從而拉低開發軟件的門檻。
也就是說我們前端以后不需要再畫靜態了!
項目地址:https://github.com/emilwallner/Screenshot-to-code
Screenshot-to-code-in-Keras 是 Emil Wallner 實現的一個可根據設計草圖生成基本 HTML 和 CSS 網站的神經網絡。以下是該過程的簡要概述:
1)給訓練好的神經網絡提供設計圖像
2)神經網絡將圖片轉化為 HTML 標記語言
3)渲染輸出
Emil Wallner 分三步從易到難構建三個不同的模型:
這里只做簡單介紹,感興趣的朋友可以在頭條搜索中搜 Screenshot-to-code 即可看到更多詳細內容
前幾天體驗了一下藍湖內測的設計圖轉代碼功能,真的挺震撼的。廢話不多說,大家請看視頻!
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
(第二張示例圖中標簽文字溢出并不是bug,因為谷歌瀏覽器最小文字只支持12px)
從上面視頻可以看到,UI小姐姐只需要把畫好的項目設計圖放上去,我們前端就可以直接生成完整的靜態頁。目前來看主要支持vue和普通的html頁面。css倒是兼容得非常好,less和sass都支持不過這畢竟只是一個內測版,相信等正式推出時應該是可以兼容到react等主流框架的。
感覺這對我們前端來說其實還是利大于弊,因為前端最主要的交互和邏輯未來五年內應該是不可能像靜態一樣可以生成,那么設計圖轉代碼的功能的推出其實還是可以在一定程度上減輕我們的工作負擔。
因為畫靜態頁對大部分前端來說都是枯燥無味的工作。如果以后都不用畫靜態的畫,那么我們就可以有空閑時間來學習新技術,新知識。比如現在挺火的云函數啥的,學學總沒有壞處?;蛘邔W一門后端語言等都可以不斷完善自己的技術棧,提高自己的行業競爭力。
篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。
當我們在編寫網頁代碼的時候,肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度,導致文本換行或者文本超出了界限,這時有人就會說了,讓后臺限制一下調用的文字個數不就行了嗎,但是我們在做響應式的時候由于是百分比布局,無法計算一行會顯示多少個文字,所以這并不是一個好的解決方案,我們使用css3就可以輕松的實現,而且簡單好用。
核心css語句:
1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)
2、white-space: nowrap; (設置文字在一行顯示不能換行)
3、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)
我們具體的代碼效果演示就如下圖所示:(設置ul寬度為300,超出的文字內容讓其自動隱藏并顯示...)
我們在編寫網頁代碼時,有時候新聞列表頁中新聞簡介可能有一行或者多行,我們要如何處理這種問題,讓其超出多行后還能顯示省略號呢,不要慌,我們css還是很強大的,已經給我們提供了方法來處理這種問題了。
核心css語句:
1、-webkit-line-clamp:2; (用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 為了實現該效果,它需要組合其他的WebKit屬性)
2、display: -webkit-box; (和1結合使用,將對象作為彈性伸縮盒子模型顯示 )
3、-webkit-box-orient:vertical;( 和1結合使用 ,設置或檢索伸縮盒對象的子元素的排列方式 。)
4、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)
5、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)
我們具體的代碼效果演示就如下圖所示:(設置段落p寬度為300,超出2行的文字內容讓其自動隱藏并顯示...)
好了,本篇文章就給大家說到這里,大家自己下來可以自己找例子寫一下試一試到底能不能實現我們所說的效果,以后在寫頁面的的遇到這種問題的時候直接復制使用即可。
每日金句:必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。