《Web前端开发项目教程》网页的蓝图-简单布局-使用CSS装饰页面_第1页
《Web前端开发项目教程》网页的蓝图-简单布局-使用CSS装饰页面_第2页
《Web前端开发项目教程》网页的蓝图-简单布局-使用CSS装饰页面_第3页
《Web前端开发项目教程》网页的蓝图-简单布局-使用CSS装饰页面_第4页
《Web前端开发项目教程》网页的蓝图-简单布局-使用CSS装饰页面_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目02网页的蓝图--简单布局任务2-1使用CSS装饰网页任务02-1使用CSS装饰网页

知识点理解DIV+CSS网页布局掌握三种CSS样式表技能点学会使用DIV+CSS进行简单的页面布局学会根据需要使用三种CSS样式表一、DIV+CSS网页布局流程用div划分页面规划各内容块的位置用css定位

Banner菜单主导航主体内容footerBanner

菜单主导航左

右

footer.main{ width:90%; margin:0auto;}.nav_top{ background:#333; height:30px; width:100%; position:fixed; top:0; z-index:99;}……二、CSS样式表CSS（CascadingStyleSheets，可译为“层叠样式表”或“级联样式表”）是一组样式设置规则，用于控制Web页面的外观。样式表实现内容与样式的分离，方便团队开发+=内容与样式和谐统一的完整网页Html代码CSS样式1.CSS样式表简介—样式规则CSS样式表的核心是样式规则，多个样式规则就构成了样式表样式规则的组成：选择器{样式属性:属性值;}例如：

p{color:red;font-size:30px;font-family:隶书;}样式属性属性的值1.CSS样式表简介—层叠为什么说CSS是“层叠式”样式表呢？所谓的层叠，主要包含以下几个方面：（1）在树形结构中的子元素能够继承父元素定义的大多数样式；（2）同一元素的样式可以多次定义，如果不发生冲突，全部样式可以叠加起来应用；重复定义发生冲突时则根据优先级依照内层优先、后定义优先的原则进行覆盖，即内层子元素样式覆盖父元素样式、后定义的样式覆盖先定义的样式。1.CSS样式表简介—样式表的优点优点：（1）表现和内容分离。将设计部分剥离出来放在一个独立样式文件中，大大缩减页面代码。（2）缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

（3）一次设计，多次使用。可以将站点上同类网页风格都使用一个CSS文件进行控制，如果改动CSS文件，那么多个网页都会随之发生变动。2.样式表分类根据样式代码的位置，样式表有三种使用方法：内嵌样式表外部样式表行内样式表2.1内嵌样式表使用情境:如果开发人员只定义当前网页的样式，可使用内嵌样式表。内嵌的样式表“嵌”在网页的<head></head>标记符内。嵌入的样式表中的样式只能在当前网页上使用。使用格式：<head>

<styletype="text/css">

样式规则</style>

…头部的其它标记<head>2.1内嵌样式表使用方法：<head> <title>内嵌样式表</title> <styletype="text/css">

h3{font-size:20pt;font-family:"微软雅黑";}

p{width:200px;height:100px;background:blue;} </style></head>声明文档样式表结束文档样式表开始，类型为CSS样式样式规则<body> <h3>这是蓝色盒子</h3> <p>段落1</p> <br> <p>段落2</p>

</body>在页面头部<head>与</head>标记之间使用<style>…</style>标记定义，只对该页面有效。

如果希望一个网站中多个页面的样式保持一致，如何解决？外部样式表文件可以解决2.2外部样式表使用情境：当要在站点多个网页上一致地应用相同样式时，可使用外部样式表。在外部样式表中定义样式，并链接到所有网页，便能确保所有网页外观的一致性。如果需要更新样式，只需在外部样式表中修改一次，而该更新会反映到所有与该样式表相链接的网页上。使用格式：<head><title>标记名选择符</title>

……

<linkhref="相对或绝对路径/样式文件.css"

rel="stylesheet"/>……<head>css文件选择符{样式规则}2.2外部样式表使用方法：步骤1，创建样式表文件common.cssp{font-family:华文楷体;font-size:18px;color:#FF00CC;}h2{font-family:黑体;font-size:28px;background-color:#CCFF33;text-align:center;}2.2外部样式表使用方法：步骤2，创建page1.html<html><head><title>李白诗词</title></head><body><h2>将进酒</h2><h3><ahref="#">作者：李白</a></h3><p>君不见黄河之水天上来，奔流到海不复回。<br>君不见高堂明镜悲白发，朝如青丝暮成雪。<br>人生得意须尽欢，莫使金樽空对月。<br>天生我材必有用，千金散尽还复来。</p></body></html>步骤3，创建page2.html<html><head><title>杜甫诗词</title></head><body><h2>登高</h2><h3><ahref="#">作者：杜甫</a></h3><p>风急天高猿啸哀，渚清沙白鸟飞回。<br>无边落木萧萧下，不尽长江滚滚来。<br>万里悲秋常作客，百年多病独登台。<br>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></body></html>2.2外部样式表使用方法：步骤4，把样式文件和网页绑定使用LINK（链接）标签:<head><linkhref="common.css"rel="stylesheet"></head>步骤5，浏览查看page1和page2样式文件：common.cssPage1.htmlPage2.html2.3内联样式表（行内样式）使用情境：如果某个页面某个元素有特殊样式，可以直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。使用格式：<标记名style="样式规则1;样式规则2;…;">2.3内联样式表使用方法：<head><title>内联CSS样式应用</title></head><bodystyle="background-color:#CCCCCC"><h2>静夜思</h2><h3>作者：李白</h3><pstyle="color:#FF0000;font-size:18px;font-family:隶书;border-bottom-style:dashed;border-bottom-width:1px;">

床前明月光，<br/>

疑是地上霜。<b

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论