CSS教程之IE7和FF扫瞄器中右下角图片告白
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。网页制造poluoluo文章简介:互联网供应了良多种“将告白一直定位到网页右下角”的办理计划,年夜多会用到javascript,实在仅挪用款式表就能够完成该效果。
互联网供应了良多种“将告白一直定位到网页右下角”的办理计划,年夜多会用到javascript,实在仅挪用款式表就能够完成该效果。
以下万恶的代码次要是写给IE6的,在IE7和FF扫瞄器中,只必要position:fixed就能够将图层界说到网页的恣意地位。
相干款式:
[*]body{margin:0;border:0;height:100%;overflow-y:auto;}
[*]#test{display:block;bottom:3px;right:3px;width:130px;position:fixed;}
[*]/*以下是写给IE6的*/
[*]*html#test{position:absolute;right:18px}
[*]*html{overflow-x:auto;overflow-y:hidden;}
演示页面:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css">body{margin:0;border:0;height:100%;overflow-y:auto;}#test{display:block;bottom:3px;right:3px;position:fixed;}*html#test{position:absolute;right:18px}*html{overflow-x:auto;overflow-y:hidden;}</style><title>FixedlayerinMSIE.position:fixed;poluoluo.com</title></head><body><div><div><h1>FixedlayerinMSIE</h1><p>ThisisasimulationofCSS"position:fixed"forMSIE.Themaintextonthispageiscontainedina100%high,scrollable<div>.Thescrollbarbelongstothe<div>,nottothe<body>.Theordinary<body>contentisfoundinthefixedgreenbox.AllHTMLandCSSonthispageshouldfollowtheW3Cspecexceptoverflow-y:hidden,whichisusedforcosmeticalpurposesinearlierIEversions.</p><h2>Browsersupport</h2><p>ThebrowserslistedbelowarethoseIhavetestedinsofar.Idontknowhowotherbrowserswillbehave.Becauseofthe<strong>problemsinOpera7.10</strong>IrecommendusingConditionalComments(section3,exampleA),whichhidesCSSfromallbrowsersexceptMSIE5+.OtherbrowserslikeMozillaandOperamayuseCSSposition:fixedinstead(thatshowIvedoneitonthispage).</p><p>NotethatifyouhidepartsoftheCSSfromnon-MSIEbrowsers(likeonthispage)thedetailsaboutnon-MSIEbrowsersbelowdonotapply.</p><h3>Supportingbrowsers</h3><ul><li>MSIE4.72/win</li><li>MSIE5.0/win</li><li>MSIE6.0</li><li>Netscape6.1+</li><li>Mozilla</li><li>Opera7.0</li><li>Opera7.11(<strong>not7.10</strong>)</li></ul><h3>Non-supportingbrowsers</h3><ul><li>Netscape4.x(degradesgracefully)</li><li>MSIE4/mac</li><li>MSIE5/mac(notsureaboutthedetails)</li><li>Opera6.0(degradesgracefully)</li><li><strong>Opera7.10(freezes)</strong></li></ul><h3>Generalproblems</h3><ul><li>InIE5andIE6/quirkmodedoublescrollbarswillappearunlessoneaddsthenon-standardCSSoverflow-y:hiddenproperty.</li><li>Contentmustbecontainedineitherthescrollableorthefixed<div>,notoutsideanyofthem.</li><li>Ifyouapplymarginorpaddingtodiv#fixedcontent,Mozillaaddsthistothe100%heightandwidthwhichresultsindoublescrollbars.BecauseofthatIhavenestedadiv#innerboxandapplythepaddingtothatinstead.ThisdoesnotseemnecessaryforMSIE6.</li><li>ThescrollingcontentmustbeabsolutelypositionedforOpera7.</li><li>Thefixedcontentcanobscureothercontent,andcanitselfeasilybecomeobscuredinsmallbrowserwindows.</li></ul><p></p><h2>position:fixedinIE</h2><p>SincetheprojectIwasworkingonforQ42togetherwithSjoerdhadtowaitalittlewethoughtitwouldbeagoodideatoupdatethesiteoftheir<abbr>WYSIWYG</abbr><abbr>XML</abbr>Editor,Xopus.Therearestillafewminormistakesonthesite(validatingandallthat),butthosedonotmakethesiteinaccessibleorso.Wealsocouldnotuse<abbr>UTF-8</abbr>(learnabout<abbr>UTF-8</abbr>,leerover<abbr>UTF-8</abbr>)becausethecurrenthttpd.conffiledidnotallowspecifyinga.htaccessandmodyfyingtheserverconfigurationfilewasnotconsideredtobeagoodidea(andnobodywhowasaroundwassureifwewerejustallowedtoreadit,orifwecouldoverwriteaswell)justbeforetheweekend.Iguessthosethingswillbefixedeventually.(Obviously,thesameistrueforputtingmod_negotationtowork.)</p><p>Anyway,thecoolthingoftheoriginalsitewasthefixedtopandbottom.Itwasdonewithsomescriptingthatdidnotworkcrossbrowser.InMozillayoucouldnotscrollandinSafarithecontentwasnotshown.AlthoughXopusisaproductjustforInternetExplorerthankstonotsupportingof(forexample)contentEditable="true"inothersthewebsitecouldatleastbemadeaccessiblesopeopleusingotherbrowserthenInternetExplorercouldcheckwhattheproductisabout.</p><p>However,emulatingposition:fixedwasrathertricky.IfirstthoughtofusingsomefixedpositioningtechniqueIdevelopedagesago,butdidnotquiteemulatetheintentedeffect.(InInternetExploreritlookslikeyouareusingframes,whichisnotwhatwewanted.)Therearesomeexamplesontheinternetbutmostmadethefixedelement"flicker".Youcanseethathere.Ofcourse,youwantbetter;position:fixedinIE.AlthoughthereareworkaroundsforInternetExplorer6.0instandardsmode,justusequirks.Itissomucheasier,especiallyifyouhavetocopewithInternetExplorer5.5(andeven5.0)aswell.</p><p>Thedifferencebetweenthetwofilesisbackground:url(foo)fixed.Althoughtheexistenceofthefilefooisnotreallyneeded,makesurefooissomezerobytefiletopreventstupid404requests.Youmightthinkthereferencetofooisnotneededatallandyoucanjustwritebackground-attachment:fixed.Unfortunately,thatisincorrect.InternetExplorerprobablyrunsabitdifferentwhenthissettingisset.</p><p>Allotherthingsareprettyclear,Ihope.Havefun.</p><p></p></div></div><divid="test"><imgsrc="/files/090701/1_080301.jpg"/></div></body></html>
需要元素:
DOCTYPE声明、html标签、body标签、一个ID为test的div。
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。 直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
页:
[1]