web前端技巧整理(个人实战经验)

所属分类: 网页制作 / 应用技巧 阅读数: 1124
收藏 0 赞 0 分享
1.今天在做一个页面的时候碰到了箭头居中的效果:由于想实现点击区域很大所以用了padding-top:23%。但是在计算23%的时候出现了问题,经过研究发现:padding-top的百分比是根据期父元素的width而不是height来计算的,很奇怪吧?哪位大牛能给解释下。
2.某个层加了浮动后又加margin后在ie6下一定会出现双倍边距。----------解决方法是display:inline;(虽然知道,但是每次都忘)。
3.左侧定宽右侧自适应+左右定宽中间自适应的框架一定要会运用,很多时候都会运用上,

demo1(左侧定右侧自适应):

复制代码
代码如下:

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!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=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

demo2(左右定中间自适应):

复制代码
代码如下:

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!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=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

4.在ie6下插入图片时候用img标签会有img下会有几个像素的空白会导致你跟设计稿做的东西不一样(会被主管火眼看出来然后挨骂)---解决办法是将img变成块级元素;display:block;
5.让文本在块内垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二个比第一个好用,具体我也不知道为什么。
6.a标签的lvha不是很常用,但是一定会用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截断不换行貌似很常用(这几天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(换行为:word-wrap:break-word;)
8.清除浮动的方法很多,这几天主要用的三种:1)clear:both;2)overflow:hidden;3).我的指导人最爱用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠标手势有的时候在ie下会消失,这个情况这两天也出现过几次。----------------解决办法是corsor:pointer;(注意不能是hand--指导人特别提醒)
10.定义一个只有2像素的高度的容器的时候在ie6下会有bug--解决方法是将各种属性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下会不起作用---解决办法是_width:*;(上个周遇到过这个问题)
12.!important 规则--以前从来没用过这个属性,直到前天主管看我的代码时候提醒我在一个页面响应式的时候后来的width会覆盖本身的width:100%;所以要加width:100%!important;
13.清除浮动非常非常重要---比如有的时候容器无法自适应高度你就要用到它的!!!
14.点击文字的时候也会点击上单选框或者复选框了比如csdn的这个功能: 方法是用lable包住单选框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多