扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >网页制作不得不知道的技巧有什么
  • 795

0
分享到

网页制作不得不知道的技巧有什么

2023-06-08 07:06:12 795人浏览 八月长安
摘要

今天就跟大家聊聊有关网页制作不得不知道的技巧有什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一、 IE6 下z-index无效。 在CSS中，通过z-index这个属性改变层级，

今天就跟大家聊聊有关网页制作不得不知道的技巧有什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

一、 IE6 下z-index无效。
在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要 是relative，absolute或是fixed。
z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。

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;}
作用是为了让层级关系一目了然。看：
这说明内容在z-index为1的绝对定位层之下。

这说明内容在z-index为1的绝对定位层之上。
2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z-index不起作用有很直观的认识了。
2、IE6的抱怨：浮动让我沉沦
现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。
您可以拿下面的代码自己做个简单测试：
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="https://file.lsjlt.com/upload/202306/07/yevtyogmdq2.jpg" />
</div>
丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：
<div></div>
<div style="position:relative; z-index:9999;">
<img src="Https://file.lsjlt.com/upload/202306/07/yevtyogmdq2.jpg" />
</div>
结果IE6下：
我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会 是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。
解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。
3、固执的IE6：它只认第一个爸爸
可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。
有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上 的小小偏差。
好，下面展示这个bug。
条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的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="https://file.lsjlt.com/upload/202306/07/nru55gfy3sa.jpg" />
</div>
</div>
</div>
可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋&mdash;&mdash;
再看看以Firefox为代表的其他童鞋：
IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！
知道原因解决就很轻松了，给第一任老爸添加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="https://file.lsjlt.com/upload/202306/07/nru55gfy3sa.jpg" />
</div>
</div>
</div>
结果IE6童鞋喜笑颜开，春光灿烂：

二、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-8" />
<meta content="fanfan,xiangrui09@qq.com" />
<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="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
这个页面在IE6,7,8,FF中都没什么问题.
但是我们不能忽略的是,list-style: 包含了三个属性: list-style-type，list-style-position，list-style-img
如果不注意这三个属性的话,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-8" />
<meta content="fanfan,xiangrui09@qq.com" />
<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="#">就像对爱情一样 要求是近乎完美的</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
为了证实这一点,我把list-style:none 换为list-style:none inside 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-8" />
<meta content="fanfan,xiangrui09@qq.com" />
<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="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
</ul>
</div>
</body>
</html>

运行后可以发现,在IE6,7中,与list-style:none的表现一模一样.
所以我推测在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 在参与测试的各浏览器中表现都比较理想
最后这一段代码对比一下各种情况下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-8" />
<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="#">就像对爱情一样 要求是近乎完美的</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="#">就像对爱情一样 要求是近乎完美的</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="#">就像对爱情一样 要求是近乎完美的</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="#">就像对爱情一样 要求是近乎完美的</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="#">就像对爱情一样 要求是近乎完美的</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="#">就像对爱情一样 要求是近乎完美的</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 更好
三、CSS强制不换行
在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。
我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行。在第二行显示。而不是把ul撑宽，或者是把自己撑高（内容换行，高度增加）
分别定义了ul的宽度210px和li的宽度自动，发现结果是：
ul并没有被撑宽，可惜li也没有自动到下一样排列。而是内容换行，把li给撑高了。然后死皮赖脸的挤在了第一行。。
仔细考虑过之后认为问题出在li内部内容换行上。于是寻找禁止换行的css属性。
解决方法：
给li加white-space:nowrap强制不换行属性。

看完上述内容，你们对网页制作不得不知道的技巧有什么有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。

--结束END--

本文标题: 网页制作不得不知道的技巧有什么

本文链接: https://lsjlt.com/news/252436.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 网页制作不得不知道的技巧有什么
    今天就跟大家聊聊有关网页制作不得不知道的技巧有什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一、 IE6 下z-index无效。 在CSS中，通过z-index这个属性改变层级，...
    99+
    2023-06-08
  • 你可能不知道的CSS技巧有哪些
    这篇文章给大家介绍你可能不知道的CSS技巧有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。 1.box-sizing:border-box 设置此属性后...
    99+
    2024-04-02
  • Dreamweaver网页的制作技巧
    本篇内容主要讲解“Dreamweaver网页的制作技巧”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Dreamweaver网页的制作技巧”吧!　　1）怎样将 Dreamweaver 集成到 IE...
    99+
    2023-06-08
  • 接口面试不得不知的Java打包技巧！
    Java作为一种高级编程语言，已经成为了很多企业和开发者的首选语言。在Java开发中，我们经常会使用到各种接口，而接口的打包是非常关键的一步。本文将介绍一些Java打包的技巧，帮助你在接口面试中脱颖而出。 一、什么是Java打包？ Java...
    99+
    2023-08-18
    接口 面试 打包
  • Dreamweaver网页制作的技巧有哪些
    小编给大家分享一下Dreamweaver网页制作的技巧有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1）怎样将 Dreamweaver 集成到 IE 浏览器...
    99+
    2023-06-08
  • Dreamweaver制作网页的技巧有哪些
    这篇文章主要介绍了Dreamweaver制作网页的技巧有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。　　1、灵活运用样式　　熟悉网页设计的网友就知道，调用Style的方...
    99+
    2023-06-08
  • FrontPage制作网页的技巧有哪些
    这篇文章主要介绍“FrontPage制作网页的技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“FrontPage制作网页的技巧有哪些”文章能帮助大家解决问题。　　用表格做按钮　　很多人为了做...
    99+
    2023-06-08
  • Linux Bash 中 PHP 数组的使用方法：您不得不知道的几个技巧。
    Linux Bash 中 PHP 数组的使用方法：您不得不知道的几个技巧 在 PHP 中，数组是一种非常常见且重要的数据类型。在 Linux Bash 中，也可以使用 PHP 数组来进行各种操作。本文将为您介绍一些在 Linux Bash ...
    99+
    2023-11-02
    数组 linux bash
  • 你一定不知道的Win8小技巧
    　　Win8.1上市也有些时日了，各种应用小技巧也被挖掘得差不多了。不过对于这种内涵博大的操作系统而言，偶尔冒出一两个“未知秘密”绝对不是新鲜事儿。比如说今天要跟大家介绍的这三条技巧...
    99+
    2022-06-04
    你一定 小技巧
  • web网页制作的小技巧有哪些
    这篇文章主要介绍了web网页制作的小技巧有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。总结如下：一、box-sizing：允许以特定的方式去定义匹配某个区域的特定元素。...
    99+
    2023-06-08
  • 你不知道的16条JavaScript调试技巧分别是什么
    你不知道的16条JavaScript调试技巧分别是什么，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。JavaScript调试是业内公认的难...
    99+
    2024-04-02
  • 你可能不知道的typescript实用小技巧
    目录前言函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, RecordExclude, Omit ReturnType 类型...
    99+
    2024-04-02
  • JavaScript中的编程算法：有哪些你不知道的技巧？
    JavaScript是一门广泛应用于网页开发的编程语言。它可以用来实现各种功能，从简单的表单验证到复杂的交互式动画。在使用JavaScript开发时，编程算法是非常重要的一部分。在本篇文章中，我们将介绍一些你可能不知道的JavaScript...
    99+
    2023-08-12
    git 编程算法 javascript
  • Dreamweaver中制作网页的实用技巧有哪些
    这篇文章给大家分享的是有关Dreamweaver中制作网页的实用技巧有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1、灵活运用样式　　熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键...
    99+
    2023-06-08
  • Dreamweaver下CSS制作网页的技巧分享
    本篇内容主要讲解“Dreamweaver下CSS制作网页的技巧分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Dreamweaver下CSS制作网页的技巧分享”吧!了解 CSS 　　层叠样式表...
    99+
    2023-06-08
  • 简单的这些不为人知的小技巧你都知道吗？
    　　随着科技的发展，手机在生活越来越重要，微信渐渐成为我们生活中沟通的重要媒介。现在很多的中老年人也开始使用微信了，但是微信上有很多功能，他们都不会使用，如果我们不在他们的身边，他们又想使用微信的话，那...
    99+
    2024-04-02
  • 你所不知道的Python奇技淫巧13招【实用】
    有时候你会看到很Cool的Python代码，你惊讶于它的简洁，它的优雅，你不由自主地赞叹：竟然还能这样写。其实，这些优雅的代码都要归功于Python的特性，只要你能掌握这些Pythonic的技巧，你一样可以...
    99+
    2022-06-04
    奇技淫巧 你所 Python
  • 网页制作中关于代码的小技巧有哪些
    这篇文章主要为大家展示了“网页制作中关于代码的小技巧有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“网页制作中关于代码的小技巧有哪些”这篇文章吧。1、xml...
    99+
    2024-04-02
  • 网站维护页面的列表制作技巧有哪些
    这篇文章主要为大家展示了“网站维护页面的列表制作技巧有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“网站维护页面的列表制作技巧有哪些”这篇文章吧。1. 保持你的维护页面简单而又用维护页面的全...
    99+
    2023-06-08
  • ASP 日志记录的秘密：你所不知道的技巧
    作为一名有经验的 ASP 开发人员，您可能已经熟悉了 ASP 日志记录的基础知识，知道如何记录错误消息并使用它们来调试您的应用程序。但是，您是否知道 ASP 日志记录还包含了许多鲜为人知的技巧，可以帮助您更有效地进行调试和故障排除？ 1....
    99+
    2024-02-10
    ASP 日志记录 技巧 调试 故障排除
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作