2022年Xhtml第9天-第一个css布局实例CSSHTML教程.docx
2022年Xhtml第9天:第一个css布局实例CSSHTML教程接下来起先要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴实，因为web标准更关注结构和内容，事实上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用div也可以实现。技术有一个成熟的过程，把div看成和table一样的工具，如何运用就看你的想象力了。注：在实际应用过程中，div在有些地方的确不如表格便利，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值推断。好，不罗嗦了，我们起先：1.确定布局w3cn的最初设计草图如下： 用表格的设计方法的话，一般都是上中下三行布局。用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:12px;line-height:150%; } 以上代码的作用在上一天的教程有具体说明，大家应当一看就明白。定义了边框边距为0；背景颜色为#fefefe，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。3.定义主要的div初次运用css布局，我确定采纳固定宽度的三列布局(比自适应辨别率的设计简洁,hoho，别说我偷懒，先实现简洁的，增加点信念嘛！)。分别定义左中右的宽度为200:300:280，在css中如下定义:/*定义页面左列样式*/#left{ width:200px;margin: 0px;padding: 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; } 留意：定义中列和右列div我都采纳了position: absolute;，然后分别定义了left:200px;top:0px;和left:500px;top:0px;这是这个布局的关键，我采纳了层的肯定定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。这时候整个页面的代码是：<!DOCTYPE html PUBLIC "-/W3C/DTD xhtml 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml" lang="gb2312"><head><title>欢迎进入新网页设计师:web标准教程及推广</title><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta http-equiv="content-language" content="gb2312" /><meta content="all" name="robots" /><meta name="author" content="ajie(at),阿捷" /><meta name="copyright" content="www.w3cn.org,自由版权,随意转载" /><meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." /><meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" /><link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="http:/www.w3cn.org/favicon.ico" type="image/x-icon" /><link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" /></head><body><div id="left">页面左列</div><div id="middle">页面中列</div><div id="right">页面右列</div></body></html> 本新闻共2页,当前在第1页12
