当前位置：文档之家 › div+css教学课程ppt

div+css教学课程ppt

  • 格式：pptx
  • 大小：328.31 KB
  • 文档页数：23

下载文档原格式

  / 23

合集下载

第7章 第2节 DIV+CSS布局网页 课件

第7章 第2节 DIV+CSS布局网页 课件
7.12
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。

第6章Div标签与CSS样式表(4)-CSS语法

第6章Div标签与CSS样式表(4)-CSS语法
因此，概括来说，CSS就是由3个基本部分组成 的——“对象”、“属性”和“值”。
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}

第6章DIV+CSS

第6章DIV+CSS
属性值越大表示在越上层 z-index : number
Overflow、Visibility、display、Z-index属性
display-－设置对象显示方式(可以各种不同的方式显示对象)
dispaly:block | none | inline | inline-block |list-item
图片 段落
top left 使用 Z － index指定是哪一层 <DIV>是块级容器标签，可以包 含图片、标题、段落、文字等
第二节 div与span
[SPAN]
注释： span 没有固 相对div容器，span容器的文本或图片要小些。 定的格 式表现。 当对它 不能用宽度属性width设置span标记内对象的宽 应用样 度。 式时， 何时使用span？在一行文本中，想对其中的文字 它才会 设置样式，而又不要该行文本换行的条件下，可 产生视 觉上的 选择span。 变化。
<html> <head> <style type="text/css"> #container{ margin:0px auto; padding:10px; width:450px; height:260px; border:1px solid #000;} #box1{width:300px; height:260px; border:1px solid #000; float:left;} #box2{width:120px; height:260px; border:1px solid #000; float:right;} </style> </head> 每个板块都是一个<div>，这里直接使用 <body> CSS 中的 id 来表示各个板块。 <div id="container"> 页面的所有 Div 块都属于 container，一般的 <div id="box1">这里是box1</div> Div 排版都会在最外面加上这个父 Div ， <div id="box2">这里是box2</div> 便于对页面的整体进行调整。 对于每个 Div 块，还可以再加入各种元素或行 </div> </body> </html>

第6章 Div+CSS布局网页

第6章 Div+CSS布局网页
图6-18 设置分类项方框
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。

《网页设计》课件——11-CSS浮动布局

《网页设计》课件——11-CSS浮动布局
A
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2

CSS基础实用PPT学习教案

CSS基础实用PPT学习教案
第39页共41页小结小结本章主要介绍了本章主要介绍了csscss的概念与作用如何构造的概念与作用如何构造csscss样式规则样式规则引用引用csscss样式到样式到htmlhtml页面中的四种方法页面中的四种方法csscss中的基本选择器中的基本选择器复合选择器和常用到的伪类伪元素选择器的使用方法复合选择器和常用到的伪类伪元素选择器的使用方法csscss的的继承特性和层叠特性的运行机制以及继承特性和层叠特性的运行机制以及csscss中常用单位和中常用单位和csscss书写与命名规范
（任其4何）中元E:E素a为c。ti前ve 面向被介用绍户过激的活某的种元素标设记置、样类式别，、可用ID于或页复面合中的 选择器，冒号后面为伪类，选择器与冒号之间不能 有空格，要连续书写。
【例4-3】利用ID选择器为不同标题设置样式示例 。
<style type = "text/css">
#one{
/* ID选择器 */
background-color:blue; /* 背景色为蓝色 */
color:#FFF;
/* 文字为白色 */
}
#two{
font-size:20px; /* 文字大小为20像素 */
#id名称{属性1:属性值1; 属性2:属性值2;……}
一个id最多只能赋予一个HTML标记是因为不 仅CSS可以使用，JavaScript等其他脚本语言也可 以使用id属性值。
另外，id选择器不支持像class选择器那样可以 多风格同时使用。
第17页/共41页
4.3.1 基本选择器
3.ID选择器
第1页/共41页
4.2 CSS的基本语法
CSS的一个核心特征，就是能够很容易地向HTML 文件中的所有同类型的标记应用一组样式。

CSS+Div布局 ppt课件

CSS+Div布局 ppt课件

2021/3/26 CSS+Div布局 ppt课件
34
8.4 “左中右”布局
8.4.1 课堂案例-连锁餐厅 8.4.2 使用CSS样式布局
2021/3/26 CSS+Div布局 ppt课件
35
8.4.1课堂案例-连锁餐厅
案例学习目标：学习“左中右”布局的方法。
2021/3/26 CSS+Div布局 ppt课件
17
8.2.3 浮动方式
无浮动
2021/3/26 CSS+Div布局 ppt课件
18
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
2021/3/26 CSS+Div布局 ppt课件
27
8.3.1课堂案例-网页设计大赛
案例学习目标：学习“上中下”布局的方法。
案例知识要点：在【插入】面板【HTML】选 项卡中，使用【Div】按钮 创建网页布局结构； 在【CSS设计器】面板中，使用【添加选择器】 按钮 创建<div>标签的ID样式，并采用缺省的 【position】和【float】属性，完成“上中下” 的布局。
16822position定位属性absolute绝对定位方式网页元素丌再遵循html的标准定位规则脱离了前后相继的定位关系以该元素的上级元素为基准设置偏移量迚行定位
第8章 CSS+Div布局
Dreamweaver CC 标准教程
2021/3/26 CSS+Div布局 ppt课件
1
本章学习的主要内容：

[PPT模板]CSS+DIV_教程_OK

[PPT模板]CSS+DIV_教程_OK

</STYLE>
作为选择符。
</HEAD>
5-1.htm
CSS样式表
4
一、CSS的基本概念
• 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式：
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
CSS样式表
23
鼠标属性
• 让鼠标移到不同对象上面，显示不同形状。 – Cursor属性，取值如下 • Auto：自动按默认显示 • Crosshair：“＋” • Hand:手形 • Text：文本I形 • Wait：等待 • ……
CSS样式表
24
练习：
• 1、若要在网页上使用使用统一的页面风格： – 背景为浅蓝灰色（#cdcdfe）， – 文本为深蓝色（#000066）， – 所有网页都不留边(Margin)， – 且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对 齐：居中；字体：楷体,Times New Roman；文字格式：加粗。
CSS样式表
7
一、CSS的基本概念
• 4、注释
➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
CSS样式表
8
一、CSS的基本概念
• 5、选择符
➢ 样式表的基本语法形式：
selector{property1:value1; property2:value2;…}
CSS样式表
25
练习：
• 2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格： – 文字大小：10.5pt; – 颜色：绿色； – 文本对齐：居中； – 字体：楷体 – 文字格式：加下划线

divcss美化与布局实战(详细分析：整体)共10张PPT

divcss美化与布局实战(详细分析：整体)共10张PPT

蓝色经典效果图
(实例文件：12-1. (实例文件：12-1. 在上一章中，电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML结构却没有任何修改。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 第12章 div+css美化与布局实战 首先根据博客的内容需要对整体框架进行合理规划。 首先根据博客的内容需要对整体框架进行合理规划。 在整体内容框架的基础上#parameter与#mainsupport两个部分又包含各个小的子块。 (实例文件：12-1. DIV+CSS网页样式与布局 (实例文件：12-1. 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 DIV+CSS网页样式与布局 本章将继续拓展这种思路，以网上常见的博客首页为例，用CSS实现更绚丽的网面变幻。
DIV+CSS网页样式与布局
第12章 div+css美化与布局实 战
本章简介
在上一章中，电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML 结构却没有任何修改。本章将继续拓展这种思路，以网上常见的博客首页为例， 用CSS实现更绚丽的网面变幻。同样保持页面的HTML不变，通过分别调用3个外 部CSS文件，实现3个完全不同的页面效果，即蓝色经典、清明上河图和交河故城。 (实例文件：12-1.h宽度且居中的样式，最上方为页面的banner和导航菜单， #parameter的各个项目在页面主体的右侧，#mainsupport在页面中间。
框架搭建

第4周：第7章 使用DIV和CSS进行页面布局

第4周：第7章 使用DIV和CSS进行页面布局
第8 页
DIV和CSS常见布局结构
• 二列宽度自适应：示例代码cssLayout4.html，容器内的两个div元素需要设置为float，并需要设置宽度 百分比，自行动手操作： ① 站点CSSLayout，新建csslayout4.html ② 通过窗口界面设置/通过代码直接设置（代码直接输入更简单）
第6 页
相对定位和绝对定位
• 浮动和定位的配合使用，可以实现网站设计人员需要创建多个表格才能创建的效果 • CSS中用position这个属性，absolute、fixed、relative、static、inherit • position属性设置，查看示例代码： positiondemo.html
• 一列宽度自适应：示例代码cssLayout2.html，核心在于设置DIV的margin属性，margin的值为auto， 宽度不再是固定值而是80%，自行动手操作： ① 站点CSSLayout，新建csslayout2.html ② 通过窗口界面设置/通过代码直接设置（代码直接输入更简单）
• 二列宽度固定：示例代码cssLayout3.html，容器内的两个div元素需要设置为float，并需要计算其所占 宽度，自行动手操作： ① 站点CSSLayout，新建csslayout3.html ② 通过窗口界面设置/通过代码直接设置（代码直接输入更简单）
第4 页
CSS布局基础
• CSS盒模型： ➢ width ➢ Height ➢ Border ➢ Padding ➢ Margin
外边距Margin，是边框与其他 元素之间保持的距离，默认情 况下元素会与其他元素紧密相 连， 设置了这个边界可以让元
素与其他元素之间保持距离
边框Border，可以设置CSS使其 显示，默认是不显示边框

DIVCSS学习(入门)教程

DIVCSS学习(入门)教程

Div+CSS布局入门教程页面布局与计划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。

在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。

下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。

所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。

有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。

DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。

写入整体层结构与CSS接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-ivID。

若是id="divID"那个层中包括了一个<img></img>，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divIDimg {}，这一点希望大伙儿要分清楚了。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

图片的边框
边框border Border-color Border-style（dashed虚线，dotted以圆点代 表边框，solid实线） Border-left，border-right，border-top， border-botomm
图片的大小
可以用绝对值定义图片的大小 例如：img{ width:100px; height:100px;} 也可以用相对大小来定义图片的大小 例如：img{ width:50%; height:30%;} img{
Css的选择器
我们可以直接用htm中标记名作为css的选择器： 例如
但是由于一个页面中不可能只使用一个 h1或者一个P所以我们又引进 一个类别选择器class=‘xxx’，用于区别每个标签之间的属性，这个 选择器的名称可以由用户自己取。 还有一种就是标记名后边直接跟类别选择器。 P .a1 还有一种id选择器 ：id=‘xxx’css写的时候用#xxx{ 样式}表示。但是一 个id选择器只能赋予一个htm标签。
Dl相当于描述内容的一个主题，这里边有标题和内容，一般标题用dt表 示 ，内容用dd表示。
Css的概念
Css是英文 casanding stylesheet的缩写。是1996年由w3c 审核通过并推荐使用，css的引进使html能够更适应美工 的网页设计。Div+css的引进使修改网页属性便利了很多。
图片的对齐
Text-align:left,center,right.水平位置的移动 Vertical-align 竖直位置的移动（仅用于表格 中）
背景设置
Background-color背景颜色 Background-image背景图片 Background-repeat背景图片的重复 Background-position背景图片的位置 Background-position Background-attachment 图片的固定 fixed
Div中常用到的标签
Ul ol li dl dt dd div 块模型 Ul 是一个无序列表 ol是一个有序列表 li代表的是一列 使用方法： <ul> <li>………..</li> <li>………..</li> <li>………..</li> <li>………..</li> </ul>
<ol> <li>………..</li> <li>………..</li> <li>………..</li> <li>………..</li> </ol> <dl> <dd> <dt>
超链接和鼠标样式
超链接 a:link{} 没有点击之前超链接的样式 a:visited{}点击之后超链接的样式 a:hover{}鼠标移动到超链接上边的样式 a:hover{} 鼠标样式 Cursor：
浮动
Float：left ,right Position:绝对浮动absolute 相对浮动relative； Z-index:重叠块模型之间的排序。
段落的对齐方式
Text-align:left right center justify 两端对齐。 Vertical-align上下居中只能用于表格中。 Vertical-align可以写正数和负数。 行间距:line-height 可以是绝对数值，也可以 :line-height 是相对数值。 letter-spacing 控制文字之间的距离。
文字大小
In 英寸 Mm 毫米 Cm 厘米 Pt 点数 一般1pt等于1/79in 1pt 1/79in Pc 1pc=12pt Px 像素（现实大小和分辨率、显示器 大小有关系。）
文字样式
Color Font-weight 斜体：font-style 删除线：text-decoration:line-through； 顶划线:text-decoration:overline; 下划线：text-decoration:underline; 闪烁:text-decoration:blink;(火狐浏览器里边有效) 可以两个属性用一个标签中ห้องสมุดไป่ตู้间用空格分开。 字母大小写：text-transform:capitalize;首字母大写, lowercase小写，uppercase全部大写
类别选择器和id选择器
类别选择器
Id选择器
Css选择器
集体声明如果一些标签属性相同可以一起 声明。 Htm,body,div,li{margin:0px;pading:0px;} 选择器嵌套：一个标签下还有其他标签可以 这样使用。 例如<ul class=‘a1’><li></li></ul> .a1{样式} .ai li{样式}
块标签和行内标签
Div ul li 自己占一行的标签称为块标签 行内标签 span b a标签自己不能占据一行， 也就是说一行内可以放 多个这样子的标签。
Css样式中用到的标签
控制左右间距：padding，margin 控制左右排序：float{left，right} 控制字体：font 字体颜色：color 控制背景颜色级图片：background 控制高度和宽度：height，width。 位置浮动：position:absolute绝对位置，relative相对位置{top， left ，right，bottom} 清除 ：clear 值有left，right，both Z-index 控制重叠图片的位置 超链接：a:link 点击前 a:visited 点击后 a:hover鼠标放上去的 样式。 鼠标样式：cursor； 边框：border；
Div+css课程
Div和css的概念
Div是htm语言中一个标签，代表的是层的意思。在htm语 言中成对出现。<div> </div> Css是cascading style sheet 的缩写中文名字 “层叠样式 表”，也是就是控制htm标签的样式。1996年由w3c认证 通过并推荐使用的，使html更好的适应美工的设计要求。 Css样式可以写在代码中，也可以写在网页的头部，也可 以采取外部调用的方式。 在<head></head>中间插入<style></style>或者<link src=“” rel=“stylesheet”/>
Css的层叠样式
类别选择器的优先度高于标记选择器 Id选择器的优先度高于类别选择器 行内样式优先度高于id选择器 选择器优先度相同的时候先来者居上。
Css样式控制字体
控制文字字体 控制字体大小 控制文字颜色 文字粗细 斜体 下划线、定短线、删除线 英文字母的大小
控制文字字体
Font-family P {font-family:黑体,宋体,楷体,sans-seirf;} 在浏览者网页中寻找先找黑体，如果没有就 找宋体，黑体宋体都没有找楷体，如果都没 有就用浏览器默认字体。