css框架 | 易学教程

CSS实现HTML元素透明的那些事

阅读更多关于 CSS实现HTML元素透明的那些事

CSS3草案中定义了 {opacity:<length> | inherit;} 来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性 filter 来实现的，所以HTML元素的透明效果已经无处不在了。首先看看 A级浏览器所支持的用 CSS实现元素透明的方案：浏览器最低版本方案 Internet Explorer 4.0 filter: alpha(opacity=xx); 5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); 8.0 filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; Firefox (Gecko) 0.9 (1.7) opacity Opera 9.0 opacity Safari (WebKit) 1.2 (125) opacity 实际上在IE8中，-ms-filter是filter的别名，两者区别是 -ms

何时在CSS中使用margin和padding [关闭]

阅读更多关于何时在CSS中使用margin和padding [关闭]

在编写CSS时，是否有一个特定的规则或指南应该用于决定何时使用 margin 以及何时使用 padding ？ #1楼 MARGIN vs PADDING ：边距用于在元素中创建该元素与页面的其他元素之间的距离。其中padding用于创建元素的内容和边框之间的距离。边距不是元素的一部分，其中填充是元素的一部分。请参阅下面从 Margin Vs Padding - CSS Properties中提取的图像 #2楼对于您的问题有更多的技术解释，但如果您正在寻找一种方法来考虑边距和填充，这将有助于您选择何时以及如何使用它们，这可能会有所帮助。将块元素与挂在墙上的图片进行比较：浏览器窗口就像墙一样。内容就像一张照片。边距就像框架图片之间的墙壁空间。填充就像照片周围的垫子一样。边框就像一个框架上的边框。在边距和填充之间进行选择时，当你将一个元素与墙上的其他东西间隔开时，使用边距是一个很好的经验法则，当你调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充通常会使元素变大 1 。 1 可以使用 box-sizing 属性更改此默认框模型。 #3楼边距位于块元素的外侧，而填充位于内部。使用margin将块与其外部的东西分开使用填充将内容移离块的边缘。 #4楼有一点需要注意的是，当自动折叠边距会让你烦恼

前端框架layui之即时通信

阅读更多关于前端框架layui之即时通信

1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"></script> 2.详细介绍依赖layim模块： layui.use('layim', function(layim){ var layim=layui.layim; }) 参考网址： https://www.layui.com/doc/modules/layim.html 来源： https://www.cnblogs.com/zys2019/p/11877016.html

关于BOOTSTRAP的整理和理解

阅读更多关于关于BOOTSTRAP的整理和理解

随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。接下来就是要详解Bootstrap框架：首先，我们要知道为什么使用框架的原理。CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版，网络布局，表单样式，通用规则等代码块。使用CSS框架，可以简化工作，提高工作效率。然后，我们为什么要使用Bootstrap框架，而不使用其他CSS框架？原因大概如下：随着H5，CSS3的快速火起来，用户体验尤为重要，移动设备用户的庞大，不容小视，而恰恰，Bootstrap就是为移动设备而开发的框架。他虽然是以移动设备优先，倾向于Mobile，但不是移动设备框架。它由规范的CSS，JavaScript插件构成，其最大的优势是响应式布局，CSS媒体查询(Media Query)的功劳，使得开发者可以方便的让网页无论在台式机，手机上都获得最佳的体验。 1、抽象出常用的css样式,高再可用性,高移植性 2、有固有的定义,详细的文档及开发特点 3、高兼容性,可以兼容流行的浏览器 4、以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

前端知识集锦1

阅读更多关于前端知识集锦1

原文链接：征服前端面试，仅供学习使用前端知识集锦2 1. JavaScript 1.1 原型我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个对象，就是原型。当我们在创建对象时，可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象上。而每一个new出来的实例，都有一个proto属性，该属性指向构造函数的原型对象，通过这个属性，让实例对象也能够访问原型对象上的方法。因此，当所有的实例都能够通过proto访问到原型对象时，原型对象的方法与属性就变成了共有方法与属性。 // 声明构造函数 function Person(name, age) { this.name = name; this.age = age; } // 通过prototye属性，将方法挂载到原型对象上 Person.prototype.getName = function() { return this.name; } var p1 = new Person('tim', 10); var p2 = new Person('jak', 22); console.log(p1.getName === p2.getName); // true 通过图示我们可以看出，构造函数的prototype与所有实例对象的proto都指向原型对象

关于sass、scss、less的概念性知识汇总

阅读更多关于关于sass、scss、less的概念性知识汇总

这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less？什么是Sass和Less？ Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。为什么要使用CSS预处理器？作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 CSS有具体以下几个缺点：语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。但是

CSS

阅读更多关于 CSS

表单 form > input | label | button | textarea | select form表单属性属性：action 值：url 含义：指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码属性：method 值：get或post 含义：将表单数据提交到http服务器的方法，可能值有两个：get和post 属性：enctype 值： application/x-www-form-urlencoded 含义：指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码 input标签 input属性大概介绍: type:按钮的属性 id:标识 name:与后端交互的key values:给后端的值,如果没有name则没法给到后端案例介绍 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单标签</title> <

php bootstrap-datetimepicker

阅读更多关于 php bootstrap-datetimepicker

　　　　开发语言：php 　　　　框架：thinkphp 3.2 　　　　问题：搜索条件开始时间--结束时间　　　　解决工具： bootstrap-datetimepicker 插件　　　　时间插件组合用法 1.公用部分 css: bootstrap.min.css js:jquery-1.10.2.min.js 2特有部分 datatime组合 css：bootstrap-datetimepicker.min.css js:bootstrap-datetimepicker.js bootstrap-datetimepicker.zh-CN.js $(".picker").datetimepicker({format: 'yyyy-mm-dd hh:ii'//日期格式}) date组合 css：bootstrap-datepicker.min.css js:bootstrap-datepicker.js bootstrap-datepicker.zh-CN.js $(".picker").datepicker({format: 'yyyy-mm-dd'//日期格式}) time组合 css：bootstrap-timepicker.min.css js:bootstrap-timepicker.js bootstrap-datepicker.zh-CN.js $("

简单Web UI 自动化测试框架 pyse

阅读更多关于简单Web UI 自动化测试框架 pyse

WebUI automation testing framework based on Selenium and unittest. 基于 selenium 和 unittest 的 Web UI自动化测试框架。特点默认使用CSS定位，同时支持多种定位方法（id\name\class\link_text\xpath\css）。基于Selenium二次封装，使用更简单。提供脚手架，快速生成自动化测试项目。自动生成/reports/目录，以及HTML测试报告生成。自带断言方法，断言title、URL 和 text。支持用例参数化。安装 > pip install -U git+https://github.com/defnngj/pyse.git@master pyse命令 1、查看帮助： > pyse -h usage: pyse [-h] [-V] [--startproject STARTPROJECT] [-r R] WebUI automation testing framework based on Selenium. optional arguments: -h, --help show this help message and exit -V, --version show version --startproject STARTPROJECT

HTML学习笔记

阅读更多关于 HTML学习笔记

HTML 学习笔记 HTML 简介示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> （学习笔记） </title> </head> <body> <h1> 我的第一个标题 </h1> <p> 我的第一个段落。 </p> </body> </html> 解析 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（ meta ）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 <!DOCTYPE> 声明 <!DOCTYPE> 声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。 doctype 声明是不区分大小写的，以下方式均可： <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html> 注意：目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK 。

订阅 css框架