css样式小例子

.black_overlay{	display: none;/*不显示,隐藏*/	position: absolute;/*绝对定位*/	top: 0%;/*距顶部0%[贴紧top]*/	left: 0%;/*距左侧0%[贴紧left]*/	width: 100%;/*宽度100%*/	height: 100%;/*高度100%*/	z-index:1001;/*层的Z轴高度1001*/	-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);/*透明效果*/}.white_content {	display: none;/*不显示隐藏*/	position: absolute;/*绝对定位*/	top: 25%;/*距离头部25%*/	left: 25%;/*距离左侧25%*/	width: 50%;/*宽度屏幕50%*/	height: 50%;/*高度屏幕50%*/	padding: 16px;/*该元素内部元素距离该元素的边框16px*/	border: 16px solid orange; /*边框宽度为16px,橘色的实线*/	margin:-32px; /*该元素距其他元素的距离为-32px{关于padding和margin可以多参考下其他的详细介绍,盒状模型}*/	z-index:1002;	/*层的Z轴高度1002,该层在black_overlay层外侧,	即该层可以遮盖住black_overlay层	[如果这两个元素都为展示的,white_content在black_overlay之上]*/	overflow: auto;/*内容超出元素宽高度的时候,内容自动填充元素*/}
时间: 2024-10-27 13:37:39

css样式小例子的相关文章

css样式小框架

1.如div{...}会给所有的<div></div>增加样式. 2.名前井号“#”:对应html中的标签的id属性,写法为#name.如#p1{...}会给<p id="p1">ID is p1</p>增加样式. 3.名前小数点“.”:对应html中标签的class属性,写法为.name.如.p2{...}会给<p class="p2">CLASS is p2</p>增加样式. 4.中间空格“

select自定义下拉三角符号,css样式小细节

本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时候,以我自己的感觉中,是可以自己定义的,于是网上找到了这部分资料. 然后自己分享处理吧. 知道大家都喜欢完整的demo,所有直接粘贴吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

CSS样式小技巧

1.默认样式重置(CSS reset) body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;padding:0;font-size:12px;} ol,ul{margin:0;padding:0;list-style:none;} a{text-decoration:none;} img{border:none;} 2.选择符 类型选择符:body{margin:0;font-size:12px;} class选择符:.box1{width:100px;height:

css 样式小窍门

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面分布</title> <style> body { margin: 0; /*让整个页面的边距消失*/ } .pg-head { height: 40px; background-color: dodgerblue; line-height:

两套Ext小图标(含CSS样式文件)--约2000个图标

在Ext项目开发中经常用到16X16 的小图标,今天为大家准备被了两套完美的图标和样式,各大概包含2000个图标. 下载地址:http://files.cnblogs.com/zhougaojun/Ext%E5%B0%8F%E5%9B%BE%E6%A0%87.zip 部分图标效果: (1)第一套图标样式 (2)第二套图标样式 两套Ext小图标(含CSS样式文件)--约2000个图标,布布扣,bubuko.com

jQuery中添加/改变/移除改变CSS样式例子

在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码:  代码如下 复制代码 $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")’表

css通用小笔记02——浮动、清除(三个例子)

css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 2

关于bootstrap的css样式如何修改的问题(这是一个小问题)

使用bootstrap可以简化我们开发的流程和代码,但是虽然bootstrap的代码很方便,也面临着css的样式很单调的情况. 我们可以通过覆盖css样式解决. 但是笔者在写的时候发现自己覆盖的代码无法改变bootstrap本来的代码. 这是一个小问题,却困扰了我一下午,网上也没有相关的解答. 其实这个问题很简单,因为html渲染的时候是自上而下的,后面的样式会覆盖前面的样式. 所以如果你的css样式不能覆盖bootstrap的样式,检查一下是不是自己的样式的引入放在了bootstrap的引入前

CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以就要通过调试来找到要修改的地方. 在调试CSS的时候,我们一般使用Chrome.Firefox.IE等浏览器自带的工具,快捷键都为F12.但是,我们要调试如hover的样式时,鼠标放上去才会显示,鼠标一走就看不到了,没办法看清楚css样式,还有就是浏览器自带的一些hover.foucs.acti