仓酷云

标题: CSS教程之IE7和FF扫瞄器中右下角图片告白 [打印本页]

作者: 山那边是海    时间: 2015-1-15 23:55
标题: CSS教程之IE7和FF扫瞄器中右下角图片告白
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
网页制造poluoluo文章简介:互联网供应了良多种“将告白一直定位到网页右下角”的办理计划,年夜多会用到javascript,实在仅挪用款式表就能够完成该效果。
互联网供应了良多种“将告白一直定位到网页右下角”的办理计划,年夜多会用到javascript,实在仅挪用款式表就能够完成该效果。
以下万恶的代码次要是写给IE6的,在IE7和FF扫瞄器中,只必要position:fixed就能够将图层界说到网页的恣意地位。
相干款式:
演示页面:
<!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>
[Ctrl+A全体选择提醒:你可先修正部分代码,再按运转]
需要元素:
DOCTYPE声明、html标签、body标签、一个ID为test的div。

那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
作者: 谁可相欹    时间: 2015-1-17 23:50
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者: 柔情似水    时间: 2015-1-25 16:36
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
作者: 仓酷云    时间: 2015-2-3 11:43
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
作者: 第二个灵魂    时间: 2015-2-8 21:55
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
作者: 再见西城    时间: 2015-2-26 12:01
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
作者: 飘飘悠悠    时间: 2015-3-8 15:05
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者: 活着的死人    时间: 2015-3-16 03:46
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
作者: 乐观    时间: 2015-3-22 20:10
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.




欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2