-
2020-08-26 00:42:30
经过前端页面的优化, 请教别人和别人的建议总结出来的两句话, 希望可以有所帮助
对于没有设计天赋的朋友, 不妨可以思考一下下面三句话.
- 设计这东西一定要找素材. 自己凭空想出来的, 90%做出来不好看
- 背景不要用深色,整个页面最多的不应该是颜色, 黑白灰为主, 颜色点缀
- 参考别人是怎么设计的, 不一定要按钮的形式, 有传数据的功能就行,
可以参考一下XX的那些前端
这三句话, 其中第一句话告诉你别自己瞎想怎么改了, 包括排版和样式, 自己对当前的东西没有一个整个页面的设计,只是对现有的东西去改变位置大小颜色 其实 变化都不大, 可能会规矩一些, 但不会变美…对自己不是专门搞设计的要有一个清晰的认识 😦
然后就是第三句话, 最后的XX说的是去参考你现在正在设计的相关网站的前端页面是怎么设计的, 不要大海捞针似的无意义浏览大量网站模板. 和你现在做的都不相关, 当然不知道该如何去借鉴啦. 比如你再设计输入框, 输入后点击查询后显示查询结果, 这个肯定要去有输入框的网站看看别人的输入框是如何设计的, 比如翻译网站, 这些不都有输入框和查询的东西嘛, 就可以参考一下.
然后就是第二句, 大概观察一下国内比较出名的网站 掘金, 知乎或者CSDN, 都可以看出背景不会用深色或其他颜色, 大多都是黑白灰这些, 然后其他颜色点缀, 确实是这样的, 看上去也比较高级, 这可能就启发一个配色的问题吧. 关于配色也是很讲究的, 什么底色配什么色的按钮.
关于配色提供几个网站可以参考一下
- uiGridients - Beautiful Colored (推荐)
- CodePen - 参考一下网站里的设计
- 网页设计中怎么配色?
- 配色表
理解了上面三句话, 相信你可以参考其他现有的相关设计就能知道自己要设计成什么样子了, 设计要再来一个精美大方高端的配色, 那就很棒了~ 加油
最后呢, 也非常感谢在我走投无路愿意帮助我的人, 谢谢你们更多相关内容 -
一些常用的完整前端网页模板
2018-12-20 18:54:21超过10个常用的网页模板,每个模板都是完整的,点击index.html即可运行,编写代码简洁,非常方便自己进行修改再使用,觉得OK的朋友点个赞哦~! -
前端页面基本模板
2019-11-01 10:08:28web页面的 模板,后台系统搭建基本页面 -
商城 前端 html 页面 模板
2020-04-04 19:25:54商城 前端 html 可以直接用于开发,后台开发的福音。 -
HTML前端个人博客模板
2022-01-26 00:07:59视频地址:http://r5mmmjhat.hn-bkt.clouddn.com/demo-address/个人博客HTML模板视频.mp4 ...页面和CSS样式和JS我都统一整理好了,导航栏、页脚等都是通过公共引入的,让页面更加简洁和更好的整理 -
admin前端模板
2017-11-28 16:29:262017年,国外网站20美元购买的后端模板,扁平话设计,样式美观。包含angular模板,纯静态页面,psd源文件,laravel5模板,aspnet模板,rails模板,,非常详尽的使用说明(老外的东西就是做的到位)使用非常方便 -
一套白色系,mac风格的前端模板框架
2020-05-22 11:23:40一套白色系,mac风格的前端模板框架,支持页面标签切换,适用于常见管理后台前端页面开发。ui元素标比较丰富,可以满足常见页面应用。 -
绿色宽屏机械设备网站模板是一款宽屏绿色样式风格的机械设备类静态网页全套模板。.zip
2022-02-19 05:26:36绿色宽屏机械设备网站模板是一款宽屏绿色样式风格的机械设备类静态网页全套模板。.zip绿色宽屏机械设备网站模板是一款宽屏绿色样式风格的机械设备类静态网页全套模板。.zip -
project-template:前端项目模板前端快速开发模版
2021-02-03 19:18:55前端快速开发模版 工具链 建立工具 编译打包工具browserify 代码编译babel CSS兼容自动前缀 css预编译less ...前端代码版本更新 公共类库 ...自己开发的简洁单页面框架app....模板:html页面 使用 npm install npm run build -
24小时客户支持网站前端模板b5c.zip
2018-08-27 15:16:1924小时客户支持网站前端模板b5c.zip漂亮的前端后台静态代码,适合选用二次开发,bootstrap结构,自适应手机电脑,非常棒的代码。 -
前端后台界面模板
2017-03-17 11:01:27后台静态页面模板 -
清爽黑白色搭配网站模板是一款简洁白色风格样式的CSS网页模板下载。.zip
2022-02-22 16:51:36清爽黑白色搭配网站模板是一款简洁白色风格样式的CSS网页模板下载。.zip清爽黑白色搭配网站模板是一款简洁白色风格样式的CSS网页模板下载。.zip -
后台系统前端模板
2022-05-19 00:17:30后台系统前端模板——WeAdmin Layui作为后台开发的前端框架,一直以来深受后端开发人员的喜爱。今天这篇文章展示WeAdmin设计巧妙之处,如果需要自定义菜单结构、理解其中的代码和运作原理,这里会给大家演示其修改...后台系统前端模板——WeAdmin
Layui作为后台开发的前端框架,一直以来深受后端开发人员的喜爱。今天这篇文章展示WeAdmin设计巧妙之处,如果需要自定义菜单结构、理解其中的代码和运作原理,这里会给大家演示其修改过程!
下面我给大家截图这个系统的一些具体界面
权限管理
数据分析(饼状图)
编辑功能
删除功能(弹出确认框)
更多的体验,可以下载对应源码然后运行即可
> 下面是自定义菜单结构名称的过程
方法1:
-
进入fastmock官网并注册账号,https://www.fastmock.site/
2. 创建接口根地址,并添加接口
将项目源码中的json/menu.json文件里的内容复制进接口内容中
3. 复制接口地址,按步骤修改项目中http.js文件(如图所示)
3.1 复制接口的完整地址
3.2 修改http.js文件,将接口地址填入url键中,并修改menuList变量值
方法二(给予思路):
通过源码我们可以发现,每次用户打开后台系统主页,都会通过http.js文件发送ajax请求,然后这个请求收到一个带有json格式的数据返回,根据这个思路,我们可以提前编写好菜单结构的json文件,后端通过读取这个json文件,返回其json数据格式的字符串给前端。
> 源码获取方式
关注公众号,回复"后台模板"即可
> 总结
好了,希望这篇文章对你寻找后台前端模板起到作用,建议多去看里面的源码的运行原理,当我们掌握了一套比较好的前端模板的核心技术,将提供我们后端开发的效率!
如果喜欢,可以点赞 + 收藏 + 关注
-
-
vue开发:前端项目模板
2021-09-01 09:32:20项目模板下载地址 创建项目 Java+前端项目合集 使用vue-cli创建项目,功能选择:Babel、Router、vuex、Linter/Formatter、使用配置文件(文章转载自乐字节) 插件选择vue-cli-plugin-element 安装运行依赖...简介
- vue-cli创建vue项目,整合vuex、vue-router、axios、element-ui
- 项目模板下载地址
创建项目
Java+前端项目合集
- 使用vue-cli创建项目,功能选择:Babel、Router、vuex、Linter/Formatter、使用配置文件(文章转载自乐字节)
- 插件选择vue-cli-plugin-element
- 安装运行依赖axios
- 使用命令安装开发依赖:less、less-loader
npm install less npm install less-loader@5.0.0
预期效果
- 访问根路径时重定向到欢迎页面
- **点击侧边栏子节点时,路由自动发生改变,且跳转到不同的子组件
**
- 点击【书籍信息】,跳转到bookList.vue,向后端服务器发送axios请求,获取数据,遍历到页面
初始化项目
- 查看package.json中dependencies表示安装的运行依赖,devDependencies表示安装的开发依赖
- plugins文件夹下的element.js表示element-ui插件配置成
- 删除router文件夹中index.js中默认生成的代码,同时删除views文件夹及子组件
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ ] const router = new VueRouter({ routes }) export default router
- store文件夹表示vuex配置成功,用于共享数据
- 删除根组件App.vue中默认生成的代码,同时删除components文件夹中的子组件
<template> <div id="app"> app根组件 </div> </template> <script> export default { name: 'app' } </script> <style> </style>
- 编写全局样式global.css,在main.js中导入
- 最后在终端中输入命令,启动项目,浏览器访问该项目,查看是否报错,
element-ui
- element-ui使用步骤参考
- 使用element-ui布局
// 在当前项目element.js中已将所有element-ui组件全部引入了,直接使用即可 import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)
- 容器布局
<!-- 默认展开的子节点 --> <el-menu :default-openeds="['1', '3']"> <!-- 默认选中的子节点 --> <el-menu :default-active="['1-1']"> <!-- 图标 --> <i class="el-icon-coin"></i> <!-- 一级菜单--> index="4" <!-- 二级菜单 --> index="5-1" <!-- 三级菜单 --> <el-menu-item index="4-1-2"> <!-- 默认选中颜色 --> <el-menu active-text-color="#409EFF" <!-- 默认只展开一个子节点 --> <el-menu unique-opened>
Router
-
路由使用步骤:1.构建项目时已经打开了router功能;2.新建子组件;3.router/index.js中配置路由规则;4.路由出口;5.main.js中router作为vue实例的属性
-
编写欢迎页面
- 访问根路径时,显示欢迎页面
- 新建一个welcome.vue
- router/index.js中引入子组件welcome.vue,配置路由规则
-
侧边栏开启路由
<!-- 1. App.vue中开启侧边栏路由 --> <el-menu router> <!-- 2. 子节点中设置path --> <el-menu-item :index="'/userList'"> <!-- 3. 新建子组件,如userList.vue等,并在router中配置路由规则 -->
axios
- axios使用:main.js中引入axios,默认配置,注册为vue实例的属性
- 新建一个bookList.vue组件,发送axios请求,将返回的数据遍历到页面
<script> export default { data() { return { books: [] } }, created(){ // 将vue对象赋值给_this const _this = this; _this.$http.get("book/findAll/3/4").then(function(response){ // then方法中的this表示response console.log(response.data.content) _this.books = response.data.content; }); } } </script>
vuex
- 使用步骤
// 1. 构建项目时已经打开了vuex功能 // store/index.js import Vuex from 'vuex' // 2. 引入 Vue.use(Vuex) // 3. 注册为vue实例的组件 export default new Vuex.Store({ state: { count: 0 // 4. store中皴法共享数据 }, mutations: { }, actions: { }, modules: { } }) // 入口文件main.js import store from './store' new Vue({ store, // 5. 将store挂载到vue实例 render: h => h(App) }).$mount('#app') // 在bookList.vue中使用 <span>vuex使用:{{ $store.state.count }}</span>
(文章转载自乐字节)
-
12大数据可视化前端模板 大屏模板 数据可视化 .zip
2020-03-24 21:41:44大数据可视化前端模板 大屏模板 数据可视化 -
htmlStudy:这个仓库主要用于...代码主要是根据自己目前收集的网络资源来编写的,练习写一下网页前端页面样式
2021-03-23 07:49:38这个仓库主要用于编写网页,一些特效等,还有一些网站模板等。代码主要是根据自己现有收集的网络资源来编写的,练习写一下网页前端页面样式。 然后成果可以通过连接形式访问。会写在下面,然后会有一篇博客整理。 -
代驾-我的-会员中心-VUE模板 UNIAPP模板 布局、样式、JS分离
2020-04-22 09:00:57代驾 我的 会员中心 人工智能吴经理 请绑定手机号 全部订单 进行中 钱包 司机入口 领券中心 联系客服 消息提醒 ...代驾我的-VUE模板-UNIAPP模板 ...VUE模板 UNIAPP模板 布局、样式、JS分离 -
AKjs手机移动端前端ui框架模板 v1.2.5
2019-10-27 22:54:24AKjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和安卓系统的兼容性很完美。支持前后端分离开发和路由模式跳页方式。它与其他重量级框架不同的... -
JSP中模板的套用、前段代码插件的添加(附网页模板网站)
2019-04-20 12:12:58模板套用 1、在项目中创建模版对应的jsp文件, 将jsp文件中的basepath代码移动到其他位置 2、将模版中1的前端资源文件复制到webRoot下。 3、将模版中的HTML代码整个复制到对应的jsp中 4、将basepath在...模板套用
1、在项目中创建模版对应的jsp文件, 将jsp文件中的basepath代码移动到其他位置
2、将模版中1的前端资源文件复制到webRoot下。
3、将模版中的HTML代码整个复制到对应的jsp中
4、将basepath在移动到head标签中
前端代码插件的添加
因为my eclipse不是专业的前端编辑工具,如HBuilder、WebStorm等,所以想实现辅助输入功能,需要响应的插件(jar包)
1、插件在资料2中,将查询包放到myEclipse的安装目录中的dropins文件中,然后重启myEclipse即可。
2、安装后快捷键为:ctrl+E
持续更新本人已知的前端模板网站
网站之家:http://www.mycodes.net/153/
jq22插件库:http://www.jq22.com/
17素材网:http://www.17sucai.com/category/2/47 ↩︎练习用jsp模板和插件已上传至本人百度云,先分享给大家~
链接:https://pan.baidu.com/s/1A2MPvP7O2YNtOFib8cGSFA
提取码:88vr
复制这段内容后打开百度网盘手机App,操作更方便哦 ↩︎
-
产品介绍FAQ网页模板
2021-01-21 05:53:24产品介绍FAQ网页模板 -
前端常用样式设置
2021-09-30 11:30:51富文本页面样式 .box{ display: flow-root; /deep/ * { max-width: 100%!important; height: auto!important; } } 单行省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break... -
100套响应式前端纯静态网页模板.7z
2020-05-07 15:47:04100套响应式静态模板可供选择. -
整理一些前端模版比较好的网站
2019-04-04 11:21:37作为一个开发人员,对前端技术的掌握只能说的三流以上二流开外。但是公司对内部的后台界面不重视,所以就只能是我自己写。但是我是一个样式都要扣很久,还得去百度的人。一些现成后台管理模板就显得很救命了!!! ... -
template:基本前端模板
2021-06-18 19:48:04基本前端模板 文件夹结构: includes - 经常重复的 html 代码部分(页眉、页脚等); static - 静态内容: css - 样式文件(template.css、blocks.css、ie.css、js 插件样式等); fonts - 包含字体的文件(.ttf... -
一种前端页面模板复用的方法与流程
2021-06-11 10:21:04本发明涉及前端技术领域,特别涉及一种前端页面模板复用的方法。背景技术:前端即网站前台部分,运行在pc端,移动端等浏览器上展现给用户浏览的网页。前端技术指通过浏览器到用户端计算机的统称,存贮于服务器端的... -
前端开发技巧-快速编写页面样式
2021-09-24 10:43:59目录 首先,在写html、wxml时,带上样式类名 然后,利用vscode插件...就像这样,在构建html的时候就同时把样式类名写好,静态页面编写的时候,可以随便写一些填充内容来占位 例如:想要下面这样的效果,就先搭建静 -
Web前端——CSS基础样式
2020-10-05 10:03:15样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上 2. 范围 继承是发生在祖先元素和后代元素之间 3. 优点 继承的设计是为了方便开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上... -
宽屏大气蓝色企业网站模板
2021-06-01 22:30:37宽屏大气蓝色企业网站模板里面包含6个子页面,适合企业公司官网模板,需要的朋友可以免费下载使用。 -
Web前端:博客美化:一、模板美化
2021-02-28 13:18:471、选用模板simplememory 2、写css放在 这些会覆盖掉原来的css样式我是在网上找的css代码二次加工的 : )/*1、针对simplememory的修改*/#google_ad_c1, #google_ad_c2 {display:none;}.syntaxhighlighter a, .... -
45个免费的HTML5和CSS3模板
2021-06-13 03:13:131. Interio2. Art School Template3. Folder4. Template for Business Project5. Nova6. CSS3 Seascape Two7. Kroft8. Thom Sander9. Scenic Photo10. Hatha Yoga11. Connoisseur12. Point13. Vivid Photo14....