在分析before和after伪元素之前，我们先看一个实例， 这个实例使用了css伪类元素affter制作了一个自定义的input check样式。实例如下：CSS input checkbox自定义样式.compare_button .checkboxcss {cursor: pointer;position: absolute;width: 15px;height: 15px;top: 0;left: 0;background: #f7f7f7;border: 2px solid #f5b34f;border-radius: 5px; } .compare_button {position: relative; } .compare_button .checkboxcss:after...
上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。值为0,不缩小。 下面的例子中没有定义该属性，但是满足容器中空间不足的情况,项目会默认缩小。 当项目1,2,3,4,5的flex-grow比例改变为: 计算过程如下(在此我们忽略边框的大小,以便于计算):整个box的宽度400px项目的宽度之...
CSS 单位作者：Chinaxiang 来源：互联网 2015-12-01 23:36CSS中的长度单位有很多，觉得有必要整理备忘。概览CSS中的长度单位有很多，觉得有必要整理备忘。网上介绍的也比较多和全，详见参考资料。单位大体分为两大类：绝对单位 ，不会因为其他元素的尺寸变化而变化。相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。单位类型简介pxAbsolute像素 (计算机屏幕上的一个点)，1px = 1/96inptAbsolutePoints, 1pt =...
本文实例讲述了Yii2框架加载css和js文件的方法。分享给大家供大家参考，具体如下： 1、第一步是要把我们的css、js文件放到web目录下2、第二步修改assets/AppAsset.php文件 <?php /*** @link http://www.yiiframework.com/* @copyright Copyright (c) 2008 Yii Software LLC* @license http://www.yiiframework.com/license/*/ namespace app\assets; use yii\web\AssetBundle; /*** @author Qiang Xue <qiang.xue@gmail.com>* @sin...
本文主要和大家分享CSS 选择器的优先级和权重分析，希望能帮助大家更加掌握学习css选择器。基本选择器选择器名 称实 例描 述版 本*通用选择器（Universal selectors）*匹配所有的元素2.1E标签选择器（Type selectors）p匹配所有的 <p>1.class类选择器（Class selectors）.nav匹配所有 class="nav" 的元素1#idID选择器（ID selectors）#wrapper匹配所有 id="wrapper" 的元素1E[attr]属性选择器（Attribute selectors）a[data-url]匹...
我们都知道在web页面开发时，有时我们灵活的运用css的定位postion属性进行布局时可以实现很好的效果，本文我们总结了一下position知识点，及平常比较常用的地方，希望对学习css的朋友可以参考。<script>ec(2);</script>首先我们对postion属性进行详解。在CSS3中，对于postion是这么描述的总结如下:static 是默认布局，设置top\left。。属性不会有作用。relative是相对布局，设置的top\left。。会相对文件中的控件。absolute是绝对定...
一、document.formName.item("itemName") 问题 问题说明：IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。 解决方法：统一使用document.formName.elements["elementName"]。二、集合类对象问题 问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。解决方法...
jQuery的css方法统一了两种写法，直接使用float属性即可，如下css方法中传参数“float”即可以设置也可以获取元素的float。 代码如下: float div $('#d1').css('float', 'right'); var str = $('#d1').css('float'); alert(str); 但jQuery非要自作聪明，加上对cssFloat和styleFloat的支持，见API文档，比如获取元素的float属性时，以下是等价的。1 $('div.left').css('float'); 2 $('div.left').css('cssFloat'); 3 $('div.lef...
本文实例讲述了Jquery中CSS选择器用法。分享给大家供大家参考。具体如下： jQuery使用了一套css选择器，共有5种，即标签选择器，ID选择器，类选择器，通用选择器和群组选择器，现分述如下： 1. 标签选择器 用于选择HTML页面中已有的标签元素，又称元素选择器，格式：$("element")，如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素，格式如下：$("id")，同getElementById代码如下: $("#users").val(); ...
本文实例讲述了jquery实现动态改变css样式的方法。分享给大家供大家参考，具体如下： jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS 样式的控制是少不了需要掌握的。如果是静态的CSS，当然是可以直接写上去的，但有些界面是需要一些动态效果的，比如颜色变化，字体大小变化，甚至DIV 的隐藏于现实等，这些都需要用javascript 动态控制其CSS样式，下面...
今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式先看下面的第一个小实例：源代码 html 文件： 请看注释 <!DOCTYPE html> <html><head><meta charset=...
我最近在研究Vue的路上，今天遇到了个问题，在vue cli 引入css报错，后来查询了很多资料，那么今天也算个学习笔记吧！ 1.问题描述之前用vue-cli搭建的项目，在main.js中引入elementUI库中的css,或者在其他文件中（比如App.vue）引入自己的css文件（假如你的文件是在src目录下），都会报一个相同的错。下如图经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, include: [ /src/,...
本文实例讲述了Jquery中CSS选择器用法。分享给大家供大家参考。具体如下： jQuery使用了一套css选择器，共有5种，即标签选择器，ID选择器，类选择器，通用选择器和群组选择器，现分述如下： 1. 标签选择器 用于选择HTML页面中已有的标签元素，又称元素选择器，格式：$("element")，如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素，格式如下：$("id")，同getElementById代码如下:<input id="users" ty...
jQuery的css方法统一了两种写法，直接使用float属性即可，如下css方法中传参数“float”即可以设置也可以获取元素的float。 代码如下:<div id="d1">float div</div> <script type="text/javascript"> $(#d1).css(float, right); var str = $(#d1).css(float); alert(str); </script> 但jQuery非要自作聪明，加上对cssFloat和styleFloat的支持，见API文档，比如获取元素的float属性时，以下是等价的。1 $(div.left).css(float); 2...
一、document.formName.item("itemName") 问题 问题说明：IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。 解决方法：统一使用document.formName.elements["elementName"]。二、集合类对象问题 问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。解决方法...