2天驾驭DIV+CSS (技巧篇)(转)
基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准?
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素
实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack
技巧篇
[单张图片按钮实例]
[首行文字两文字缩进]
一般我们做按钮基本上都需要两张图片,一张正常状态的图片,一张按下去效果图片,做这种按钮思路就是,设置链接a的背景为第一张图片,a:hover的背景为第二张图片
代码如下:
HTML代码:
<a href="#" id="theLink"></a>
CSS代码:
#theLink{
display:block;/*因为标签a是内链元素,所以利用这句话将内链元素转化成块状元素,后面的width和height才起作用*/
width:120px;
height:41px;
margin:0 auto;
background:url(../images/normal.gif) no-repeat;
}
#theLink:hover{background:url(../images/press.gif) no-repeat;}
源代码: 两张图片按钮的源代码.rar (6.18 KB, 下载次数: 1055)
=========================================================
这节课,主要给大家介绍第二种思路,其实也很简单,首先我们将上面的两个图片合并成一张图片,如下:
其次,将上面的图片设置成按钮的背景,最后,将a:hover的背景向上移动41个像素就OK了
HTML代码:
<a href="#" id="theLink"></a>
CSS代码:
#theLink{
display:block;
width:120px;
height:41px;
margin:0 auto;
background:url(../images/buttonBG.gif) no-repeat;
}
#theLink:hover{background:url(../images/buttonBG.gif) no-repeat 0 -41px;}
这种图片整合技术,就是CSS Sprites,也就是CSS精灵!
学到这里,大家是不是可以把[第七课] 定位应用的例子用CSS Sprites实现呢?
源代码: 单张图片按钮的源代码.rar (5.4 KB, 下载次数: 1296)
记得过去刚开始学习制作页面的时候,要想让一段文字首行缩进两个文字,如下图:
总是在前面加上8个“ ”,因为过去大家对CSS不熟悉,这种方法实现虽然比较直接,但是文字多的时候会有很多“ ”充斥在代码中,代码显着比较乱,现在我们实现这种效果就简单多了,直接在CSS代码中加入
text-indent:2em;
就很容易实现文本段落的缩进~
text-indent:2em;
解释一下:text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;
em又是什么单位?
em这个单位的意思就是文字的高度,1em就是1个文字的高度,2em就是两个文字高度,所以我们写的“text-indent:2em;”的意思就是,文本缩进2个文字的高度,因为汉字是方块字,高度和宽度是一样的,所以缩进2个文字的高度,就等于缩进两个文字的宽度,最后的效果就是缩进了两个文字。
【说明一点】
对于"text-indent:2em;"属性,只能加在块状元素上面,内联元素是不起作用的。
源代码: 文本缩进.rar (68.34 KB, 下载次数: 545)
2天驾驭DIV+CSS (技巧篇)(转)的更多相关文章
- 2天驾驭DIV+CSS (实战篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- CSS技巧----DIV+CSS规范命名大全集合
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS一些小小的技巧
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...
- 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
1.简介 CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性.下面详细介绍CSS定位方式的使用方法.xpat ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
随机推荐
- Swift学习(二)
一.方法 在OC中,函数是C语言的形式,跟方法不一样 函数:int sum (int num1, int num2) { return num1 + num2; } 方法:- (int)sum:( ...
- php和apache安装心得
又一次安装apache和php~~ 又一次心碎的体验~ 本想参考之前的apache配置之间进行安装(在windows 下编辑,然后传到linux上),怎耐,一直有问题,打开浏览器直接进行下载.发现是浏 ...
- mysql中data_format用法
date_format(date,format)可以把日期转换为制定的格式: mysql> select date_format('2008-08-08 22:23:00', '%W %M %Y ...
- 由多次使用Statement实例引起的Result set already closed异常的解决方案
在不同版本的Weblogic平台上迁移应用,产生了很严重的JDBC驱动版本不兼容的问题. 但是归根究底是代码的问题,废话少说,上代码示例. ..... //以下是问题代码 ResultSet rs=n ...
- Compilation failed: this version of PCRE is not compiled with PCRE_UTF8 support at offset 0
在安装pcre-8.13.tar.gz时候出了错,说是缺少libpcre.so.0 下面是解决方法.真不容易哦,一个问题来没解决,新问题就出来了.一环扣一环,会搞死去.. errorgrep: err ...
- 索引 使用use index优化sql查询
好博客:MySQL http://webnoties.blog.163.com/blog/#m=0&t=1&c=fks_08407108108708107008508508609508 ...
- sublime Text2 2.0.2 build 2221 64位 破解(已测试)
近终于找到 sublime Text2 升级到 2.0.2 build 2221 64位 的破破解 输入注册码就成了 ----- BEGIN LICENSE ----- Andrew Weber S ...
- javascript之delete操作符
理解delete 理论 代码段的类型 执行上下文 活动对象 / 变量对象 属性的特性 内置属性与 DontDelete 未声明的赋值 Firebug的困惑 在eval中删除变量 浏览器兼容性 Geck ...
- makefile中的target到底代表什么?
刚开始用make的时候,以为makefile中名字叫做main的target就是make默认执行的target(中文翻译叫做标的(di,四声),下面统一称呼为标的),然后曾经很天真地犯过这样的错误,就 ...
- Outlook 2007无法打开链接"由于本机的限制 该操作已被取消"
编写人:CC阿爸 2014-2-17 近来在日常维护中,经常性的遇到用户在outlook中打开链接,提示[由于本机的限制,该操作已被取消],第一次的在网上搜索到解决办法后, 第二次再处理时,又没能记住 ...