前端开发应该知道的几个CSS网页表单布局技巧
发布网友
发布时间：2022-04-21 21:52
共2个回答
懂视网
时间：2022-04-28 15:59
1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：
选择符{属性名:B !important;属性名:A}4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image，而不是list-style-image。
6、IE分不清继承关系和父子关系的差别，全部都是继承关系。
7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序:
Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、<script>没有language这个属性
应该写成这样:
<script type=”text/JavaScript”>
14、标题是标题，标题的文字是标题的文字。
有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
table{border-collapse:collapse;}
td{border:#000 solid 1px;}16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用 在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。
17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
<p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
<!–[if !IE]>Put your commentary in here…<![endif]–>
20、如何用CSS调用外部字体
语法：
@font-face{font-family:name;src:url(url);sRules}取值：
name：字体名称。任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义
21、如何让一个表单中的文本框中的文字垂直居中？
如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。
22、定义A标签要注意的小问题：
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:link时，一定要记得把其它三种状态定义出来！
23、并不是所有样式都要简写：
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。
25、几个常用到的CSS样式：
1）中文字两端对齐：
text-align:justify;text-justify:inter-ideograph;
2）固定宽度汉字截断：
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
3）固定宽度汉字（词）折行：
table-layout:fixed; word-break:break-all;
（IE5以上）FF不能。
4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：
.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）Flash透明：
选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
热心网友
时间：2022-04-28 13:07
在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。
例如，如果我想在我的网站的特定部分的H3标题是红色而不是*，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情况，一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align：center; 。如果想让文本在左右两侧，可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义：
#div1 { display: block; margin: auto; width: anything under 100% }
把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。
4、垂直对齐（对于一行文本）
要使菜单的高度和文本的行高一致，可以这么设置：
.nav li{line-height:50px; height:50px;}
5、悬停效果
这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
这个功能可以让你的h2标签的颜色从黑色变成*。
6、悬停效果过渡
对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
这就使得样式上的改变，可以是从黑色变*的过渡时间是0.5秒，而不是立即变成*。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。
a:link {color: blue; } a:visited {color: red; }
8、轻松调整图像大小以适应
说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：
img {max-width:100%;height:auto;}
这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。
9、父级元素和子元素
如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：
h1 > strong {color:red;}
特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：
.blog,img,.sidebar {border: 1px solid #000;}
