仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 633|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:凑合CSS兼容成绩的十个超等技能

[复制链接]
谁可相欹 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:38:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
破洛洛文章简介:1、针对firefoxie6ie7的CSS款式:如今年夜部分都是用!important来hack,关于ie6和firefox测试能够一般显现,可是ie7对!important能够准确注释,会招致页面没按请求显现!找到一个针对IE7不错的hack体例就是利用“*+html”,如今用IE7扫瞄一下,应当没有成绩了如今写
1、针对firefoxie6ie7的css款式
  如今年夜部分都是用!important来hack,关于ie6和firefox测试能够一般显现,可是ie7对!important能够准确注释,会招致页面没按请求显现!找到一个针对IE7不错的hack体例就是利用“*+html”,如今用IE7扫瞄一下,应当没有成绩了如今写一个CSS能够如许:

ExampleSourceCode
#abc{color:#333;}/*Moz*/
*html#abc{color:#666;}/*IE6*/
*+html#abc{color:#999;}/*IE7*/
那末在firefox下字体色彩显现为#333,IE6下字体色彩显现为#666,IE7下字体色彩显现为#999。
2、CSS结构中的居中成绩
  次要的款式界说以下:

ExampleSourceCode
body{TEXT-ALIGN:center;}
#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}
  申明:起首在父级元素界说TEXT-ALIGN:center;这个的意义就是在父级元素内的内容居中;关于IE如许设定就已能够了。
  但在mozilla中不克不及居中。办理举措就是在子元素界说时分设准时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”
  必要申明的是,假如你想用这个办法使全部页面要居中,倡议不要套在一个DIV里,你能够顺次拆出多个div,只需在每一个拆出的div里界说MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就能够了。
3、盒模子

ExampleSourceCode
#box{
;
//forie6.0-width:500px;
//forff+ie6.0
}
#box{
>//forff
;
//forff+ie6.0
width/**/:500px;
//forie6.0-
}
4、浮动ie6发生的双倍间隔

ExampleSourceCode
#box{float:left;;margin:000100px;
//这类情形之下IE会发生200px的间隔display:inline;//使浮动疏忽}
  这里细说一下block,inline两个元素,Block元素的特性是:老是在新行上入手下手,高度,宽度,行高,边距都能够把持(块元素);Inline元素的特性是:和其他元素在统一行上,…不成把持(内嵌元素);
  #box{display:block;//能够为内嵌元素摹拟为块元素display:inline;//完成统一行分列的的效果diplay:table;

破洛洛文章简介:1、针对firefoxie6ie7的css款式:如今年夜部分都是用!important来hack,关于ie6和firefox测试能够一般显现,可是ie7对!important能够准确注释,会招致页面没按请求显现!找到一个针对IE7不错的hack体例就是利用“*+html”,如今用IE7扫瞄一下,应当没有成绩了如今写

5、IE与宽度和高度的成绩
  IE不认得min-这个界说,但实践上它把一般的width和height看成有min的情形来使。如许成绩就年夜了,假如只用宽度和高度,一般的浏览器里这两个值就不会变,假如只用min-width和min-height的话,IE上面基本即是没有设置宽度和高度。好比要设置背景图片,这个宽度是对照主要的。要办理这个成绩,能够如许:

ExampleSourceCode
#box{;80px;height:35px;}
html>body#box{;auto;height:auto;min-80px;min-height:35px;}
6、页面的最小宽度
  min-width是个十分便利的CSS命令,它能够指定元素最小也不克不及小于某个宽度,如许就可以包管排版一向准确。但IE不认得这个,而它实践上把width当作最小宽度来使。为了让这一命令在IE上也能用,能够把一个<div>放到<body>标签下,然后为div指定一个类:
  然后CSS如许计划:

ExampleSourceCode
#container{
min-;600px;
;xpression(document.body.clientWidth<600?“600px”:“auto”);
}
  第一个min-width是一般的;但第2行的width利用了Javascript,这只要IE才认得,这也会让你的HTML文档不太正轨。它实践上经由过程Javascript的判别来完成最小宽度。
7、扫除浮动

ExampleSourceCode
.hackbox{
display:table;
//将工具作为块元素级的表格显现
}
大概
.hackbox{
clear:both;
}
  大概到场:after(伪工具),设置在工具后产生的内容,一般和content共同利用,IE不撑持此伪工具,非Ie扫瞄器撑持,以是其实不影响到IE/WIN扫瞄器。这类的最贫苦的

ExampleSourceCode
……#box:after{
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

破洛洛文章简介:1、针对firefoxie6ie7的css款式:如今年夜部分都是用!important来hack,关于ie6和firefox测试能够一般显现,可是ie7对!important能够准确注释,会招致页面没按请求显现!找到一个针对IE7不错的hack体例就是利用“*+html”,如今用IE7扫瞄一下,应当没有成绩了如今写

8、DIV浮动IE文本发生3象素的bug
  右边工具浮动,右侧接纳外补钉的右边距来定位,右侧工具内的文本会离右边有3px的间距.

ExampleSourceCode
#box{
float:left;
;}
#left{
float:left;
;}
#right{
;
}
*html#left{
margin-right:-3px;
//这句是关头
}
HTML代码
<DIVid=box>
<DIVid=left></DIV>
<DIVid=right></DIV>
</DIV>
9、属性选择器(这个不克不及算是兼容,是埋没css的一个bug)

ExampleSourceCode
p[id]{}div[id]{}
p[id]{}div[id]{}
  这个关于IE6.0和IE6.0以下的版本都埋没,FF和OPera感化
  属性选择器和子选择器仍是有区分的,子选择器的局限从情势来讲减少了,属性选择器的局限对照年夜,如p[id]中,一切p标签中有id的都是一样式的.
10、IE捉迷躲的成绩
  当div使用庞大的时分每一个栏中又有一些链接,DIV等这个时分简单产生捉迷躲的成绩。
  有些内容显现不出来,当鼠标选择这个地区是发明内容的确在页面。
  办理举措:对#layout利用line-height属性大概给#layout利用流动高和宽。页面布局只管复杂。

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
柔情似水 该用户已被删除
沙发
发表于 2015-1-18 06:43:18 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
admin 该用户已被删除
板凳
发表于 2015-1-25 17:36:32 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
兰色精灵 该用户已被删除
地板
发表于 2015-2-3 12:36:45 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
小魔女 该用户已被删除
5#
发表于 2015-2-9 02:29:32 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
变相怪杰 该用户已被删除
6#
发表于 2015-2-26 19:04:26 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
爱飞 该用户已被删除
7#
发表于 2015-3-8 17:07:06 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
若相依 该用户已被删除
8#
发表于 2015-3-16 08:31:49 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
飘灵儿 该用户已被删除
9#
发表于 2015-3-22 22:05:24 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-20 19:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表