从上一个篇章的内容中已经完成了使用TCP协议返回HTTP的请求,达到一个返回数据到访问浏览器的效果。
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。
// 单行注释 CTRL+/ 不会跑到css中 /* 多行注释 Alt+shift+a 会跑到css中*/
上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能。那么接着上一篇,我们再来谈谈CSS代码的一些标准实践。 1,命名 和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义;命名的词用连字符连接。 不规范的命名: #navigation{ } .demoimage{
适用于vuecli3 // 给路径起别名 module.exports={ configureWebpack:{ resolve:{ alias:{ 格式按照这个写,@代表src,@/asstes == src/asstes ‘assets’:’@/asstes’, ‘components’:’@/components’, ‘network’:’@/network’, } } } } 如果要在app.vue中引用asstes里面的css样式的话可以这样做 #App.vue <style> @import
本练习训练了孩子们的栅格化布局,H5标签,CSS样式,并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局,为后面的框架教学打好基础。
最终的效果如下图所示,下面小编一一为大家解析每个部分如何实现,并附上最终的实现代码。
这里要注意的是要把now重命名为current_date,因为模板需要的是这个变量名。
本文记录在 vue cli 2 中封装 tabbar 组件详细步骤,主要是为了感受 vue 的组件封装思想,也是前面学习 vue 基础的练习案例
首先需要引入fs模块 const fs = require('fs'); 1.fs.stat 检测是文件还是目录 fs.stat('./package.json', (err, data) => { if (err) { console.log(err); return; } console.log(`文件:${data.isFile()}`) console.log(`目录:${data.isDirectory()}`) }) 2.fs.mk
网页框架结构布局,TOP部分占满网页宽度,内容的左右各有8.33%的留白
是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。
Less 是一门 CSS 预处理语言,作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充,Less 可以运行在 Node、浏览器和 Rhino 平台上
在v1.0版本中实现了"页面点击按钮,生成对应测试数据"的功能,但是在操作页面只有一个按钮,没有提供任何参数(即没有涉及到参数在前后端传递,只是单纯的触发请求);
上次搭建的django环境,这次来真正的实战开发,项目是比较老的图书管理系统,对于django来说只是一个Hello,world的项目,django的世界比你想象的还要大。
把cms_resetpwd.html中下面的样式放到base.css里面去,这样cms_resetemail和cms_resetpwd都可以用
如项目代码目录展示的那样,除了常见的app.js作为入口文件,我们将用到的 3 张图片放在/src/assets/img/目录下,并在样式文件base.css中引用这些图片。
# 图书管理系统项目 ps开始就遇到了语法错误,找了我10多分钟,最后发现是urls中.用了:导致的错误,太粗心了呀。。。 1.首先我在pycharm中dj目录下新建了一个项目,名字为day06, 然后在里面又添加了book_manage,front,这两个app,然后新建了静态样式目录static,还有模板文件夹templates,然后分别在新建的app中创建了urls.py,用于url的映射 2.接着在setting中设置了数据库信息->databases,并添加了base.css样式文件,放在了static文件中,在setting最末行添加了,STATICFLIES_DIRS=[os.path.join(BASE_URL,’static’)] 用于静态文件确定静态文件能够被模板正确的调用,在DIRS中设置了模板文件夹为创建好的templates, 3.准备工作好了之后就开始上手啦,首先分别以两个app的名字定义了app_name,然后在主urls中添加了url路由,我用的include导入的(比较节省时间,不用写的太麻烦), 下面是app中的urls: from django.urls import path app_name=’book_manage’ from . import views urlpatterns=[ path(”,views.index,name=’index’), path(‘add_book/’,views.add_book,name=’add_book’), path(‘book_detall/<int:book_id>/’,views.book_detall,name=’book_detall’), path(‘delete_book/’,views.delete_book,name=’delete_book’), ]
前面我们利用宏将首页代码进行了第一次优化。如果我们现在还有其他页面,试想一下,首页上面的搜索框
最近上课要用到Django,对我们啥都学。。。 本着啥都不会,逼格要够的原则,我先把他自带后台界面稍微改一下。。。 Django admin界面修改 1.先找到admin的页面文件 就是在安装目
标签具有默认样式,由浏览器所决定的,为了达到在各个主流内核的浏览器页面样式显示一致,会重置具有默认样式的标签,得到样式表,就是 reset.css / base.css
写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
📷 Base.css * { margin: 0px; padding: 0px; box-sizing: border-box; } ul { list-style: none; } .col-1 { width: 8.33%; float: left; } .col-2 { width: 16.66%; float: left; } .col-3 { width: 25%;
直接对盒子设置margin-left:auto; margin-right:auto ,如果要设置垂直居中,发现这种方法无效,无法通过设置margin:auto让垂直也居中
<base href="/bulid/"/> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
很久之前用tkinter写过一些GUI工具,比如调百度翻译接口的翻译器、爬虫音乐、图片等等的一些小工具等
aa
var s = gulp.src(["fileA","fileB","fileC"])
Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。
浏览器在发送请求的时候,会自动带上当前域名对应的cookie内容,发送给服务端,不管这个请求是来源A网站还是其它网站,只要请求的是A网站的链接,就会带上A网站的cookie。浏览器的同源策略并不能阻止CSRF攻击,因为浏览器不会停止js发送请求到服务端,只是在必要的时候拦截了响应的内容。或者说浏览器收到响应之前它不知道该不该拒绝。
改了好几天,翻遍了 Hugo Jekyll Hexo 的模板仓库,又翻完了 Typecho 的主题站。 感觉没啥好看的又开始翻友链,翻了得有个两三天,最后缝合了一个单栏模板。
JSX是JavaScript XML的简写,表示了在Javascript代码中写XML(HTML)格式的代码
mutations 通过创建store中的mutations字段 定义方法,方法第一个参数就是 state 然后调用方法修改 调用 this.$store.commit('方法名') 定义函数 import Vue from 'vue' // 导入vuex import Vuex from 'vuex' // 通过vue安装vuex Vue.use(Vuex) /** * 创建store * @type {Store<{counter: number}>} */ const store = new
HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式,使得浏览器可以正确地解析和显示网页内容。
浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境
想到哪说哪,, 前端架构当然首推MVC,在我这个项目里, (一)、view层,就是html、css、一些直接控制DOM的JS; --login.html,base.css,login.css, --这些个文件都算是v层的 //-------------- (二)、mode层, 1,可以直接访问数据:ajax get json 2,对数据进行处理:for dada 3,提供一些方法给C、V调用 -- common.js,里面进一步封装了对$
less 官网http://lesscss.org/ less.png npm install -g less # 查看版本 lessc -v 编写less文件 声明字符集 @charset "UT
17.首页导航条实现和代码抽离 (1)temlates/common/_head.html <meta name="csrf-token" content="{{ csrf_token() }}"> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="st
安装 npm install vuex --save 使用 在目录中新建文件夹store,在里面新建index.js import Vue from 'vue' // 导入vuex import Vu
Gradle 提供了打包 war 包的插件,可以将 Web 应用部署到本地 Servlet 容器中。
任何代码编程都有各自特点的常用命名规范,div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展,也有利于让别人读懂你的css代码,让你的页面显得清晰有条理。
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
我们一般在做前端设计网站框架的时候,DIV或者CSS标签名称有没有一个固定的标准?有些朋友是想到哪里写到哪里,有些朋友有自己的规范命名特征,也有些朋友是遵循标准的。因为在团队协作的时候,有规范的标准是很重要的,便于协作和阅读。今天老蒋突然想到这个问题,主要在于在修改页面的时候,看到有客户的CSS标签名称太过于随意。
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,笔者结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议
领取专属 10元无门槛券
手把手带您无忧上云