首页
营销站
手机站
电商
公众号
小程序
APP
响应式
案例
技术创投
全网
新闻
联系
热门关键词:
营销型网站建设
全网营销网站
手机网站
微信网站
高端品牌设计网站
写给经常使用div+css的朋友的建议
2014-06-25 来源: 卓杰科技(www.zhuojie.net) 浏览: 182次
1,ul方面的问题:默认的ul的margin和padding不是0,如果在导航中用到了左浮动的li,往往会把外部的div撑大,导致页面变形,这就需要我们在写代码的时候不要忘记 ul{margin:0px; padding:0px;} 2,img方面的问题:这里牵涉的不同浏览器的问题,ie6是一直让网页设计师最头疼的一个问题,关于图片,这里有一个小小的问题,有时ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这一点 img{ display:block} 3,overflow方面问题:有时我们会看到,一些公司的注册协议都是好长好长的,但又不能把页面拉的太长,这就用到了overflow,我们可以把div的style里加上这个:overflow:auto 4,小窗口弹出的问题:当我们点击某个按钮,可能会看到一个小窗口弹出,而窗口其它的部分都变了灰色,这是怎么实现的呢,其实很简单div+css就可以实现: css部分: .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=50); } .white_content { display: none; position: absolute; top:20%; left: 30%; width:outo; background-color: white; z-index: 1002; overflow: auto; } .white_content2 { display: none; position: absolute; top: 20%; left: 18%; width:896px; background-color: white; z-index: 1002; overflow: auto; text-align: center; } .qpshcom { background-color: #efefef; color: #666666; border-width: 1px; border-color: #cccccc; border-style: solid; margin: 6px; padding: 6px; font-size: 14px; line-height: 200%; float: midden; } div部分: 打开按钮部分:onclick="document.getElementById ('light').style.display='block';document.getElementById('fade').style.display='block'" 关闭按钮部分:onclick="document.getElementById ('light').style.display='none';document.getElementById('fade').style.display='none'" 4,关于float的问题:有时候一些div会挤到页面的上方,把页面挤破掉,这里可能就是浮动引起的,这时候我们就用到了这个:clear:both,很不错的解决方法,不妨一试。 5,height等于1px的div,在ie6中可能并不是1px,那怎么解决呢?不妨试一下:在这个div的style里加上font-size:1px;这样就ok了。 6,下面再说一下id和class的问题:当一个div要在页面中多次使用时,不要用id,要用class,还有就是要用引用js的时候,样式最好不要用id,因为id要留给js使用,当程序员写后台用的是.net时,最好不用id,id要留给程序员用,前台我们就用class好了。 7,还是img问题,页面中最好不要用大块背景,能平铺的要平铺,否则加载起来会很慢,也不利于以后的优化和扩展,当然也有些大的网站,现在都尽量把背景统一放到一张图片上,用background-postion来取得背景,这样其实也好,背景虽然大了点,但只需统一加载一次,就ok了,速度也不会太慢,可以好好学习一下。 8,img的格式问题:最好的格式就是gif格式,即确保了背景透明,在ie6中又不会有阴影,有时gif图片会有锯齿,这就需要我们保存成web 格式,设置一下matter,matter的值用背景颜色的值越相近越好。(当然有时迫不得已png的图片也会用到,这时就需要另外想办法了,前面我也曾提到过,大家不妨一看) 9,链接问题: .link:link{} .link:visited{} .link:hover{} .link:active{} 有一点,visited与hover的顺序一定不能倒换,否则ie6中会大大的问题。 10,css编码问题:@charset "utf-8";注意这行代码,utf-8与g把gb2312是比较常用的两种编码方式。
在线咨询
020-89202380
0
请您留言
广州市卓杰计算机科技有限公司18026293501刘小姐(微信同号)
提交
感谢留言
我们会尽快与您联系
关闭