Css -

CSS选择器：first-child、last-child、nth-child、nth-last-child

作者：MJ 发布于：2017-5-17 7:51 Wednesday 分类：Css

CSS选择器：first-child、last-child、nth-child、nth-last-child 定义和用法：

1、:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
2、:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
3、:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
4、:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。

更具体使用方法请直接百度

标签: first-child last-child nth-child nth-last-child

评论(0) 引用(0) 浏览(389765)

CSS3 :nth-child() 选择器

作者：MJ 发布于：2017-1-4 8:10 Wednesday 分类：Css

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。

实例 1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<style type="text/css">
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
.col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
.col-3:nth-child(3){background: #000;color: #fff;}
</style>

<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>

<style type="text/css">
.col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
.col-3:nth-child(3){background: #000;color: #fff;}
</style>
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>

实例 2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<style> 
div:nth-child(3n+0)
{
background:#ff0000;
}
</style>

<div>第一个段落。</div>
<div>第二个段落。</div>
<div>第三个段落。</div>
<div>第四个段落。</div>
<div>第五个段落。</div>
<div>第六个段落。</div>
<div>第七个段落。</div>
<div>第八个段落。</div>
<div>第九个段落。</div>

评论(0) 引用(0) 浏览(376975)

CSS3 calc() 会计算的属性

作者：MJ 发布于：2017-1-4 8:02 Wednesday 分类：Css

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。

怎么使用

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。

比如三局平均分布的布局，中间间距为5像素。

	<style type="text/css">
	*{margin: 0; padding: 0;}
	.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
	.col-3:nth-child(3){margin-right: 0;}
	</style>

<div class="container">
		<div class="col-3">1</div>
		<div class="col-3">2</div>
		<div class="col-3">3</div>
		<div class="col-3">4</div>
	</div>

标签: calc

评论(0) 引用(0) 浏览(381707)

div元素设置了width:100%后再设置padding或者margin会超出父元素宽度解决办法

作者：MJ 发布于：2016-11-6 12:32 Sunday 分类：Css

width100%后加上margin和padding超出父元素宽度解决办法：直接使用CSS的 box-sizing 属性就可以解决这个问题，这个是CSS3新属性，可以将padding计算在width内。

语法

box-sizing: content-box|border-box|inherit;

值一、content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

值二、border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

值三、inherit

规定应从父元素继承 box-sizing 属性的值。

例子

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
</div>

</body>
</html>

标签: box-sizing

评论(0) 引用(0) 浏览(407530)

用css样式表控制让图片自适应屏幕窗口大小图片自动按比例缩小

作者：MJ 发布于：2014-12-1 18:08 Monday 分类：Css

<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 300px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>

<div class="content-width">
  <p><img src="http://bali.fuzhou61.com/content/uploadfile/201411/799b1416134792.jpg" kesrc="http://bali.fuzhou61.com/content/uploadfile/201411/799b1416134792.jpg" /></p>
  <p><img src="http://bali.fuzhou61.com/content/uploadfile/201411/bccc1415867608.jpg" kesrc="http://bali.fuzhou61.com/content/uploadfile/201411/bccc1415867608.jpg" /></p>
</div>

标签: 图片CSS

评论(0) 引用(0) 浏览(378524)

CSS让内部容器高度随着父容器高度变化的解决办法

作者：MJ 发布于：2012-11-8 7:58 Thursday 分类：Css

使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果，我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局，有时候为了视觉效果，我们需要让里面两个子容器的高度必须保持一致，但是

阅读全文>>

标签: 自定义高度

评论(0) 引用(0) 浏览(382399)

display:inline-block的深入理解

作者：MJ 发布于：2012-10-31 8:19 Wednesday 分类：Css

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，无论是初接触Web标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。

display:inline-block

引用:
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

但对于这个属性不是所有浏览器都识别。

阅读全文>>

评论(0) 引用(0) 浏览(350747)

CSS中zoom属性和overflow:auto属性清除浮动的作用详解

作者：MJ 发布于：2012-10-31 7:24 Wednesday 分类：Css

在CSS中的Zoom这个属性一般不为人知，甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。

在线演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog</title>
<style type="text/css">
.box{ 
     width:300px;
	 height:auto;
	 background-color: #000000;
	 margin:100px auto;
	 padding:5px;

	 }
.box h2{ width:300px; line-height:24px; color:#CCCCCC;}	 
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}		 	 
	 
</style>
</head>

<body>


<div class="box">
<h2>这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象</h2>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
</div>

<div class="box za">
<h2>这个加overflow:auto和zoom:1属性，清除浮动，正常</h2>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
</div>

</body>
</html>

标签: 清除浮动

评论(0) 引用(0) 浏览(362339)

box-shadow CSS3样式表中阴影的属性

作者：MJ 发布于：2012-10-31 5:44 Wednesday 分类：Css

box-shadow 是CSS3中实现页面元素产生阴影的样式属性。

box-shadow属性表达式：

box-shadow：x-offset(阴影水平偏移值，可取正负值) y-offset(阴影垂直偏移值，可取正负值) blur(阴影模糊值) color of shadow(阴影颜色)

实例：

box-shadow:1px 1px 3px #292929;

在线演示代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子阴影</title>
<style type="text/css">
.box{ 
     width:300px;
	 height:300px;
	 background-color:#fff;
	 margin:100px auto;
	 padding:10px;
	 
     /* 设置阴影 */    
     -webkit-box-shadow:1px 1px 3px #292929;    
	 -moz-box-shadow:1px 1px 3px #292929;    
	 box-shadow:1px 1px 3px #292929;
	 }
</style>
</head>

<body>
<div class="box"><br /><br /><br /><br />看，是不是很有立体感？没有设置边框啊。</div>
</body>
</html>

评论(0) 引用(0) 浏览(426790)

CSS小技巧用CSS写出一个三角形小图标

作者：MJ 发布于：2012-9-20 9:48 Thursday 分类：Css

UI在设计网页的时候，有时为让页面更好看会喜欢在文章列表每个标题链接前面设计一个小图标，我们在重构页面时最经常的做法就在把那小图标弄成背景图片来实现UI设计的效果，其实如果那个小图标是三角形的，那我们还可以直接通过纯CSS定义，无需背景图片就可以实现UI设计的效果。具体写法请看下面的演示代码，用CSS写出一个三角形小图标主要是靠 font 和 border 这个两个CSS标签。

CSS属性解释：

【font:0/0 "宋体"】这个字体和行高分别为0;相当于font:fontsize/line-height;

【border-color:red blue #000 green】这四个颜色分别指的是顺时针上右下左

其实就是建一个没有内容只有边框的标签，三个边框颜色为背景色，一个为你需要的颜色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
em{ font-style: normal; }
*{margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}

.box{ width:760px; border-top:1px solid #FFFFFF; height:auto; margin:0px auto;}

/*用CSS写出一个三角形小图标，这个是用em标签*/
.list_a{ width:200px; height:auto; margin:20px auto;}
.list_a li { height:25px}
.list_a em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#f0f0f0 #f0f0f0 #f0f0f0 #921902; float:left; margin-top:2px}

/*用CSS写出一个三角形小图标，这个是用div标签*/
.list_b{ width:200px; height:auto; margin:20px auto; background-color:#FFFFFF; padding:10px;}

.a {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff #000; width:0px; height:0px; margin:10px auto;}
.b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff blue #fff; width:0px; height:0px; margin:10px auto;}
.c {font:0/0 "宋体"; border:25px solid; border-color:#fff green #fff #fff; width:0px; height:0px; margin:10px auto;}
.d {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; width:0px; height:0px; margin:10px auto;}
</style>
</head>

<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>

<div class="box">
<div class="list_a">
<ul>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
</ul>
</div>

<div class="list_b">

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

</div>
</div>
</body>
</html>

评论(0) 引用(0) 浏览(343825)

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

作者：MJ 发布于：2012-9-6 5:01 Thursday 分类：Css

今天早上重构一个机票订购页面的时候，为了配合JS特效所以需要写一个绝对定位浮动层，写完在测试的时候发现，在FF、ie8、ie7、op下都可以正常显示，可是到了IE6的时候，这个绝对定位浮动层却无法显示，把CSS中“position:absolute”去掉后就可以显示出来，这是何原因呢？

经过baidu、goole折腾研究了半天后终于找到了原因，原来是这个绝对定位浮动层旁边紧邻的那个div层是个使用“float:left”左浮动，而导致这个绝对定位浮动层在IE6下无法显示，解决办法就是在这个绝对定位浮动层前面插入一个清除浮动的层。

阅读全文>>

标签: 绝对定位 position:absolute

评论(0) 引用(0) 浏览(403027)

opacity 实现图层透明的CSS属性

作者：MJ 发布于：2012-8-24 8:34 Friday 分类：Css

opacity语法： opacity:<alphavalue> | inherit

支持IE浏览器语法写法： filter: alpha(opacity= <alphavalue> ); 【<alphavalue>的取值范围是0-100】

支持Firefox, Safari, Chrome 览器语法写法：opacity:<alphavalue>; 【<alphavalue>的取值范围是0.0-1.0】

支持mozilla firefox 览器语法写法：-moz-opacity:<alphavalue>; 【<alphavalue>的取值范围是0.0-1.0】

阅读全文>>

评论(0) 引用(0) 浏览(368466)

text-overflow:ellipsis 当文本超出固定宽度时自动显示省略号的详细方法

作者：MJ 发布于：2012-8-23 10:23 Thursday 分类：Css

text-overflow:ellipsis 是 CSS中当文本超出固定宽度时自动显示省略号的样式属性，经常适用于控制文章标题的css样式中。

阅读全文>>

评论(6) 引用(0) 浏览(352402)

IE6下PNG图片透明的解决方法 (转来的)

作者：MJ 发布于：2012-8-22 4:54 Wednesday 分类：Css

在IE6浏览器下PNG24格式的图片会出现有灰底不透明的情况，严重影响整个页面的美观效果，下面介绍几种关于在IE6下PNG图片透明的解决方法。

阅读全文>>

标签: IE6 PNG透明

评论(0) 引用(0) 浏览(376884)

text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签

作者：MJ 发布于：2012-8-8 9:22 Wednesday 分类：Css

如何在html页面中实现横线从文字中间穿过的效果呢？

要实现这种效果有三种方法可实现，如下：

1、是用CSS样式表中 text-decoration:line-through; 属性

2、是使用<del>186.00</del>html标签

3、是使用<s>186.00</s>html标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJ.588cy.com</title>
<style type="text/css">
b{ text-decoration: line-through; font-weight:100;}
</style>
</head>

<body>
<b>186.00</b>
<del>186.00</del>
<s>186.00</s>
</body>
</html>

评论(0) 引用(0) 浏览(453045)

letter-spacing 样式表属性

作者：MJ 发布于：2012-8-8 7:36 Wednesday 分类：Css

在CSS中 letter-spacing 属性被用于增加或减少字符间的空白（字符间距）。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

</html>

评论(0) 引用(0) 浏览(356706)

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

blogger

分类

最新碎语

搜索

随机日志

链接