前话

Hello，小伙伴们大家新年好，本篇是今年第一篇，也筹划许久，本篇主题为美食，系html5网站模板，div加css布局，网页资源分开存储以便管理，网页结构清晰简单，希望本篇能够助力各位萌新

主题

《周末の食记》

美食能抚平一切的忧伤

简介

文件结构包含了css、fonts、images、js和html，运用html5技术，包括nav标签、header标签和footer标签等，采用bootstrap进行布局

图摘

目录

编码

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">扬州炒饭</h3>
        <p class="mb-5">一碗不一样的炒饭，让你难以拒绝.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">蓝莓酸奶冰激凌</h3>
        <p class="mb-5">触动您的心灵，令人甜蜜至极，难以忘怀，心旷神怡的味觉享受，精选一级的夏威夷果仁，入口丝滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

结语

如果人的一生总的能量是固定的话，那就节省开支，延长时间，喜怒哀乐不溢于言表，不困于心智，保持乐观心态

介绍

一个基于 vue、Echart 框架的大数据可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。

开源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

项目展示

项目使用

1. 如何启动项目需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。
2. 如何请求数据现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。

3. 如何动态渲染图表在components/echart下的文件，比如drawPie()是渲染函数，echartData是需要动态渲染的数据，当外界通过props传入新数据，我们可以使用watch()方法去监听，一旦数据变化就调用this.drawPie()并触发内部的.setOption函数，重新渲染一次图表。

4. 如何复用图表组件因为 Echart 图表是根据id/class去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的任务通过率与任务达标率组件就是采用复用的方式。

5. 如何更换边框边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看 如：

6. 如何更换图表直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。
7. Mixins 注入的问题使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将echarts.init()函数赋值给this.chart，然后 mixins 才会自动帮你注入响应式功能。
8. 屏幕适配问题本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点。

具体使用请移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址参考。

TML模板网站是提供免费或付费网站模板下载的在线平台。这些模板设计精美、功能齐全，可帮助用户快速搭建自己的网站。在这个数字化时代，网站已成为企业、个人展示和推广的重要工具之一。

在过去，搭建一个网站需要具备一定的编程知识和技术能力。但随着HTML模板网站的出现，普通用户也能够通过简单的操作完成网站的搭建。这些模板已经预设了布局、颜色、字体等设计元素，用户只需要根据自己的需求进行修改和添加内容，就能够快速创建出一个专业而独特的网站。

HTML模板网站通常有以下特点：

1. 多样化的模板选择：HTML模板网站提供了各种各样的网站模板，涵盖了各个领域和行业。用户可以根据自己的需求选择适合的模板，如企业官网、个人博客、在线商店等。

2. 设计精美：这些模板经过专业的设计师精心设计，具有美观大方的外观、清晰明了的布局以及合理的信息组织，能够吸引用户的眼球并提供良好的用户体验。

3. 简单易用：HTML模板网站的使用非常简便，只需要用户进行一些基本的设置和修改即可完成网站的搭建。一般来说，网站模板会提供详细的使用说明和教程，帮助用户快速上手。

4. 兼容性强：这些模板通常采用HTML、CSS、JavaScript等标准的前端技术开发，具有良好的兼容性，可以在各种浏览器和设备上正常显示和运行。

5. 可定制性：虽然模板已经预设了一些设计元素，但用户仍然可以根据自己的需求进行修改和定制。通过修改文字、图片、颜色等元素，用户可以使得网站更符合自己的风格和品牌形象。

6. 多种扩展功能：HTML模板网站通常会提供一些额外的功能组件或插件，用户可以根据自己的需求添加到网站中，如图库、社交媒体分享、滑动幻灯片等。

尽管HTML模板网站为用户提供了快速建站的解决方案，但也存在一些挑战和限制。

首先是模板的通用性。由于这些模板需要适应不同行业和领域的需求，因此有些功能可能无法满足特定的要求。此时，用户可能需要自己进行一些编程定制或者寻找专业的开发人员来满足特定的需求。

其次是个性化和差异性。尽管模板提供了一些定制的选项，但仍然有可能在大量网站中找到相似的设计元素。这就需要用户通过自己的努力和创造力，不断地优化网站，使其与众不同。

此外，还需要注意模板的版权问题。虽然我们可以从HTML模板网站中下载并使用这些模板，但有些模板可能有版权保护，或者在模板使用时需要满足特定的使用条件。用户在下载和使用模板时要注意相关的版权规定，避免违反法律法规。

综上所述，HTML模板网站是一个方便快捷的工具，可帮助用户快速建立个性化的网站。但在使用模板的过程中，用户仍然需要不断优化和改进，以确保网站具有独特性和个性化。

因此，对于想要搭建一个个性化、具有专业性的网站的用户来说，HTML模板网站是一个不错的选择。通过选择适合自己需求的模板，并进行适度的定制与优化，用户可以快速搭建一个美观、实用的网站，提高企业形象和个人品牌。