网页页面制做迫不得已了解的几个技能

日期:2020-12-11 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

1、 IE6 下z-index失效。
在CSS中,根据z-index这个特性更改等级,要让z-index起功效有个前提条件,便是元素的position特性要 是relative,absolute或是fixed。
z-index等级越高,內容越应当在上面显示信息。在绝大多数的访问器在绝大多数的状况下,的确这般,可是绵绵不绝对,特别遇到IE6。

1、有关实际效果截图的些必要表明
下面的并不是空话,是以便更非常容易的了解我下面口水横飞的內容。
下列全部結果截图的大情况以下:
1、网页页面上固定不动没动的,1成不会改变的,送豪宅也不容易从良的是1个黑色情况,全透明度40%,基本上满屏显示信息的等级为1的肯定精准定位层。HTML为:
<div></div>
对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
功效是以便让等级关联1目了然。看:
这表明內容在z-index为1的肯定精准定位层之下。

这表明內容在z-index为1的肯定精准定位层之上。
2、网页页面上做比照的是漂亮美女照片,照片在半全透明黑色肯定精准定位层的上面還是下面很非常容易鉴别,这样,您就可以够对我所说的z-index不起功效有很直观的了解了。
2、IE6的埋怨:波动让我沉溺
如今刚开始真实的讲述难题的造成,缘故和处理了。最先讲讲第1种z-index不管设定多高都不起功效状况。这类状况产生的标准有3个:1、父标识 position特性为relative;2、难题标识无position特性(不包含static);3、难题标识含有波动(float)特性。
您能够拿下面的编码自身做个简易检测:
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.jb51.net/image/study/s/s256/mm2.jpg" />
</div>
丫的,这z-index都9999了,等级够高吧,可是,看下面的图:

这1比照就了解难题了,将会有人会疑惑,这会不容易是IE6的relative自身发烧感冒了,而并不是波动(float)携带了“甲流病毒感染”。好,我如今去掉波动,HTML编码以下:
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm2.jpg" />
</div>
結果IE6下:
我想,难题应当都清晰了,至于缘故,我最初认为是haslayout搞的鬼,后来,用zoom1检测,发现并不是(IE7下无此bug也证实并不是 haslayout的缘故),好像便是这个float会让z-index无效。因为将外界div的position:relative特性改成 absolute能够处理这1难题,我就怀疑是否波动让relative产生了些转变,float与relative在水平精准定位上能够说是近亲,会不容易 是由于这二者搅和在1起因此甚么“畸型”“体弱多病”就出現了。这仅是我的猜想罢了,真实的缘故還是去问IE6的后妈吧。
处理方式,处理方式有3,1、position:relative改成position:absolute;2、除去波动;3、波动元素加上position特性(如relative,absolute等)。
3、固执己见的IE6:它只认第1个爸爸
将会很多人了解,这IE6下,等级的高矮不但要看自身,还要看自身的老爸这个后台管理是不是够硬。用术语实际叙述为:
父标识position特性为relative或absolute时,子标识的absolute特性是相对父标识而言的。而在IE6下,等级的主要表现有时并不是看子标识的z-index多高,而要看它们的父标识的z-index谁高谁低。
有1定工作经验的人将会都了解上面的客观事实。可是,坚信这里边许多人不了解道IE6下,决策等级高矮的并不是当今的父标识,而是全部DOM tree(连接点树)的第1个relative特性的父标识。有时平常大家多解决1个父标识,z-index等级多而繁杂的状况很少见,因此免不了会有了解上 的小小的误差。
好,下面展现这个bug。
标准很简易,要是肯定精准定位的第1个元素的第1个爸爸,或说是最老的那个爸爸级別的人的relative特性小于黑色半全透明层的z-index等级。比如下面的HTML编码:
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
能够看到,mm3照片的父标识div 是肯定精准定位,等级9999,比1大多数了,肯定精准定位的父标识等级1000(10000也1样),也比黑色半全透明层的z-index:1大多数了,可是,大家可伶的IE6童鞋——
再看看以Firefox为意味着的别的童鞋:
IE7与IE6拥有一样的bug,缘故很简易,尽管照片所属div当今的老爸等级很高(1000),可是因为老爸的老爸不管用,可伶了9999这般强势的孩子沒有左右之日啊!
了解缘故处理就很轻轻松松了,给第1任老爸加上z-index后的HTML编码以下:
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
結果IE6童鞋喜不自胜,春色璀璨:

2、css reset中的list-style:none
在平常工作中中常常必须对ul,li开展css reset ,将目录标记掩藏.最常见的写法便是Ul,li,ol{list-style:none;}(也是有人用ul,li,ol{list-style-type:none;})
<!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⑻" />
<meta content="fanfan,xiangrui09" />
<title>普遍的用法</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
这个网页页面在IE6,7,8,FF中都没甚么难题.
可是大家不可以忽视的是,list-style: 包括了3个特性: list-style-type,list-style-position,list-style-img
假如不留意这3个特性的话,list-style有时就会出来捣乱
例如当ul,波动后,必须display:inline 来处理在IE6中的双倍边距难题时,怪异的事儿产生了:
<!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⑻" />
<meta content="fanfan,xiangrui09" />
<title>怪异的事儿产生了</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
</body>
</html>

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
上面的网页页面在ie8,ff中依然一切正常
可是在IE6,7中,ul里侧与li造成了间距.
不难看出,当大家界定了list-style:none之后,虽然目录符其实不出現,可是在IE6,7中,依然留有它的部位.
看看在FF里这个UL究竟有着哪些特性

图上可见,当css中界定list-style:none时,对list-style-position 并沒有危害,依然是FF访问器的默认设置设定,值为outside
而IE6,7中极可能默认设置list-style-position:inside
以便确认这1点,我把list-style:none 换为list-style:none inside none再检测了1下
<!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⑻" />
<meta content="fanfan,xiangrui09" />
<title>强制性inside</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
<p>强制性inside list-style:none inside none;</p>
<ul>
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
</body>
</html>

运作后能够发现,在IE6,7中,与list-style:none的主要表现1模1样.
因此我推断在IE6,7中当UL具备float:left和display:inline特性后,设定了list-style:none,则list-style-position也默认设置为inside了;
因此我得出的总结是
在IE6,7下,当UL不具备float:left;display:inline;时:
不管有木有list-style:none这个特性,目录符都被掩藏,不占部位(下面编码中的5,6)
当UL具备float:left;display:inline;特性时
list-style:none,目录符被掩藏,可是依然留有部位(list-style-position:inside);(下面编码中的 UL1,ul3)
未设定list-style:none;目录符被掩藏,也不占位(list-style-position:outside)(编码UL4)
而UL02 在参加检测的各访问器中主要表现都较为理想化
最终这1段编码比照1下各种各样状况下list-style的主要表现,特别留意4,5,6在IE6,7下的主要表现
<!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⑻" />
<title>list-style:none還是list-style:none outside none;</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none outside none;}
.ul03,.ul03 li{list-style:none inside none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</style>
</head>
<body>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;未做css reset</p>
<ul class="ul04">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
<div>
<p>5: 无 display,float特性 list-style为none;</p>
<ul class="ul05">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
<div>
<p>6: 无 display,float特性 无list-style:none;</p>
<ul class="ul06">
<li><a href="#">纯净的文本 奇特的美好 奔流的观念</a></li>
<li><a href="#">就像对感情1样 规定是近乎完善的</a></li>
<li><a href="#">校园内里淡淡的青春年少 单纯性的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
根据上面编码主要表现結果的比照,我觉得:
在firefox中要是list-style-type为none ,则不管list-stype-position的值为outside或inside , list-style都能很好的被掩藏
而在IE6,7中,仅设定list-style:none,其实不足以处理全部难题
因此我觉得在css reset的情况下应用 list-style:none outside none 更好
3、CSS强制性不换行
在1个要求宽度尺寸的ul里面 我把li的宽度界定为全自动。妄图让li依据內容长度来全自动向左对齐排序。
比如宽度为210px的ul里 各自有4个li 这个4个li的宽度依据它们的本身內容长度为80px、120px、140px、80px。
我必须的实际效果是4个li向左全自动排序。当第3个li和前两个li的长度之和超过ul的宽度情况下 第3个li则会下移1行。在第2行显示信息。而并不是把ul撑宽,或是把自身撑高(內容换行,高宽比提升)
各自界定了ul的宽度210px和li的宽度全自动,发现結果是:
ul并沒有被撑宽,可是li也沒有全自动到下1样排序。而是內容换行,把li给撑高了。随后死缠烂打的挤在了第1行。。
细心考虑到过以后觉得难题出在li內部內容换行上。因而找寻严禁换行的css特性。
处理方式:
给li加white-space:nowrap强制性不换行特性。