当前位置: 首页 > 编程日记 > 正文

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

300px!important;width /**/:340px;margin:0 10px 0 10px}

,关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

4、关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

< type=”text/java”>

就可以了

七、10个你未必知道的CSS技巧

1、CSS字体属性简写规则

一般用CSS设定字体属性是这样做的:

以下为引用的内容:

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2、同时使用两个类

一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

<p>…</p>

同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

补充:对于一个ID,不能这样写<p id=”text side”>…</p>也不能这样写

3、CSS border的缺省值

通常可以设定边界的颜色,宽度和风格,如:

border: 3px solid #000

这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。

4、CSS用于文档打印

许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

<link type=”text/css” rel=”stylesheet” href=”/blog/stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

第1行就是显示,第2行是打印,注意其中的media属性。

但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。

5、图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:

<h1><img src=”/blog/widget-image.gif” alt=”Buy widgets” /></h1>

这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

#box { width: 100px; border: 5px; padding: 20px }

这样调用它:

<div id=”box”>…</div>

这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的,让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用:

<div id=”box”><div>…</div></div>

这样,不管什么浏览器,宽度都是150点了。

7、块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:

#content { width: 700px; margin: 0 auto }

你会使用 <div id=”content”> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中,所以在Content中又加入了

text-align: left 。

8、用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。

CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

9、CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:

#container { position: relative }

这样容器内所有的元素都会相对定位,可以这样用:

<div id=”container”><div id=”navigation”>…</div></div>

如果想定位到距左30点,距上5点,可以这样:

#navigation { position: absolute; left: 30px; top: 5px }

当然,你还可以这样:

margin: 5px 0 0 30px

注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。

10、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?

不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。

body { background: url(/blog/blue-image.gif) 0 0 repeat-y }

此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010682330/article/details/78957751

转载于:https://www.cnblogs.com/Tohold/p/9439915.html

相关文章:

(C++)A+B 输入输出练习VII 输入包含若干行,每行输入两个整数a和b,由空格分隔。 对于每组输入,输出a和b的和,每行输出后接一个空行。

#include<stdio.h> /* 1 5 10 20 */int main() { int a,b;while(scanf("%d%d",&a,&b) ! EOF){printf("%d\n\n",ab);}return 0;}

Address already in use: JVM_Bind错误的解决

错误原因 tomcat的8005端口号被占用了 解决办法 关闭已有的占用端口 1. cmd—>netstat -an 查看当前开启的端口号 2. netstat -ano 获得端口号的pid码 3. skill -{pid} 杀死端口进程转载于:https://www.cnblogs.com/lxq0309/p/3736899.html

在SQL Server中如何转化长日期形式为短日期格式

convert(nvarchar(10),字段名,121)即可将时间格式转化为yyyy-mm-dd格式 convert中的121是指将datetime类型转换为char类型时获得包括世纪位数的4位年份。转载于:https://www.cnblogs.com/footleg/archive/2007/11/29/976451.html

看看Vector源码Java 9

2019独角兽企业重金招聘Python工程师标准>>> Vector类实现了一个可增长的对象数组。像数组一样&#xff0c;它包含可以使用整数索引随机访问。但是&#xff0c;Vector的大小可以根据需要增大或缩小&#xff0c;以适应在创建Vector之后添加和删除项目。 文档里的内容…

(C++)1016 部分A+B 正整数

#include<cstdio>int main(){ //1.读入a,Da,b,Dblong long a,b,Pa0,Pb0;int Da,Db;scanf("%lld%d%lld%d",&a,&Da,&b,&Db); //2.对于a,遍历每一位&#xff0c;加在Pa上 //2.1取余的方式遍历while(a>0){if(a%10Da){Pa Pa*10 Da;}a a/10;} …

MySQL Innodb日志机制深入分析

1.1. Log & Checkpoint Innodb的事务日志是指Redo log&#xff0c;简称Log,保存在日志文件ib_logfile*里面。Innodb还有另外一个日志Undo log&#xff0c;但Undo log是存放在共享表空间里面的&#xff08;ibdata*文件&#xff09;。 由于Log和Checkpoint紧密相关&#xff0…

单元测试的重要性

一些错误的认识 在实际的单元测试过程中总会有一些错误的认识左右着我们&#xff0c;使之成为单元测试最大的障碍&#xff0c;在此将其一一分析如下&#xff1a; 它太浪费时间了&#xff0c;现在要赶进度&#xff0c;时间上根本不允许&#xff0c;或者随便做做应付领导。 我是一…

浅谈网络协议(四) IP的由来--DHCP与PXE

2019独角兽企业重金招聘Python工程师标准>>> 上一节说过&#xff0c;IP就是一台计算机的通讯地址&#xff0c;要和其他机器通讯&#xff0c;就需要一个通讯地址&#xff0c;就要给网卡配置这么一个地址。 配置 IP 那如何配置呢&#xff1f;可以使用 ifconfig&#x…

(C++)1026 程序运行时间

#include<cstdio> const int CLK_TCK100;int main(){ //1.读入c1,c2int c1,c2;scanf("%d%d",&c1,&c2); //2.定义常量CLK_TCK100 //难点&#xff1a;不足 1 秒的时间四舍五入到秒 --不用round()&#xff0c;避免浮点数运算 int dif c2-c1;if(dif%100&…

Spring中@Autowired注解、@Resource注解的区别

Spring不但支持自己定义的Autowired注解&#xff0c;还支持几个由JSR-250规范定义的注解&#xff0c;它们分别是Resource、PostConstruct以及PreDestroy。  Resource的作用相当于Autowired&#xff0c;只不过Autowired按byType自动注入&#xff0c;而Resource默认按 byName自…

(C++)1046 划拳

划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为&#xff1a;每人口中喊出一个数字&#xff0c;同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和&#xff0c;谁就赢了&#xff0c;输家罚一杯酒。两人同赢或两人同输则继续下一轮&…

JAVA中重写equals()方法的同时要重写hashcode()方法

object对象中的 public boolean equals(Object obj)&#xff0c;对于任何非空引用值 x 和 y&#xff0c;当且仅当 x 和 y 引用同一个对象时&#xff0c;此方法才返回 true&#xff1b;注意&#xff1a;当此方法被重写时&#xff0c;通常有必要重写 hashCode 方法&#xff0c;以…

从0到1,苏宁API网关的演进之路

http://www.infoq.com/cn/articles/suning-11-11-api-gateway?utm_campaigninfoq_content&utm_sourceinfoq&utm_mediumfeed&utm_termglobal 2012年&#xff0c;在开放云融推动各产业全面发展的大背景下&#xff0c;苏宁API对外开放。基于苏宁各内部业务系统的资源…

HTML 注意事项

这行与下面图片的间距比较小asdf 代码如下: <table id"table1"cellspacing"0"cellpadding"0"width"100%"border"0"><tbody><tr><td>这行与下面图片的间距比较小</td></tr><tr>&l…

(C++)1008 数组元素循环右移问题

#include<cstdio> //注意&#xff1a;不允许使用另外数组,序列结尾不能有多余空格,不能直接认为right<n //1.读入数组长度&#xff0c;和右移位数&#xff0c;读入数组 //2.未必要对实际数组进行循环右移&#xff0c;只要输出结果表现出那样就可以 int main(){int n…

C# 文件操作(上传 下载 删除 文件列表...)

using System.IO; 1.文件上传 ---------- 如下要点&#xff1a; HTML部分&#xff1a; <form id"form1" runat"server" method"post" enctype"multipart/form-data"> <input id"FileUpLoad" type"file" …

5个常用Java代码混淆器 助你保护你的代码

【IT168 技术文档】 从事Java编程的人都知道&#xff0c;可以通过逆向工程反编译得到Java程序的源代码&#xff0c;这种反编译工具之一就是JAD。因此&#xff0c;为保护我们的劳动成果&#xff0c;尽可能给反编译人员制造障碍&#xff0c;我们可以使用Java Obfuscator(Java混淆…

9.8.6恢复系统数据库

系统数据库和用户数据库一样容易发生故障&#xff0c;所以确保它们得到足够的保护十分重 要。一般来说&#xff0c;恢复系统数据库时有两种选择。可以从备份还原&#xff0c;或者从头重建它们。我 强烈推荐备份还原方法&#xff0c;因为从头重建意味着有人量的工作要做。由于系…

(C++)1012 数字分类

#include<cstdio> //用switch...case语句来对读入的数字进行分类 //1.读入N //2.A2需要设置变号器 //3.A3,A4需要设置计数器 //注意&#xff1a;某一类数可能根本不存在 int main(){int n;scanf("%d",&n);int res[5]{};//初始化为0 int count[5]{};whil…

老调重弹:插件式框架开发的一个简单应用

VS 2008最近要做一个应用程序检测程序&#xff0c;就是要检测服务器上各应用程序的运行情况&#xff0c;由于各应用程序的差异&#xff0c;很难做一个统一的探测程序&#xff0c;于是决定对任意一个应用程序都采用独立的一条探测规则。为了开发、部署的方便&#xff0c;考虑使用…

mathjax测试

O(∩_∩)O哈哈~&#xff0c;新开通博客测试。 mathjax公式测试。以下是latex公式 $a^2b^2c^2$ <!--more--> 多输入一点东东。新浪娱乐讯 1月3日&#xff0c;网络红人奶茶妹妹章泽天清空微博&#xff0c;而其男友刘强东也删除了“小天是我见过最单纯善良的人…只求以后可以…

Docker镜像使用

当运行容器时&#xff0c;使用的镜像如果在本地中不存在&#xff0c;docker 就会自动从 docker 镜像仓库中下载&#xff0c;默认是从 Docker Hub 公共镜像源下载。 下面我们来学习&#xff1a; 1、管理和使用本地 Docker 主机镜像2、创建镜像列出镜像列表 我们可以使用 docker …

(C++)1018 锤子剪刀布

#include<cstdio>int Map(char c){//将字母映射到数字 if(cB){return 0;}else if(cC){return 1;}else{return 2;} } //对决函数&#xff0c;返回1表示甲胜&#xff0c;0表示平局&#xff0c;-1表示乙胜 int ko(int i1,int i2){if((i11)%3i2){//甲胜 return 1;}else if(i…

我的软考之路(九)——总结篇

经过两个月的备战&#xff0c;软考总算结束了。软考虽然结束了&#xff0c;但是还需要简单的总结一下得与失。我从时间安排&#xff0c;到讲课做真题简单的回顾一下软考的整个过程。 时间安排&#xff1a; 对于时间的安排&#xff0c;整个小组成员每个人都有自己的看法&#xf…

problem-solving-with-algorithms-and-data-structure-usingpython(使用python解决算法和数据结构) -- 基本数据结构(二)...

中缀、前缀和后缀表达式 1. 前缀表达式符号要求所有运算符在它们处理的两个操作数之前。 2. 后缀表达式要求其操作符在相应的操作数之后。 考虑表达式 A B * C &#xff0c; A B C * 是等价的后缀表达式。操作数 A&#xff0c;B 和 C 保持在它们的相对位置&#xff0c;只有操…

赢在中国(08-02-27)

在Google Calendar中设置了赢在中国的日程&#xff0c;结果没有发短信给我&#xff08;是不是可以起诉它呢&#xff1f;和Google打打官司&#xff0c;可是成名的好机会啊&#xff1a;&#xff09;&#xff09;后面一节还是看到了&#xff0c;印象比较深的是最后一位做教育的选手…

(C++)1041 考试座位号

//B1041 #include<cstdio> //直接将试机号作为下标 struct student{long long no;int sit; };int main(){int n1,n2;//总共参与考试的人数&#xff0c;来迟的人数 student stus[1010];scanf("%d",&n1);long long no;int sit,test;for(int i0;i<n1;i){s…

Premiere制作VCD视频几个关键设置

一&#xff0c;视频设置 1&#xff0c;编码设置&#xff1a;不要选cinepak codec by radius,这个编码速度非常慢,图象也不清晰,一般只在电脑多多媒体交互式演示文件中使用。很多朋友遇到的“速度慢”、“不清晰”&#xff0c;多半是这里设置不合适造成。 2&#xff0c;帧尺寸&a…

qt中定时器Timer的使用

转载于:https://www.cnblogs.com/zhouwenJS/p/3762341.html

python基础===拆分字符串,和拼接字符串

给定某字符&#xff0c;只需要保留其中的有效汉字或者字母&#xff0c;数字之类的。去掉特殊符号或者以某种格式进行拆分的时候&#xff0c;就可以采用re.split的方法。例如 RESTART: Shell >>> s Python 3.6.1 (v3.6.1:69c0db5, Mar 21 2017, 18:41:36) [MSC v.19…