CSS控制最小宽度CSScontrolsminimumwidth.docx

上传人:b****5 文档编号:4437387 上传时间:2022-12-01 格式:DOCX 页数:9 大小:22.08KB
下载 相关 举报
CSS控制最小宽度CSScontrolsminimumwidth.docx_第1页
第1页 / 共9页
CSS控制最小宽度CSScontrolsminimumwidth.docx_第2页
第2页 / 共9页
CSS控制最小宽度CSScontrolsminimumwidth.docx_第3页
第3页 / 共9页
CSS控制最小宽度CSScontrolsminimumwidth.docx_第4页
第4页 / 共9页
CSS控制最小宽度CSScontrolsminimumwidth.docx_第5页
第5页 / 共9页
点击查看更多>>
下载资源
资源描述

CSS控制最小宽度CSScontrolsminimumwidth.docx

《CSS控制最小宽度CSScontrolsminimumwidth.docx》由会员分享,可在线阅读,更多相关《CSS控制最小宽度CSScontrolsminimumwidth.docx(9页珍藏版)》请在冰豆网上搜索。

CSS控制最小宽度CSScontrolsminimumwidth.docx

CSS控制最小宽度CSScontrolsminimumwidth

CSS控制最小宽度(CSScontrolsminimumwidth)

CSS控制最小宽度(CSScontrolsminimumwidth)CSS控制最小宽度(即与MozillaFirefox都好使)

可以使用CSS属性:

最小宽度。

但是,即不认。

谷歌找到一个文章,讲解了如何纯用CSS解决这个问题。

方法是配合使用最小宽度和仅IE认的例子动态特性:

最小宽度:

785px;

宽度:

表达(document.body.clientwidth,800,”785px”:

“100%”);

这个东西真的不错,我喜欢,哈哈

高度最小值

箱{

最小高度:

100px;/**/高度最小值设置为:

100px

高度:

自动~重要的;/*兼容FF,IE7也支持~重要的标签*/

身高:

100px;/**/兼容IE6

溢出:

可见;

}

DIV+CSS的30条进阶技能

许许多多的网页新手正徘徊在专业编码的门槛前,而网上的教程参差

不齐,鱼龙混杂,很容易让新手迷茫。

这里总结了30条网页编码的”秘技”,只要在编码过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。

1。

一定要闭合标签

在以往的页面源代码里,经常看到这样的语句:

这里有些文字。

这里有些新文字。

你明白了吗,。

也许过去我们可以容忍这样的非闭合标签,但在今天的标准来看,这是非常不可取的,是必须百分百避免的。

一定要注意闭合你的标签,否则将无法通过验证,并且容易出现一些难以预见的问题。

最好使用这样的形式:

    这里有些文字。

    这里有些新文字。

    你明白了吗,。

    <>

    2。

    声明正确的文档类型(DOCTYPE)

    笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:

    1。

    验证CSS文件,解决所有可见的错误

    2。

    加上文档类型DOCTYPE

    DOCTYPEhtml标签出现之前定义在,它告诉浏览器这个页面包含的是HTML、XHTML,

    还是两者混合出现,这样浏览器才能正确的解析标记。

    通常有四种文档类型可供选择:

    <~DOCTYPEhtmlPUBLIC“-////DTDW3CHTML4.01/EN”HTTP:

    //两。

    org/TR/HTML4/严格的DTD”>

    <~DOCTYPEhtmlPUBLIC“-////W3CHTML4.01DTD的过渡/EN”HTTP:

    //两。

    org/TR/HTML4/松。

    DTD”>

    <~DOCTYPEhtmlPUBLIC“-////W3CDTDXHTML1过渡/EN”HTTP:

    //两。

    org/TR/xhtml1/DTD/xhtml1过渡。

    DTD”>

    <~DOCTYPEhtmlPUBLIC“-////W3CDTDXHTML1严格/EN”HTTP:

    //两。

    org/TR/xhtml1/DTD/xhtml1严格。

    DTD”>

    关于该使用什么样的文档类型声明,一直有不同的说法。

    通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准。

    选择声明的底线是,它是不是真的适合你,所以你要综合考虑来选择适合你

    得项目的声明。

    三.不要使用嵌入式CSS样式

    当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式CSS

    代码,就象这样:

    red;">Oncodingcodingcamp

    Itseemsconvenientandnoproblematall,butitwillcauseproblemsinyourcode.

    Whenyoustartwritingcode,it'sbesttobeginaddingstylecodeafterthecontentstructureiscomplete.

    Thiskindofcodingislikeguerrillawarfare.It'saveryShanzhaipractice.-ChrisCoyier

    Betteryet,definethisPstyleinthestylesheetfile:

    #someElement>P{

    Color:

    red;

    }

    4.introducesallstylesheetfilesinthepageheadtag

    Intheory,youcanintroduceCSSstylesheetsatanylocation,buttheHTMLspecificationisrecommendedintheheadmarkupofthepage,whichspeedsuptherenderingofthepage.

    InthedevelopmentofYAHOO,wefoundthatintroducingstylesheetsintoheadtagsspeedsuppageloading,

    Becausethisallowsthepagetoberenderedgradually.-ySlowteam

    My,Favorites,Kinds,of,Corn

    5.introduceJavaScriptfilesatthebottomofthepage

    Oneprincipletorememberistohavethepageappearinfrontoftheuserasfastaspossible.Whenascriptisloaded,thepagewillpauseloadinguntilthescriptisfullyloaded.Soitwillwastemoretimeontheuser.

    IfyourJSfileisjusttryingtoimplementcertainfunctions(suchasclickingonbuttonevents),thenyoucanrestassuredthatitwillbeintroducedatthebottomofthebody,whichisdefinitelythebestway.

    Giveanexample:

    And,now,you,know,my,favorite,kinds,of,

    ,corn.

    6.don'tuseembeddedJavaScript,thisistwenty-firstCentury!

    Manyyearsago,therewasawayofaddingJScodedirectlytothetag.Especiallyinsimplephotoalbums.Essentially,a"onclick"eventisattachedtothetag,anditseffectisequivalenttosomeJScode.Thereisnoneedtodiscusstoomuch,anditshouldnotbeusedinthisway.YoushouldtransferthecodetoanexternalJSfile,andthenuseaddEventListener/attachEventtoaddtimelisteners.OrusingjQueryandotherframeworks,youneedtouseits"clock"method.

    $('a#moreCornInfoLink').Click(function(){)

    Alert("Wanttolearnmoreaboutcorn?

    ");

    });

    7.,developmentatanytimeforstandardverification

    Manypeopledon'treallyunderstandthemeaningandvalueofstandardverification.Theauthoranalyzesthisprobleminablog.Inaword,standardverificationisforyou,notforyou.

    Ifyou'vejuststartedworkingonWebpages,it'shighlyrecommendedthatyoudownloadthiswebdevelopmenttoolbaranduseitatanytimeduringcoding,"HTMLstandardverification"and"CSSstandardverification."".IfyouthinkCSSisaverygoodlanguage,itwillbeatyouupanddown.Yoursloppycodewillmakeyourpageconstantly,aItsloopholesappearedoneafteranother.,goodmethodis:

    validation,verification,andvalidation.

    8.downloadFirebug

    Firebugiswelldeservedwebdevelopmentbestplug-in,itcannotonlydebugJavaScript,

    Italsoletsyouvisuallyunderstandthepropertiesandlocationsofpagetags.Needlesstosay,Downloadit!

    9.useFirebug!

    Accordingtotheauthor'sobservation,mostusersonlyusetheFirebug20%function,itistoowasteful,youmightaswellspendafewhourstosystematicallystudythistool,Ibelieveitwillmakeyoutwicetheresultwithhalftheeffort.

    Firebugtutorial:

    OverviewofFirebug

    Debug,Javascript,With,Firebug-video,tutorial

    10.uselowercaseTags

    Intheory,youcanwritemarkerslikethis:

    Here,s,an,interesting,fact,about,corn.,

    It'sbetternottodothat.It'snousetryingtoloadlargerletters,anditmakesthecodeugly,andthat'sgood:

    Here,s,an,interesting,fact,about,corn.,

    11.usetheH1-H6tag

    Isuggestyouusethemallsixmarkersontheweb,althoughmostpeoplewillonlyusethefirstfour,butmostoftheHhasmanyadvantages,suchasfriendlyequipment,searchenginefriendly,youmaywishtoreplaceH6Ptags.

    12.ifit'sablog,leavetheH1tothetitleofthearticle

    Today,IlaunchedadiscussiononTwitter:

    shouldIdefinetheH1onLOGOordefinethetitleofthearticle?

    80%ofthepeoplechosethelatter.

    Ofcourse,thespecifichowtousedependsonyourneeds,butIsuggestyouintheestablishmentofblogwhenthearticletitleasH1,whichisverybeneficialtosearchengineoptimization(SEO).

    13.downloadySlow

    Overthepastfewyears,YAHOO'steamhasdonealotofgreatworkinthefieldoffront-enddevelopment.Notlongago,theyreleasedaySlowFirebugextension,itwillanalyzeyourwebpage,andreturnsa"reportcard",adetailedanalysisoftheabove"aspects,theneedtoimprovetheplace,thoughit'sabitharsh,butitwilldefinitelyhelpyouhelp,stronglyrecommended-ySlow!

    14.usetheULlistlayoutnavigationmenu

    Usually,thesitehasanavigationmenuthatyoucandefineinthisway:

    Home#"

    About#"

    Contact#"

Ifyouwanttowritebeautifulcode,you'dbetternotdothat,

WhyusetheULlayoutnavigationmenu?

BecauseULwasborntopreparelists

It'sbettertodefinethis:

  • Home
  • About
  • Contact
  • 15.learnhowtodealwithIE

    IEhasalwaysbeenanightmareforfrontenddevelopers!

    IfyourCSSstylesheetisbasicallysetup,youcancreateastylesheetforIEalone,andthenitwillonlyworkforIE:

    <-[if,lt,IE,7]>

    <[endif]->

    ThecodemeansthatiftheuserbrowserisIE6andbelow,thecodewillwork.IfyouwanttoincludeIE7aswell,changethe"[ifLTIE7]"to"[ifLTEIE7]"".

    16.useagoodcodeeditor

    Whetheryou'reaWindowsoraMacuser,therearemanygoodeditorsforyoutochoosefrom:

    Macuser

    Coda

    Espresso

    TextMate

    Aptana

    DreamWeaverCS4

    PCuser

    InType

    E-TextEditor

    记事本++

    Aptana

    DreamweaverCS4

    17。

    压缩前端代码~

    通过压缩CSS和JavaScript代码,通常可以减小25%以上的文件体

    积,在某种情况下,这会大大减轻你的带宽压力,提高加载速度。

    JavaScript压缩服务

    JavaScript压缩机

    JS压缩机

    JS代码在线压缩(中文)

    CSS压缩服务

    CSS优化

    CSS压缩机

    干净的CSS

    CSS代码在线压缩(中文)

    18。

    缩减,缩减,缩减

    回望我们大多数人写的第一个页面,一定会发现严重的“div癖”(divitis),通常初学者的本能就是把一个段落用div包起来,然后为了控制定位而套上更多的部--其实这是一种低效而有害的做法。

    网页写完后,一定要多次回头检查,尽量的减少元素的数量。

    能用UL布局的列表就不要用一个个的div去布局。

    正如写文章的关键是”缩减,缩减,缩减”一样,写页面也要遵循这个标准。

    19。

    为所有的图片加上ALT属性

    为图片加上ALT属性的好处是不言而喻的--这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息,并且对图像搜索引擎友好。

    Firefox不支持显示图像ALT属性,可以加入标题属性:

    题”/>

    20。

    学会熬夜

    我经常不知不觉的学习工作到凌晨,我认为这是个很好的状况。

    我的”啊,哈~”时间(“ah-ha”的时刻,指柳暗花明或豁然开朗的时刻)通常都发生在深夜,比如我彻底理解JavaScript的”闭包”概念,就是在这样一种情况下如果你还没有感受过这种奇妙的时刻,

    那就马上试试吧~

    21。

    查看源代码

    没有什么比模仿你的偶像能让你更快的学习HTML。

    起初,我们都要甘做复印机,然后慢慢得发展自己的风格。

    研究你喜欢的网站页面代码,看看他们是怎么实现的。

    这是高手的必经之路,你一定要试一下。

    注意:

    只是学习和模仿他们的编码风格,而不是抄袭和照搬~

    留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中头标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。

    22。

    为所有的元素定义样式

    这一条在你制作其他公司企业网站时尤为必要。

    你自己不使用blockquote标记,那用户可能会用,你自己不使用OL,用户也可能会。

    花时间做一个页面,显示出UL,OL,P,h1-h6,引用、等等元素的样式,检查一下是否有遗漏。

    23。

    使用第三方服务

    译者注:

    英文原文标题为”使用推特”

    现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。

    24。

    学习PS图象处理软件

    PS图象处理软件是前端工程师的一个重要工具,和如果你已经熟练

    掌握HTMLCSS,那不妨多学习一下photshop。

    Psdtuts+上有许多英文的饰品教程:

    视频部分

    L也有大量教程,不过要支付25美元美元

    “你在PS图象处理软件“系列教程

    花费几个小时的时间学习PS图象处理软件的快捷键操作

    25.learneachHTMLtag

    AlthoughsomeHTMLtagsarerarelyused,youshouldstillknowthem.Forexample,"abbr","cite"andsoon,youmustlearnthemforarainyday.

    Bytheway,thetwotabsabove:

    Abbr:

    Representsanabbreviatedform,suchas"Inc."and"etc."".Bymarkingtheabbreviationofwords,youwillbeabletoprovideusefulinformationforthebrowser,thespellingchecker,translationsystemandsearchengineindexer.

    Url:

    Cite:

    Areferencetoareference,suchasatitleofabookormagazine,thatisusuallycontainedinthetext.

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索

    当前位置:首页 > PPT模板 > 其它模板

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1