网页设计css排版

ID：37621061

大小：3.97 MB

页数：10页

时间：2019-05-26

上传者：U-2517

资源描述：

《网页设计css排版》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

IntroductiontoBoxModel視傳一網頁設計／林金祥WebpageDesign/byChin-HsiangLin 用CSS做排版¢不要再用

做排版了！¢CSS用方塊模型(BoxModel)做排版。¢CSS將每個BoxModel視作一個元素，這個元素包括：¢margin:外邊距¢border:框邊¢padding:內邊距WebpageDesign/byChin-HsiangLin Box的宣告與使用方式¢在中宣告：¢在中使用：＃boxname{width:800px;所有被boxname包含margin:auto;的html元素標籤。padding:0;border:0;……}WebpageDesign/byChin-HsiangLin BoxModel(方塊模型)OuteredgeBorderInneredgetopMarginareaPaddingarealeftContentarearightheightwidthbottomWebpageDesign/byChin-HsiangLin4 Takealookofthis＃main{margin:20pxwidth:500px;padding:10pxheight:300px;文字區border:2px;margin:20px;padding:10px;width:500pxheight:300pxfont-size:……border:2px}WebpageDesign/byChin-HsiangLin HowtoCounttheSize?margin:20pxpadding:10px文字區300pxborder:2pxwidth:500px總長：20+2+10+500+10+2+20=564px總高：20+2+10+300+10+2+20=364pxWebpageDesign/byChin-HsiangLin DefineBackgroundColorofaBoxModel¢IE:padding+content¢Firefox:border+padding+contentWebpageDesign/byChin-HsiangLin ConceptsofUsingBox#container#title#side_bar#mainWebpageDesign/byChin-HsiangLin8 5StepstoLayoutyourWebpage1.確定版面的總寬度與高度(px)2.設定所有box的id名稱3.根據版面的設計，計算好每個box的寬度，並設定margin,padding等值4.將html裡內容，依版面的設計分別置入相對應的box裡5.在不同的browsers裡面檢視render後的效果WebpageDesign/byChin-HsiangLin KeepLearning!多練習就會熟悉，加油！©2009,視傳／祥子WebpageDesign/byChin-HsiangLin

当前文档最多预览五页，下载文档查看全文

侵权申诉



1 1 2 3 4 5 / 10



此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文

温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。

大家都在看

近期热门

关闭

网页设计css排版

网页设计css排版

最近更新

大家都在看

相关文章

相关标签