DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> web前端技巧整理(個人實戰經驗)
web前端技巧整理(個人實戰經驗)
編輯:前端技巧     
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;--------------消失後占位置。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved