2022年Xhtml第9天-第一个css布局实例CSSHTML教程.docx
( 4.5 )《2022年Xhtml第9天-第一个css布局实例CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年Xhtml第9天-第一个css布局实例CSSHTML教程.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、2022年Xhtml第9天:第一个css布局实例CSSHTML教程接下来起先要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴实，因为web标准更关注结构和内容，事实上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用div也可以实现。技术有一个成熟的过程，把div看成和table一样的工具，如何运用就看你的想象力了。注：在实际应用过程中，div在有些地方的确不如表格便利，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值推断。好，不罗嗦了，我们起先：1.确定布局w
2、3cn的最初设计草图如下： 用表格的设计方法的话，一般都是上中下三行布局。用div的话，我考虑运用三列来布局,成为这样。 2.定义body样式先定义整个页面的body的样式,代码如下：body { margin: 0px;padding: 0px;background: url(./images/bg_logo.gif) #fefefe no-repeat right bottom;font-family: lucida grande,lucida sans unicode,宋体,新宋体,arial,verdana,sans-serif;color: #666;font-size:1
3、2px;line-height:150%; } 以上代码的作用在上一天的教程有具体说明，大家应当一看就明白。定义了边框边距为0；背景颜色为#fefefe，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。3.定义主要的div初次运用css布局，我确定采纳固定宽度的三列布局(比自适应辨别率的设计简洁,hoho，别说我偷懒，先实现简洁的，增加点信念嘛！)。分别定义左中右的宽度为200:300:280，在css中如下定义:/*定义页面左列样式*/#left{ width:200px;margin: 0px;p
4、adding: 0px;background: #cdcdcd;}/*定义页面中列样式*/#middle{ position: absolute;left:200px;top:0px;width:300px;margin: 0px;padding: 0px;background: #dadada;}/*定义页面右列样式*/#right{ position: absolute;left:500px;top:0px;width:280px;margin: 0px;padding: 0px;background: #fff; } 留意：定义中列和右列
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 2022 Xhtml 第一 css 布局 实例 CSSHTML 教程
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内