一些简单的css和js知识

这几天主要做的是前端网页的调整和页面UI的优化方面的内容.这中间主要是学习了一些基本的HTML和css样式的基本元素的属性.设置行高的line-heght属性,设置窗口的浮动用position属性,设置字体字号的属性使用font-size和font-family属性. 这中间遇到了一个较大的问题就是原先使用的左侧悬浮菜单不能随着屏幕的缩小而隐藏,导致商品页面经常被遮挡,严重影响用户体验.原先的css样式代码如下: .top-left{ width:104px; top:8%; left:10%;…

css与JS知识整理

CSS知识 CSS选择器:基础中的核心,选择器指明了{}中“样式”作用的对象,也就是“样式”作用于网页中的哪些元素. CSS选择器类型:一共三大类. 基础选择器属性选择器组合选择器其中以基础选择器中的class和id选择器最重要. 还有个CSS伪类是用来添加一些选择器的特殊效果. 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {prope…

Django中简单添加HTML、css、js等文件(非正规添加，适合小白)

Django中简单添加HTML.css.js等文件首先申明下自己的环境, python版本3.65(亲测3.7版本有毒,没解决掉!) Django版本1.11.15(版本比较成熟,也可以用最新的版本) 创建默认Django项目后添加Html 在urls.py文件中添加如图代码,照抄也可以哦!但都的和我的一样. 接着添加HTML文件到templates 到这里你就可以打开看下效果了! 我擦,别慌,没加路由地址,给地址后面输入/index/再来看下: 添加css和js等静态资源首先在setti…

html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%AD%E5%9B%BE/html/demo.html html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图…

HTML，CSS，JS之间的关系

HTML,CSS,JS之间的关系本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化.后面会附上各种链接地址,尊重原创最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript).一.HTML.CSS.JavaScript简介及简单分工1.什么是HTML(超文本标记语言 Hyper Text Markup Language),HTML 是用来描述网页的一种语言.2.CSS(层叠样式表 Cascading Style Sheet…

JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript 是如何工作的:深入V8引擎&编写优化代码的5个技巧! JavaScript 是如何工作的:内存管理+…

关于jquery的css的一些知识

Query实例CSS 样式表动态选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似 $("li").css("cursor","pointer"); 这样的方式来确定具体的大家就看代码吧 css样式表一 body{background:#000;color:#fff}h1{font-size:14px;color:#fff;font-weight:bold;}p{font-size:12px;color:#fff…

CSS vs. JS Animation: 哪个更快

CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的. jQuery 让我们先从这个事实开始:JavaScript和jQuery被…

总结Vue第一天：简单介绍、基本常用知识、辅助函数

总结Vue第一天:简单介绍.基本常用知识.辅助函数中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的优质博文一.简单介绍: (1)vue.js :本质就是一个js 核心类库[跟咱使用的其他组件插件而安装他们]: ■ 安装方式: CDN引入[也是通过js标签的src] 下载引入 [也是通过js标签的src] NPM安装管理 ■ 方式一:直接CDN引入 □ 你可以选择引入开发环境版本还是生产环境版本…

JQuery 加载 CSS、JS 文件

JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = filename; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(lin…

来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)

2016.10.29更新本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点就是感觉没必要,还有一点就是难控制.为什么这么说呢?作为刚入门的人来说,第一写的代码就少,平时也不会感觉到代码有什么问题,等开发多了,虽然感觉到问题了,但是你还是很难去按照面向对象的思维去写,因为按照面向对象去思维写需要你把握全局观,更是面向未来编程,把握不好,越写越乱.所以很多新手一直都还是按照面…

如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this.needAnimat && typeof this.animateHideAction == 'function' && this.status != 'hide') { this.animateHideAction.call(this, this.$el); } else…

关于更新发布CSS和JS文件的缓存问题

现如今,浏览器大战下,各个浏览器也是拼了命的提高性能,升级JS解析引擎,更好的处理浏览器的页面缓存,让用户的浏览体验更快,占用更小的PC资源.那么,问题就出现在JS和CSS缓存,甚至页面缓存上.至于浏览器对页面的缓存,我们一般通过在服务端发送页面的时候设置页面的生存期,一般几个小时就能缓解很大的服务器压力,并且,对浏览者来讲,本地页面晚更新几个小时可能问题也不大.但,问题是,如果页面发生了更新,但是该页面链接的JS和CSS文件却被浏览器缓存下来,只有待浏览器重启后才能被删除,甚至有些浏览器重启后…

HTML、CSS、JS对unicode字符的不同处理

unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法首先来一段很常见的bootstrap的字体图标代码: .glyphicon-home:before { content: "\e021"; } 上面代码中的e021就是这个字符的unicode码,是16进制. 语法: '\ + 16进制的unicode编码' 如:'\5b89'表示汉字"安": <div class=&…

关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直…

HTML、CSS、JS在前端开发中都扮演怎样的角色

前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Markup Language),不是一种编程语言,而是一种标记语言. 定义了文档的内容,决定了要显示网页中的各个组成部分.(HTML文档中的每个成分都是一个节点——dom节点) 相当于“名词”. CSS:层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素.(宽度.…

配置grunt进行css、js的检查、合并和压缩

现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档可以参考.但是只看文档是不是觉得很蛋疼呢?一个字:看不太懂啊! 好了,废话不多说,直接发安装步骤和注意事项,都是心酸研究出来的啊... 这里介绍mac的安装方法.windows方法相类似,等我稍微研究一下后再发上来首先,要安装nodejs,grunt是依赖node滴.上 www.nodejs.or…

PNotify – 简单易用的 JS 通知，消息提示插件

PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击通知后面的元素. PNotify 支持使用 Bootstrap 或者 jQuery UI 的界面,这意味着它能够很容易更换主题.可以在插件官方页面的右上角尝试使用一些现成的主题.它可以在所有主流浏览器中使用,并提供了一致性的界面. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播…

yii2 如何在页面底部加载css和js

作者:白狼出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都…

项目中如果管理前端文件CSS和JS

如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iButton.less.iCss3.less.iIcon.less.iTab.less.iMenu.less.iDialog.less.iForm.less.iDatagrid.less等等文件.以上文件都是最小模块文件.把上面的文件按实际需要合并成一个iBase.less文件.如:打算将iReset.…

解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径.这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量…

用JavaScript动态加载CSS和JS文件

本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen…