为您找到搜索结果：1786个
css background之设置图片为背景技巧
原文 Background是什么意思，翻译过来有背景意思。同样在css里面作为css属性一成员同样是有背景意思，并且是设置背景图片、背景颜色、背景图片截取等样式。首先先来看看background有那些值（可进入CSS手册的background详细了解）可以按顺序设置如下属性（可点击进入相应的css手册查看使用）：background-color背景颜色background-image背景图片background-repeat背景重复background-attachment背景图片是固定还是滚动background-position背景图片的定位接下来我们重点来讲解cssbackground通常的使用方法首先我们来看下面一段代码background:url(bgimg.gif)no-repeat5px5px;如下图解释 从图上的CSSbackground解析图我们可以详细了解到background的css属性使用方法。background:url(bgimg.gif)no-repeat5px5px;这样的css背景表达可以节约和优化css文件代码。学习者...
css 设置 checkbox复选框控件的对勾√样式
最终的样式，想要的效果： 我们要创建方框中的对勾，对于这一点，我们可以使用伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px*15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的属性让它旋转一下，这样看起来就像是一个对勾。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>选中标签forcheck</title><styletype="text/css">.div-checkedlabel{cursor:pointer;position:relative;display:inline-block;width:150px;height:38px;border:1pxsolidgrey;}/***按钮透明*@type{String}*/input[type="checkbox"]{opacity:0;}/***checkbox选中样式*@type{S...
CSS 实现对号效果
实现对号效果，一种思路是利用现成的符号，直接在网上搜索到√，插入页面。另一种思路是本文要介绍的用CSS实现，思路是： 给块级元素设置宽度和高度 设置元素相邻的两个border 旋转元素HTML<divclass="check-style-unequal-width"></div>解析 此处需要使用块级元素 不需要设置元素内容CSS .check-style-unequal-width{ width:8px; height:16px; &n...
css中常用的伪类
div:first-child 表示第一个div，代码如下 <html><head><title></title></head><style>*{margin:0;padding:0;}.show>div{width:100px;height:100px;}.show>div:first-child{color:red;}</style><body><divclass="show"><div>第一个div</div><div>第二个div</div><div>第三个div</div><div>第四个div</div></div></body></html>ViewCode div:last-child 表示最后一个div <html><head><ti...
css类层级问题
.showh1{}，h1元素的上级或者h1元素的上上级，h1的先祖级是show，h1都会有这个样式 .show>h1{}，h1元素的直接父级是show，这样的h1才会有这个样式 <html><head><title></title></head><style>*{margin:0;padding:0;}.showh1{color:red}</style><body><divid="tab"><divclass="show"><h1>version</h1><div><h1>show</h1></div></div></div></body></html>ViewCode <html><head><title></title></head><style>*{...
css两种隐藏div的区别
1.display：none display:none该div会被隐藏，且不占样式空间，不会被该div影响任何布局 2.version:hidden variable:hidden该div会被隐藏，但是依旧占样式空间，该div依然会影响布局 总结：display:none使div不存在，variable:hidden会保留div的宽高，占用一个空白区 <html><head><title></title></head><style>*{margin:0;padding:0;}.show{height:100px;width:100px;variable:hidden;}</style><body><divid="tab"><h2>show</h2><divclass="show"></div><h1>version</h1></div></body></html&g...
jQuery操作css样式的方法
<html><head><title></title></head><style></style><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>$(function(){//逐一设置样式$('div').css("width","100px")$('div').css("height","100px")$('div').css("background","red")//链式设置$('div').css("width","100px").css("height","100px").css("background","blue")//批量设置(推荐使用)$('div').css({width:"100px",height:"100px",background:"red"})})</script><body><div></div>&l...
CSS 简介
CSS简介在继续学习之前，你需要对下面的知识有基本的了解：HTMLXHTMLCSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一 style应用的方式：style样式的应用有三种方式：1.在标签上面通过style属性设置.<body><div>helloworld<br>welcometochina</div></body> 2.将sytle样式写在<head></head>中，然后使用class引用样式.免代码重用，和代码可以避简洁.<!DOCTYPEhtml><htmllang="en"><head> <style> &nbs...
css预编译sass和stylus简单使用
目前css流行的三大预编译有stylus、less、sass说白了这些东西就是为了提高编码效率，更好的规整和简化css代码的，相信大家less就不用多说了用得都比较多了，在这里简单记录下stylus,sassstylus使用1、首先在package.json增加依赖"devDependencies":{"style-loader":"^0.23.1","stylus":"^0.54.5","stylus-loader":"^3.0.2",}2、定义外部styl定义额外的文件是以.styl为后缀，他可以文件中定义方法同时使用变量,属性与值间可以使用空格分隔，结尾不需要分隔符如：//背景图片bg-image($url)background-imageurl($url+"@2x.png")@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3)background-image:url($url+"@3x.png")3、文件中使用在文件里写css需要指定lang<stylelang="stylus"rel="s...
CSS文本过长时设置省略号
/写页面时很多时候会遇到一个容器中文本内容超出，使用overflow:hidden;，但是跟用户体验不太友好，设置overflow:scroll;会出现滚动看着也不爽，所以我就想使用css设置超出省略号显示单行文本语法： text-overflow:clip|ellipsis 参数： clip: 不显示省略标记（...），而是简单的裁切 （clip这个参数是不常用的！） ellipsis: 当对象内文本溢出时显示省略标记（...） 说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 最大的缺点：text-overflow:ellipsis属性在FF中是没有效果的。注意：一、仅定义text-overflow:ellipsis;不能实现省略号效果。二、定义text-overflow:ellipsis;white-space:nowrap;同样不能实现省略号效果。三、同时应用：text-overflow:ellipsis;white-space:nowrap;overflow:hidden;实现了所想要得到的溢出文本显示省略号效果四、部分浏览器需要设置宽度...
css设置边框四角样式
/开发中使用css伪类是再常见不过的事情了，运用好了能轻松实现许多复杂的样式，大大减少使用图片消耗带宽的问题，今天我们就使用伪类来实现登录框的四角样式html代码如下<divclass="formbackLoginForm"><el-form:model="formData"ref="form"><!--添加自己的form内容--></el-form><divclass="angleangle-left-top"></div><divclass="angleangle-left-bottom"></div><divclass="angleangle-right-top"></div><divclass="angleangle-right-bottom"></div></div> css样式.angle{position:absolute;width:20px;height:20px;}.angle-left-t...
超越大神周文露之，，，css的学习1
margin-right:1em;用户浏览器的默认渲染的文字大小是“16px”,Web页面的“body”的文字大小在用户浏览器下默认渲染是“16”px。当然，如果用户愿意他可以改变这种文字大小的设置。弹性设置有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如1.365em。而其中相对的意思是：相对于父元素的font-size。比如说：如果在一个<div>设置字体大小为16px，此时这个div的后代元素继承了它的大小，如果你将其子元素设置为“0.75em”，那么其字体大小计算出来后相当于“0.75*16px=12px”;display:inline-block;inline(行内元素)： 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独...