搜尋
首頁web前端html教學总结写DIV+CSS时常见的小问题_html/css_WEB-ITnose

  1. ul和li属性的问题

  默认的ul的内外补丁(margin、padding)都不是0,如果在li中用到的左漂浮属性(float:left;)时往往会把外部div撑大,导致页面变形,而且在ie6里,第一个li会有一个小小的缩进值,最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可(margin:0;padding:0;),而解决第一个li有缩进值时则应该定义li为块状显示(display:inline;)即可

2. img属性的问题

  这里牵涉的不同浏览器的问题,ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值,会多出下面的2px的误差,解决方法是给img定义一个显示属性:img{float:left;}即可

3. overflow属性的问题

  此属性用的最多的地方就是文本域、注册协议等,因为文字篇幅比较大,但又不想占用大的页面篇幅,这里就可以定义好层的宽度和高度值,然后加上overflow:auto;属性。

4. float属性问题

  有时会在水平方向上漂浮2个或2个以上的div层,都使用了float:left;属性,最终导致下面的层会漂浮到该水平方向上来,导致页面显示非常混乱,不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎,解决以上问题方法有二,第一是将这几个漂浮的层的父级层定义clear:both;属性;第二是将这几个层的宽度值加起来的值等于父级元素的宽度值,这样下面的层自然不会漂上来。

5. height值不统一

  当height为1px时,在ie6中可能并不是1px而是超过1px,怎么解决呢?方法有两种,第一种是直接将该div层里的字号设为1px就可以了(font-size:1px;),第二种方法是在该div层里设置行高即可(line-height:1px;),但这里需要提醒下,在ie6里该层不能为空,可以写一个空格字符( )即可。 

6. css编码问题

  很多人写页面的时候习惯通过dw软件来创建一个html页面,但往往又忽略了其默认编码格式的设置,最终导致页面显示乱码。@charset "utf-8"注意这行代码,utf-8与gb2312是比较常用的两种编码方式,选择与之匹配的编码格式,避免出现乱码。

7. 关于选择器的选择(class和id)问题

  当一个div要在页面中多次使用时,不要用id,要用class,还有就是要用引用js的时候,样式最好不要用id,因为id要留给js使用,当程序员写后台用的是.net时,最好不要用id,id要留给程序员用,前台我们就用class好了。

8. div层高度自动扩展问题

  就是div层的结构很复杂,用了至少2个以上的div层,在定义好最小高及高度为自动,但最后超过层高度后导致在ff中显示为高度不自动扩展,解决ff不兼容方法很简单,只要加上:overflow:hiiden;即可。

9. 常用的兼容属性写法问题

  这里具体实例不列出了,估计长篇大论的也没问会看,我就把常用到的兼容性属性列出来,具体灵活运用就靠自己啦!建议定义属性时书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。

  ①!important属性只对ff生效,如:width:200px!important;width:100px;则ff里宽度显示为200px

  ②带“_”的属性只对ie6生效,如:color:red;_color:blue;则ie6里字体颜色为blue

  ③带“+”的属性只对ie7生效,写法如上

  ④ff什么都不识别,但样式中加上上述小符号,则优先对特定浏览器生效,例如css定义为:color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色,ie7显示为蓝色,ie6显示为红色

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

HTML:建立網頁的結構HTML:建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站:HTML的力量從文本到網站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。

了解HTML,CSS和JavaScript:初學者指南了解HTML,CSS和JavaScript:初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)