校园学生学习娱乐资源第一门户 校园第一站 源于校园 服务于校园 分享资源和快乐 网站地图 高级搜索 RSS订阅 收藏本站 设为首页
首页 | 校园 | 教育 | 考试 | 电脑 | 英语 | 读书 | 就业 | 论文 | 体育 | 健康 | 图片 | 分类信息
Q Q | 下载 | 游戏 | 音乐 | 影视 | 专题 | 祝福 | 百科 | 问答 | 博客 | 会员 | 社区 | 校园论坛
·偶像剧免费在线收看
·DEDECMS免费模板规则下载
·
·全能空间、网站建设仅200
Dreamweaver | FrontPages | HTML | Javascript | 文章搜索:
  当前位置: 主页>电脑>网页设计>DIV+CSS> 文章正文

如何使用CSS来进行网页排版

http://www.xydyz.com 来源:网络收集 2008-07-12 阅读: 评论


以下是引用片段:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">

<head>

<title>欢迎进入新《网页设计师》:web标准教程及推广</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metahttp-equiv="Content-Language"content="gb2312"/>

<metacontent="all"name="robots"/>

<metaname="author"content="ajie(at)netease.com,阿捷"/>

<metaname="Copyright"content="www.w3cn.org,自由版权,任意转载"/>

<metaname="description"content="新网页设计师,web标准的教程站点,推动web标准在中国的应用."/>

<metacontent="web标准,教程,web,standards,xhtml,css,usability,accessibility"name="keywords"/>

<linkrel="icon"href="/favicon.ico"type="image/x-icon"/>

<linkrel="shortcuticon"href="http://www.w3cn.org/favicon.ico"type="image/x-icon"/>

<linkrel="stylesheet"rev="stylesheet"href="css/style01.css"type="text/css"media="all"/>

</head>

<body>

<divid="left">页面左列</div>

<divid="middle">页面中列</div>

<divid="right">页面右列</div>

</body>

</html>

这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?

4.100%自适应高度?

 

为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。

第11天:不用表格的菜单

布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:

样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

页面代码:<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>

以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。

接下来是定义菜单。

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果:演示页面

通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:

以下是引用片段:

<divid="menu">

<ul>

<li><atitle="网站标准"href="web_standards.html">什么是网站标准</a></li>

<li><atitle="标准的好处"href="web_standards_value.html">使用标准的好处</a></li>

<li><atitle="怎样过渡"href="../../templates/index.html">网页模板下载</a></li>

<li><atitle="相关教程"href="../index.html">WEB标准相关教程</a></li>

<li><atitle="工具"href="http://websoft.jianzhan8.cn">网页制作软件</a></li>

<li><atitle="资源及链接"href="../../help/index.html">使用帮助</a></li>




【责任编辑:admin 】




评论
用户名: 新注册) 密码: 匿名评论
评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
  相关文章
CSS网页样式设计攻略全集
Div+CSS布局入门教程
DIV+CSS树型菜单
css样式做细线表格
CSS滤镜-Xray属性
  最新图片
Div+CSS布局入门教程
Div+CSS布局入门教程
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Wave属性
CSS滤镜-Wave属性
CSS滤镜-Shadow属性
CSS滤镜-Shadow属性
CSS滤镜-Mask属性
CSS滤镜-Mask属性
CSS滤镜-alphInvert属性
CSS滤镜-alphInvert属
CSS滤镜-Gray属性
CSS滤镜-Gray属性
CSS滤镜-Glow属性
CSS滤镜-Glow属性
24小时TOP
   
·CSS+DIV网页样式与布局视频教程全集
·Div+CSS布局入门教程
·CSS网页样式设计攻略全集
·CSS滤镜-Xray属性
·CSS教程:li和ul标签
·DIV CSS制作网页时易犯的错误总结
·CSS滤镜-Shadow属性
·CSS滤镜-Chroma属性
热门图片
  更多>>>
Div+CSS布局入门教程
Div+CSS布局入门教
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Shadow属性
CSS滤镜-Shadow属性
CSS滤镜-Chroma属性
CSS滤镜-Chroma属性
焦点聚焦
  更多>>>
·CSS网页样式设计攻略全集
·Div+CSS布局入门教程
·DIV CSS制作网页时易犯的错误总结
论坛精华
  更多>>>
·真钱斗地主轧金花龙虎板玖和百家乐http://c
·22岁女大学生要嫁48岁乞丐(图)
·一条短信毁了一种水果 “蛆橘”传言流变调
·蒙古风情十四怪 (一)
·《中国高新技术企业》--www.txrb.com--科信
·东莞大金空调官方介绍 13559702882卢生
·乐众国际最新博彩游戏!真实!新鲜!刺激!
·快国庆了大家怎么安排
最新图片
  更多>>>
Div+CSS布局入门教程
Div+CSS布局入门教
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Wave属性
CSS滤镜-Wave属性
CSS滤镜-Shadow属性
CSS滤镜-Shadow属性
推荐文章
  更多>>>
·Div+CSS布局入门教程
·CSS滤镜-Xray属性
·CSS滤镜-Wave属性
·CSS滤镜-Shadow属性
·CSS滤镜-Mask属性
·CSS滤镜-alphInvert属性
·CSS滤镜-Gray属性
·CSS滤镜-Glow属性
关于我们 - 版权声明 - 免责声明 - 欢迎投稿 - 广告服务 - 友情链接 - 网站建设 - 诚聘英才 - 联系我们 - -
Copyright @2007-2009 www.xydyz.com © All rights reserved.
校园第一站 版权所有 客服E-Mail:hyperblue@163.comn 点击这里给我发消息
Site design by hyperblue 鄂ICP备07009403号 Powered by DedeCms