国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 可視化網(wǎng)站教程：最流行的搭建工具及必學(xué)的7個功能

可視化網(wǎng)站教程：最流行的搭建工具及必學(xué)的7個功能

時間：2023-09-17 08:54:01 | 來源：網(wǎng)站運營

時間：2023-09-17 08:54:01 來源：網(wǎng)站運營

可視化網(wǎng)站教程：最流行的搭建工具及必學(xué)的7個功能：

摘 要

記得剛進大學(xué)的時候，一位教授說大學(xué)里有十件必學(xué)的事情，其中有一件是：學(xué)會做網(wǎng)站。無論你是學(xué)什么的，像數(shù)據(jù)可視化，演示簡歷、作品或產(chǎn)品，都需要前端的知識。雖然目前有各種前端語言，像Vue, React, Angular等等，樣式也是有sass, scss, less等等，但是瀏覽器的工作原理以及基礎(chǔ)決定了我們還是要學(xué)好HTML+CSS+Javascript，才能更好地使用前端工具。

一、建站工具

前端低代碼的發(fā)展為我們提供了很多好用的建站工具，Ofter為大家推薦幾個免費的最佳實踐。

序工具編程要求適用類型參考示例備注
1wordpress無網(wǎng)站/博客https://demo.styledthemes.com/styledstore/免費，安裝插件，拖拽即可，可付費插件
2docsify低文檔教程https://docsify.js.org/#/zh-cn/免費，好多Github上文檔教程都用這個
3dumi中網(wǎng)站/博客/教程https://d.umijs.org/zh-CN免費，umi制作成的Demo
4umi - ant design landing中網(wǎng)站/博客（首頁）https://motion.ant.design/index-cn免費，主要面向網(wǎng)站首頁
5gatsby相對高網(wǎng)站/博客/教程https://brittanychiang.com/免費，定制程度相對高
注：wordpress雖然不需要編程基礎(chǔ)，但是使用過程有很多限制，不能100%按照自己的想法定制，插件太多也會影響性能。

二、前端開發(fā)工具

前端的開發(fā)軟件還挺多，大家可以按照個人喜好，這里就列幾個常用的：

三、功能列表

今天，Ofter以常用的功能為例，來教大家做一個完整的網(wǎng)站。如果是0基礎(chǔ)的，可以先了解下div+css+flex布局，參看：學(xué)會用HTML-flex布局，制作漂亮的網(wǎng)頁

1. 網(wǎng)頁模板（導(dǎo)航欄、廣告欄、底部）

首先，我們可以去素材網(wǎng)站下載一個自己喜歡的模板（可以自行搜索模板，Ofter提供一個平臺供參考 https://sc.chinaz.com/moban/）。我們主要挑選下導(dǎo)航欄、橫幅廣告欄和底部是否滿足要求，其他部分基本上需要刪掉重寫。Ofter以下圖這個為例：

在開發(fā)工具中，結(jié)構(gòu)如下圖：

2. 輪播圖（Swiper組件）

輪播圖的實現(xiàn)需要寫Javascript，大家也不要覺得難，Ofter為大家推薦一個JS組件Swiper。

鏈接：https://www.swiper.com.cn/usage/index.html

按照使用方法，一步步操作就可以實現(xiàn)，Ofter也貼上代碼供參考（test.htm）。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href="static/css/swiper.min.css"> <link rel="stylesheet" href="static/css/timePicker.css"> <!-- template styles --> <link rel="stylesheet" href="static/css/izeetak.css"></head><body><div class="page-wrapper"> <!--Main Slider Start--> <section class="main-slider"> <div class="swiper-container thm-swiper__slider" data-swiper-options='{"slidesPerView": 1, "loop": true, "effect": "fade", "pagination": { "el": "#main-slider-pagination", "type": "bullets", "clickable": true }, "autoplay": { "delay": 5000 }}'> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of1.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免費 - 高效</h2> <p>Ofter是一個免費學(xué)習(xí)數(shù)據(jù)科學(xué)的平臺</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of2.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免費 - 高效</h2> <p>Ofter是一個免費學(xué)習(xí)數(shù)據(jù)科學(xué)的平臺</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of3.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免費 - 高效</h2> <p>Ofter是一個免費學(xué)習(xí)數(shù)據(jù)科學(xué)的平臺</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> </div> <!-- If we need navigation buttons --> <!-- 如果需要分頁器 --> <div class="swiper-pagination" id="main-slider-pagination"></div> </div> </section> <!--Main Slider End--></div><!-- /.page-wrapper --><script src="static/js/swiper-bundle.min.js"></script><!-- template js --><script> var mySwiper = new Swiper('.thm-swiper__slider', { loop: true, // 循環(huán)模式選項 pagination: { el: "#main-slider-pagination", type: "bullets", clickable: true }, autoplay: { delay: 5000 }, // 如果需要前進后退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滾動條 scrollbar: { el: '.swiper-scrollbar', }, })</script></body></html>

3. 懸浮定位

當某個網(wǎng)頁內(nèi)容比較多，做一個內(nèi)部導(dǎo)航會提升用戶的體驗。

//導(dǎo)航代碼<a href="#get"><span>? Get</span></a>//內(nèi)容代碼<a name="get">Get to Know About us</a>

4. 回到頂部

回到頂部的功能一定是必須的，這里就說下怎么寫Javascript。Javascript與HTML內(nèi)容的綁定，可以通過id或class，js中用getElementById或getElementByclassName（vue/react/angular中也如此）。

<a href="#" id="myBtn" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a><script type="text/javascript"> window.onscroll = function () { scrollFunction() }; function scrollFunction() { console.log(121); if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } }</script>

5. 視頻

<video width="800" controls> <source src="static/picture/bg-video.mp4" type="video/mp4"></video>

6. 文件在線閱讀和下載

//文件在線閱讀<a href="static/picture/python工程師技能圖譜.pdf" target="_blank"> <img src="static/picture/python1.jpg" width="300" height="400" alt="python"/></a>//文件下載<a href="static/picture/python工程師技能圖譜.pdf" download="static/picture/python工程師技能圖譜.pdf"> <img class="file_text_icon" src="static/picture/download.png" alt="下載icon"> <p class="file_text_font"> Python工程師 </p></a>

7. 終端兼容

網(wǎng)站在各瀏覽器，PC/Mobile端的兼容性也很重要，否則，用戶打開網(wǎng)站時就會出現(xiàn)看不到內(nèi)容，或布局錯亂的界面。我們可以用@media監(jiān)控瀏覽器的尺寸，實時更新css樣式。

@media (max-width: 991px) { .sidebar { margin-top: 50px; }}

四、代碼資源

若需要源代碼，請查看下方（或評論處）方法免費獲取。

關(guān)鍵詞：工具,功能,教程,流行

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉