码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS笔记--2

时间:2016-04-03 23:53:41      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

1、列表前面的小图片小商标,我们可以用<s></s>来实现,s是行内块标签,

.top-page-2 ul li s{
    display: inline-block; /*s是行内标签*/
    width:14px;
    height: 12px; 
    background: url(../image/sprite.png);
    vertical-align: middle;/*让图片居中显示*/
}

对于有背景s背景图片的不要使用padding来设置列表的间距,因为这样会改变图片的位置,可转为用margin来设置相同的效果

2、a标签不能继承父标签的颜色

3、valign:垂直对齐的方式,值有:bottom top middle sub(下标) super(上标)。

4、h1+P   表示寻找H1标签后的的一个P标签,

5、first:letter  这是一个伪类,用来修饰列表的首字的样式。

6、背景的偏移量,

.top .h-top li:nth-child(1) s{
    vertical-align: middle;
    background: url(../images/icon.gif) -5px -8px;
}

一些比较小的图片可以用精灵图来合并到一张图上,然后用背景图片的偏移量的来实现不同区域的背景。

7、cursor的作用,来实现光标在地点上显示的样式:值有:default/小白,pointer/划过去是个小手样式,text/输入光标,crosshair/十字形,move/十字箭头

8、pre,严格控制文本的样式,如里面有多少空格,就会有多少空格显示空格。

9、背景右边的size background-size: auto/    cover----等比例缩放,直到正好完全覆盖到定义的背景,      contain-----等比例缩放,直到宽度或高度适应背景。-px -px ;自定义数值

 

HTML+CSS笔记--2

标签:

原文地址:http://www.cnblogs.com/muzhuo/p/5351120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!