当前位置:首页 >> 资格考试/认证 >>

课件2-CSS部分


3-网页设计与制作

-css基础

课程内容体系

主要内容
1)什么是CSS? ? 2)CSS的基本语法 ? 3)简单案例
?

什么是CSS?

css :

Cascading Style Sheet

层叠样式表

background-image:url(self.jpg); background-repeat:no-repeat; background-position: right bottom; background-color:#e9fbff;

代码释义
html

+

CSS

CSS样式在网页中的应用
?

CSS就是让内容和样式分离开来
HTML只控制网页的内容(如文字、图片和超链接等) ? 内容的样式由CSS来控制(如颜色、位置等)
?

?

举个例子:就像模特和漂亮衣服的关系

CSS 禅意花园
倡导人: CSS 禅意花园主人 Dave Shea http://www.csszengarden.com

创意: 提供同一网页的html源文件,人们可以用 CSS 将 它设计成各式各样的风格并提交上来。 作用: 想改变人们对WEB设计的看法,向人们展示CSS设 计可实现的视觉效果,但最终却出乎意料的改变了全 球技术发展的趋势。

源文件------>css------>效果

优秀作品:

优秀作品:

优秀作品:

更多作品欣赏:
?

现场演示

? http://www.csszengarden.com

? ?

禅意花园更多作品 CSS禅意花园—作品欣赏.rar(16课件下载)

CSS学习顺序三部曲

学习重点
? 基本语法 ? 具体属性

结构 ? 书写位置 ? 命名方式
?

文字 ? 背景 ? 盒模型 ? 边框 ? 浮动和清除
?

CSS结构类比:
命名

? 李逵{
身高:185cm; 体重:105kg; 性别:男; 性格:莽撞; 武器:板斧;

?分析(三要素) 姓名、属性、属性值 ?拓展:唐僧 八戒……

}
属性



CSS结构真相
? 段落{ 字体大小:12像素; 颜色:红色; 选择符(Selector) }

p{

值(Value)

font-size:12px; color:red; }
属性(Property)

测试
? 标题1{
大小:25像素; 颜色:蓝色; }

h1{
font-size:25px; Color:blue; }

CSS书写位置
内嵌样式表 ? 内部样式表 ? 外部样式表
?

内嵌样式表

位置:作为属性,直接添加在HTML的开始标记里。 代码说明: 不推荐使用,因为不能发挥样式表的优势,无法将 内容和样式分别控制。

内部样式表

html与CSS结合方式

通过link语句链接两个文件

内部和外部样式表相互转化
内部样式表

<head> <style type=“text/css”> <!-h1 { color:red; } --> </style> </head>

外部样式表

h1 {

color:red;
}

课程重点总结
?

html ->标记 ->网页内容
美观的网页

?

CSS ->属性 ->网页样式

+

=

体验CSS
项目5-1 项目5-2 项目5-3

知识点补充
<!-- --> html的注释标记,在这里是跨越的意思, 当浏览器不支持css语法时,会自动越过此标记。 /* …… */ 为CSS的注释标记。 不同的属性之间用;分隔开,需要注意的是,一定要 用半角的分号,不能用全角的分号。

?

? ?

上节课知识点回顾
CSS的作用是什么? ? CSS长什么样子? ? CSS代码可以写在什么地方?
?

随堂测试 :
?

标题1:
字体颜色 +背景颜色+居中

代码解析:

综合案例-初恋这件小事

本课程内容
项目分析,知识讲解 ? 常用文字属性 (随堂测试) ? 命名方式
?

css基本属性1

-文字

漂亮页面欣赏-1

漂亮页面欣赏-2

漂亮页面欣赏-3

常用文字属性
?

1、字体样式
? ? ?

字体颜色 字体、字号、文字加粗 下划线

?
?

2、段落样式
行高 文本缩进 水平对齐

?
?

常用文字属性
color font-size 文字颜色 文字字号 color: #98AB6F ; 12px;

font-weight

文字加粗

lighter | normal | bold | 300

text-decoration
font-style

none | underline 文本下划线 line-through | overline 文字样式 normal | italic

常用段落样式

line-height

文本行高

line-height:18px;

letter-spacing
text-indent text-align

字母间距
首行缩进 水平对齐

letter-spacing : 6px;
2em; left | center | right

项目中其他常用属性
属性名称 属性含义 示例

width height border

宽度 高度

width: 300px height: 30px;

边框的样式、 border:1px solid #009; 宽度和颜色

list-style-type

列表样式类型 list-style-type: none;

CSS选择符命名方式
?标签选择符 ?id选择符 ?class选择符 ?复合内容

1)标签选择符
? 如:body{

h1{ }等等 ? 例如: h1 { color:red; } …… ? <h1> …… </h1>

}

div{ }

span{ }

纠结的问题?
?

?? {

color:?; } …… ? <h1>我是红色的</h1> ? <h1>我是蓝色的</h1>
结论:相同的标记,我们需要区分细节!

2) id选择符
? 自己起名字,使用#符号进行标识,在一个网页中只 能使用一次。例如:

? #red{
color:red;
起的名字尽量有含义!

} …… <h1 id=“red”>……</h1>

id多用来做布局

html结构
<div id="main">#main <div id="top">#top</div> <div id="left">#left</div> <div id="right">#right</div> <div id="footer">#footer</div> </div>

3)class选择符
?

自己起名字,使用 符号的形式定义,允许重复 使用。例如:

.

?.blue{
color:blue; }
? ?

起的名字尽量有含义!

…… <h1 class=“blue”> …… </h1> <h3 class=“blue”> …… </h3>

注意事项
? ?

?

1、数字不能打头,也不能写中文。 2、字母、拼音、数字和下划线都可以用来命 名。 3、自己起的名字,尽量有含义。

解决方案
?

完成刚才的纠结问题。

三种选择符的命名方式

CSS选择符命名和调用方式

CSS选择符命名和调用方式

三种命名方式小结:
选择符名称 定义示例 调用示例 说明

标签

h1{ } li{ } #box{} # left{}

重新定义已有标签。 <h1> 直接使用原有标签

id

<div id=left>

选择性调用, 一个名字只能用一次。

class

.red, .blue

<p class=red>

选择性调用, 可多次使用。

体验项目 5-4 5-5 5-6 5-7 5-8

上节课知识点回顾
CSS的选择符有哪三种命名方式? ? 三种命名怎么调用?
?

复合内容
群组选择符 ? 包含选择符 ? CSS伪类
?

4)群组选择符
可以对一组对象进行相同的样式指派,例如: ? h1,h2,h3,p,span{color:blue;} ? 应用: ? <h1>……</h1> ? <h2>……</h2> ? <h3>……</h3> ? <p>……</p> ? <span>……</span>

5)包含选择符
?
? ? ? ? ? ? ?

可以对某个对象的子对象进行样式指派,例如:
#box a { font-size:12px; color:#ba2636; text-decoration:none; } 应用: <div id=“box”> <a href=“#”> 详细 </a> </div>

?

?

<div><a href="#">我没在盒子#box里</a></div>

应用举例

CSS伪类
?

CSS伪类是一种特殊的CSS定义方 法,主要用于对超链接的重新定义。

超链接的样式控制
? ?

a:link 对于超链接文字进行设置 常用伪类:
?

?
?

a:visited 链接被访问后的样式 a:hover 用于鼠标悬停在链接上的样式 a:active 点击链接,未释放之前的样式

选择符总结
? ? ? ?

标签选择符 id选择符 class选择符 复合选择符
? ?

选择符(Selector)

?{ color:red; …… }

?

群组选择符 包含选择符 伪类

体验项目 5-9 5-10 5-11

本课内容
层叠和继承 ? 随堂测试:
?

Google图标 ? 超链接
?

样式表的位置
?

内嵌样式表 粉色 内部样式表 红色

<h1 style= " color: #ff00ff " >内嵌样式-粉色</h1>
?

?

外部样式表 蓝色

<link href= " *.css" rel="stylesheet" type="text/css" />

层叠与继承 P113 项目5-12
?

? ?

?
?

分别用下述3种方法,控制<h1>的颜色, 看哪种起效果? 要求: 内嵌式:#ff00ff 粉色; 内部式:red 红色; 外部式:blue 蓝色;

P113 项目5-12

层叠:三种样式的优先级
?

?

?
? ? ?

对于名称相同的样式,样式的优先级从高到低 依次是: 内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。 其中内部CSS和外部CSS没有优先级的先后, 后定义的样式覆盖前面定义的样式,这就是所 谓的层叠。

继承
本例中,标题1继承了什么属性?

更多资料: ? CSS之继承详解 ? 此为中文翻译版本,翻译者:张鑫旭。 ? 本文档生动有趣的讲解了有关CSS继承的一些知识,相 信对您的学习会有所帮助的。

课后练习
?

P115

项目5-13

随堂测试:制作Google的图标
提示: 字体大小:80像素 字母间距:-2像素 字体:Arial, Helvetica, sans-serif 字母颜色:蓝(#184dc6)红(#c61800) 黄(#efba00)绿(#42c34a)

? ?

?
?
?

随堂测试-超链接的样式
?

超链接文字和访问后:
?

黑色 12px 没有下划线; 橙色 有下划线

?

鼠标滑过和点击时:
?

css基本属性2

-背景

源文件------>css------>效果

背景常用属性 back-ground
background-color
设置背景颜色 background-color: #98AB6F;

background-image 设置背景图像
设置背景图像是

background-image: url(a.jpg);
repeat : 背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺 scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定 left | center | right bottom 50% 50% 20px 40px 例如: top | center |

background-repeat 否及如何铺排 backgroundattachment

背景图像是否随 对象内容滚动

backgroundposition

设置背景图像位 置 横轴(x) 纵轴(y)

background-position:left center;

随堂测试-几米的故事

解析代码:
body { background-color:#e9fbff; background-image:url(self.jpg); background-repeat:no-repeat; background-position: right bottom; }

缩写后的代码:
body{ background:#e6fbff url(self.jpg) no-repeat right bottom;

}

几米效果拓展:

方法: background-position:-135px -165px;

深入学习背景图片的位置-CSS Sprites
?

实际的网站上,为了背景图片寻找方便,也为 了减少图片数量,经常会把常用的背景小图标 放置在同一张大图片上。

自我领悟——定义标题
<h1>Super Cool Page Title</h1>

+

h1{……

}

学习感悟
?

第5题中10*10的图片,还有第7、8题,用网 上给的图片都会有问题,看书或者阅读资料的 时候,能够主动的思考,寻找合适的方法解决 问题、实现效果,这个能力更重要。

利用DW编写CSS
? ?

看书 看教学视频

命名方式和书写位置

1-选择符命名方式 2-正确命名

3-书写位置

类型属性(文字)

背景属性

区块属性(段落)

方框属性

边框属性

列表属性

定位属性

综合项目

固定宽度的圆角表格

#top

#main

#bottom

4-网页设计与制作
—网页布局方法

练习 时间

? ?

下面的网页的布局你能看出来吗? 是几列(几栏)的布局呢?

单栏

三列布局 (三栏)

你能画出下面的网页的布局吗?

网页布局方法
? ? ?

?
?

?

所谓布局定位,就是CSS网页的核心框架。 方法步骤: 1、根据内容,建立html文件结构 2、搭建排版架构; 3、调整架构显示的位置、浮动方式; 4、填充框架中细节的排版。

?

核心:浮动和定位

学习思路:
? 理解孤立的一个盒子的内部结构 ? 理解多个盒子之间的相互关系

1-一个盒子的旅程 ——盒模型

从零开始理解盒模型

margin(外边距)

border(边框)

padding(填充距)

盒模型 (Box model )
margin:用来设置一个元素所占空间 的边缘到相邻元素之间的距离 border:用来设定一个元素的边线

padding:是用来设置元素内容 到元素边框的距离

项目1:我的第一个盒子

计算盒子的宽度与占位 P137 6-1
?

#banner{
background-color: #efe; height: 150px; width: 300px; margin: 80px; padding:40px; border: 1px solid #666;

}
?

提问: CSS属性中(height:150px; width:300px;),指的是谁的尺寸? 我们所能看见盒子的宽和高又是多少? 这个盒子实际占据的宽高尺寸又是多少?

盒子最终占据的宽度
左外边距+左边框+左填充距+ width +右填充距+右边框+右外边距

注意:
? ?

CSS 背景属性指的是 content 和 padding 区域。 CSS 属性中的 width 和 height 指的是 content 区 域的宽和高。

相关属性
? margin ? border

? padding

? 顺时针方向
?上

右下左

margin 外边距
?

?
? ?

margin-top: 10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
多种缩写方式: margin:10px; margin:0 auto; margin:10px 5px 3px 15px;

?

?
? ?

padding 内边距
?

?
? ?

padding-top: 10px; padding-right:10px; padding-bottom:10px; padding-left:10px;
多种缩写方式: padding:10px; padding:0 10px; padding:10px 5px 3px 15px;

?

?
? ?

border 边框
? ? ? ? ?

border-width | border-style | border-color border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #ccc; 多种缩写方式: border: 1px solid #ccc; border-width:10px 5px 3px 15px;

? ?

?

课后作业 项目6-5 6-6 6-7

当堂测试:当当网细节

回顾无序列表
? <ul>

<li>……</li> ? <li>……</li> ? <li>……</li> ? </ul>
?

a—实战—当当书网列表
Html代码:

<ul> <h3>……</h3> <li> …… </li> …… <li> …… </li> <li class="last"></li> </ul>

列表拓展

2-多个盒子的布局 ——块与内嵌

实例3 <div>和<span>

<div>标记是一个块状的容器,其默认的状态就是占据 整个一行。 <span>标记是一个行间的容器,其默认状态是行间的 一部分,占据行的长短由内容的多少来决定。

块元素(block)
? ? ?

block元素总是在新行上开始; 元素的宽、高、padding、margin等都可控制; 缺省宽度是容器的100% ;

常见块元素有: <div>、<p>、<h1>、<form>、<ul>、<li>、<ol>和 <table>
?

内嵌元素(inline)
? ?

inline元素可和其他元素在同一行上; 宽、高、padding、margin等不可改变;

? ?

常见内嵌元素有: <span>、<a>、<input>、<img>、<strong> 和 <em>。

display属性
块状显示 block (让inline元素从新行开始 )
内嵌显示 inline (让block元素和其他元素在同 display:inline; display:block;

一行上 )
none 隐藏内容 display:none;

使用范例1
a{display:block; }
使得链接对象a的显示方式由 一段文本改变为一个块状对象

使用范例2
span{ display: inline-block; }

使得对象仍然在一行,但可设置 block属性的宽度和高度。

<li><span>1</span><a href="#">基于PSD设计图的网页设计流程</a></li>

使用范例3

课后练习:

7-1 7-2

3-多个盒子的布局 ——浮动和清除

主要内容
? ? ? ?

浮动:float 清除:clear 经典布局 扩展布局

块与行的区别

<div>标记是一个块状的容器,其默认的状态就是占据 整个一行。 <span>标记是一个行间的容器,其默认状态是行间的 一部分,占据行的长短由内容的多少来决定。

深入浮动 float
?

文档流:是浏览器解析网页的一个重要概念, 对于一个HTML网页,body元素下的任意元素, 根据其前后顺序,组成了一个个上下关系,这 便是文档流。 文档流是浏览器的默认显示规则。如图所示

?

HTML代码顺序:

<div>左列</div> <div>右列</div> <p>……</p>

默认样式

流动样式

浮动
?

改变页面对象的前后流动顺序
?

排版简单,具有良好的伸缩性。

?

float:
left 对象将向左浮动;下面的内容流到当 前对象的右侧 ? right 对象将向右浮动;下面的内容流向左 侧 ? none 对象不浮动
?

浮动效果展示

结论:通过CSS布局,可以在不改变HTML代码的同时, 调整盒子的显示位置。

两个盒子的故事

误差
左浮动

原因: 左列进行浮动后,脱离了默认文档流, 所以只剩右列的盒子。 解决方法: 同一层盒子的一起加浮动属性。

我也浮 动

二列固定宽度
#left{ #right{ background-color:#cccccc;background-color:#ccff00; border:2px solid #00ff00; border:2px solid #00ff00; width:200px; height:300px; width:200px; float:left; height:200px; } float:left; }

? ?

<div id="left"> 左列 </div> <div id="right"> 右列 </div>

两列如何居中?

答案:把两列放在一个盒子中,对于外面的盒子做居中处理!!

扩展容器盒子的高度

原理: 一个div的范围是由 它里面的标准流内 容决定的,与里面 的浮动内容无关。

清除浮动
?

clear 边。
?

指出了不允许有浮动对象的

both : 不允许有浮动对象 ? left : 不允许左边有浮动对象 ? right : 不允许右边有浮动对象 ? none : 允许两边都可以有浮动对象

浮动的清理
?

第一种用法:如果因为特殊设计 ,不希望下 面的对象继续浮动,便可以使用clear属性来拒 绝某个方向的浮动。 第二种用法:浮动很多元素之后,突然需要另 起一行。

?

拓展1:网页经典布局

html结构
<div id="main">#main <div id="top">#top</div> <div id="left">#left</div> <div id="right">#right</div> <div id="footer">#footer</div> </div>

容器(container)

布局游戏
?

规则:不允许修改body中的代码

三人游戏(第一、二关)

三人游戏(第三、四关)

三人游戏(第五关-Boss)

作品欣赏:图文环绕

拓展:图片居中环绕
?

图片居中环绕,你会做吗?

页面布局扩展测试

CSS技术扩展-扩充布局
#head(高度50px ) #right #left

?
( 宽度400px 高度200px )

?
(宽度200px 高度400px )

#a1

#a2

?

?

( 宽度200px 高度200px ) ( 宽度200px 高度200px

#footer(高度50px)

抽象盒模型
#head #left 50
#right

400*200
#a1 #a2

200*400

200*200 200*200
50

#footer

? ? ?

?
?

?
? ?

<div id="main"> <div id="top">top</div> <div id="left">left</div> <div id="right">right</div> <div id="a1">a1</div> <div id="a2">a2</div> <div id="footer">footer</div> </div>

网页内容拓展

扩展1-底部在同一水平线时增加模块
#head #right

#left

?
#a3

?
#a1 #a2

?
#a4

?
#a5

?

?
#footer

?

扩展2-底部不在同一水平线时增加模块
#head #right #left

?
#a1 #a2

?
#a5

?
#a4

?
#a3

?

?
#footer

?

扩展3-底部不在同一水平线时增加模块
#head #right #left

?
#a1 #a2

?
#a3

?
#a4

?
#a5

?

?
#footer

?

综合案例-初恋这件小事

网页细节制作

主要内容
1.图文混排 2.列表练习 3.超链接的制作 4.图片排版

1——图文混排

a_分栏排版
?
?

利用二列布局,居中显示的效果

<div id="layout">居中 ? <div class=“col”> ……</div> ? <div class=“col”>……</div> ? </div>

b—图片基本控制
步骤3:
?

步骤1:

?

步骤2:

注意:图片用div定位的优点

C—实战—电影介绍

Html代码:
<h1>……</h1> <div> <img /> <h2>……</h2> </div> <p>……</p>

项目8-2,8-12

2—列表练习

列表欣赏

3-横向导航条
display:block 使得a链接对象的显示方式 由行间文本改变为一个块 状对象
?

实战

4_图片排版

实战练习:
html结构: <div>

<img

/>

<h2>……</h2>

<h3>……</h3>
</div>

图片排版欣赏

网页实例制作
DIV+CSS

Xhtml 代码撰写规范
?

?

?

?

1.所有的标记都必须要有一个相应的结束标记。 例如:<p>……</p> <br /> 2. 所有标签的元素和属性的名字都必须使用小写. 例如:<BODY>必须写成<body> 3. XHTML元素必须合理嵌套 。 例如:下面的代码: <p><b></p></b> 必须修改为: <p><b></b></p> 4.所有的属性必须用英文双引号括起来。 例如:<p align="left"> 左对齐</p>

DW中标准HTML文件结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> </body> </html>

项目8-1 8-3 8-4

项目8-2

项目8-6

项目 8-5 8-7 8-8

项目 8-9 8-10 8-12 8-13

综合实战

网页设计图

大作业给分(满分20分)
?

综合网页(5分) -网页设计与制作网站

?

独立完成
? ?

网站某部分(2-5分) 网站首页 (4-15分)

课程总结
?

html ->标记 ->网页内容
CSS ->属性 ->网页样式

美观、大方 的网页

?

+

=


相关文章:
课件2-CSS部分_图文.ppt
课件2-CSS部分 - 3-网页设计与制作 -css基础 课程内容体系 主要内容
课件2-CSS部分.ppt
课件2-CSS部分_计算机软件及应用_IT/计算机_专业资料。2-网页设计与制作
第二部分 CSS+DIV课件_图文.ppt
二部分 CSS+DIV课件 - 主讲老师:李霞 QQ:78531444 微信号:15536060389 手机号:18634309816 PHP网页设计班 Div+css的概述 ? 业界...
css课件(上课用)_图文.ppt
下面的两个id选择器,第一 个可以定义元素的颜色为红色,第个定义元素的颜色...(IE浏览器不能显示部分效果) 例题 css-12.html CSS 尺寸(Dimension) CSS ...
第二部分css-1.ppt
格式:ppt 关键词:教辅 1/2 相关文档推荐 网页制作精讲,第二部分css... 暂无...1.5 CSS选择器(名字): 选择器( 选择器 名字): CSS选择符 选择符就是CSS...
Web前端课件--CSS实现页面布局解析_图文.ppt
Web前端课件--CSS实现页面布局解析 - 页面布局 header Content footer HTML部分核心代码 ××× ...
html相关课件2_图文.ppt
html相关课件2 - 第1课 网页基础知识 课堂讲解 上机实战 首页 末页 向
第2部分 CSS网站布局与样式-技巧篇_图文.ppt
搜试试 5 悬赏文档 全部 DOC PPT TXT PDF XLS 广告 百度文库 专业资料 人文社科 广告/传媒第2部分 CSS网站布局与样式-技巧篇_广告/传媒_人文社科_专业资料 ...
第03部分-CSS盒子模型与定位(2)_图文.ppt
第03部分-CSS盒子模型与定位(2) - Web技术及应用 CSS盒子模型与定
CSS课件_图文.ppt
CSS课件 - CSS入门 软通H5开发工程师 曾珍 CSS样式控制 基本内容 1 基本概念 2 CSS选择器 3 CSS的盒子模型 4 控制背景控制 5 字体和文本控制 6 定位与布局....
CSS课件_图文.ppt
CSS课件 - CSS学习与设计 1 3 2 3 CSS简介 CSS基础 CSS兼容 CSS简介 简介: CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联...
dw课件2_图文.ppt
dw课件2 - Dreamweaver课件2... dw课件2_IT/计算机_专业资料。Dreamweaver课件2 Dreamweaver 第二...CSS 格式设置规则 CSS由两部分组成:选择器和声明。选择器是标 ...
css_ppt课件.ppt
页 文件的标签中,或是直接将CSS语句书写在某个元 素标签的属性部分。 重庆医科...下面的两个id选择器,第一 个可以定义元素的颜色为红色,第个定义元素的颜色...
DIV+CSS课件_图文.ppt
DIV+CSS课件 - DIV+CSS Div+css的概述 ?业界对DIV+CSS的标准化设计关注 ?DIV+CSS标准化的影响下,网页...
3-2--css-2.ppt
搜试试 3 帮助 全部 DOC PPT TXT PDF XLS 百度文库 专业资料 IT/计算机 ...部分 footer:底部部分 演示示例:3行布局 使用盒子属性实现DIV+CSS布局2-2 ? ...
电力拖动与运动控制课件2--_直流电动机_图文.ppt
电力拖动与运动控制课件2--_直流电动机 - 第一章 直流电动机 主要内容 1.
DIV+CSS课件_图文.ppt
DIV+CSS课件_院校资料_高等教育_教育专区。DIV+CSS 2015.3 DIV+CSS的概述 ?...如果水平位置没有空间了,则box3会 跑到下面去 去box2的高度的部分 会把box3...
7-3.3 课程教学课件(css样式表)_图文.ppt
7-3.3 课程教学课件(css样式表) - CSS样式表 一、CSS概述 ? ? ? CSS:Cascading Style Sheets,“层叠样式 表”,简称样式表,它是一种制作网...
第03部分-CSS盒子模型与定位(2)解析_图文.ppt
第03部分-CSS盒子模型与定位(2)解析 - Web技术及应用 CSS盒子模型
Web前端学习之CSS课件.._图文.ppt
选择器用来表示样式表的应用部分。在其后的大括号中 要写上想要应用的样式。 ...web前端规范之CSS模块化 2页 免费 Web课件CSS 151页 2下载券 web前端学习...
更多相关标签: